Jquery 트리 플러그인 zTree 사용법 tutorial_jquery

이 글은 Jquery 트리 플러그인 zTree의 사용법을 예시와 함께 분석한 것입니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.

zTree 소개를 검색해 보세요.

이 예시의 최종 효과는 다음과 같습니다.

마우스를 1단계 디렉토리로 이동하면 모두 선택 링크가 나타납니다. 모두 선택 링크를 클릭하면 디렉토리의 모든 하위 항목이 수신자의 텍스트 상자에 추가됩니다. 하위 항목이 하나 추가됩니다. 어떤 정보를 추가할지 결정하는 것은 귀하에게 달려 있습니다.

1. zTee를 다운로드하고 페이지에 jquery.js를 도입한 다음 기능 요구 사항에 따라 zTree의 해당 js 및 css를 추가합니다

코드 복사 코드는 다음과 같습니다.

jquery.ztree.core-3.5.js: zTree 코어 패키지

jquery.ztree.excheck-3.5.js: 체크박스 기능 패키지

jquery.ztree.exedit-3.5.js: 함수 패키지 편집

zTree 코어 패키지를 도입해야 합니다.
2. zTree를 구성합니다. 개별 지침은 코드의 주석을 참조하세요.

zTree 설정 정보:

변수: zTree에서 사용되는 html 태그 ID는 끝에 다음과 같은 접미사가 추가됩니다. 예를 들어 첫 번째 수준 디렉터리 앞의 확장되고 닫힌 이미지의 ID는 IDMark_Switch입니다.

코드 복사 코드는 다음과 같습니다.var IDMark_Switch = "_switch", IDMark_Icon = "_ico",

IDMark_Span = "_span",

IDMark_Input = "_input",
IDMark_Check = "_check",
IDMark_Edit = "_edit",
IDMark_Remove = "_remove",
IDMark_Ul = "_ul",
IDMark_A = "_a"

var 설정 = {
보기: { addHoverDom: addHoverDom,

제거HoverDom: 제거HoverDom
},
콜백: {
beforeClick: beforeClick,
onClick: onClick
}  
}; 함수 beforeClick(treeId, treeNode, clickFlag) {
//경고(treeNode.id)
var ticketBagNo = treeNode.phone
re =new RegExp(ticketBagNo)
var accept = $("#accept").val();//데이터를 넣을 위치를 찾아 이미 존재하는지 테스트합니다
If(!re.test(수락)){
$("#accept").val(accept treeNode.name "<" ticketBagNo ">,"); }  
}
함수 onClick(event, treeId, treeNode, clickFlag) {
//alert(clickFlag "zzz"); }


콜백에는 두 가지 콜백 함수가 있습니다

클릭 전:

은 선택 또는 선택 해제 전 이벤트 콜백 함수를 캡처하는 데 사용되며, 반환 값에 따라 선택 또는 선택 해제 허용 여부를 결정합니다. 기본값: null

온클릭:

클릭 중인 노드를 캡처하는 데 사용되는 이벤트 콜백 함수

beforeClick 메소드가 설정되고 false를 반환하는 경우 onClick 이벤트 콜백 함수가 트리거되지 않습니다.

기본값: null

addHoverDom은 마우스가 노드 위로 이동할 때의 반응입니다. 여기서는 첫 번째 수준 디렉터리에 대해 모두 선택 기능을 추가합니다.

코드 복사

코드는 다음과 같습니다.

함수 addHoverDom(treeId, treeNode) { 
 if (!treeNode.children)return; 
    if (treeNode.parentNode && treeNode.parentNode.id!=1 ) return; 
    var aObj = $("#" treeNode.tId IDMark_A); 
    if (treeNode.children.length>0) { 
 if ($("#diyBtn1_" treeNode.id).length>0) return; 
 if ($("#diyBtn2_" treeNode.id).length>0) return;//' onclick='allSelect(" treeNode ") 
 var editStr = "전체选"; 
 aObj.append(editStr); 
 document.getElementById("diyBtn1_" treeNode.id).onclick = function() { 
      allSelect(트리노드); 
 }; 
    } 
}

전체选allSelect방법:

复제대码 代码如下:

function allSelect(treeNode){ 
    if (!treeNode.children)return; 
    for(i=0;i  var ticketBagNo = treeNode.children[i].phone; 
    re =new RegExp(ticketBagNo);   
    var accept = $("#accept").val();//找到文本框如果该记录未添加就添加 
    if(!re.test(accept)){ 
 $("#accept").val(accept treeNode.children[i].name "<" ticketBagNo ">,"); 
    } 
    } 
}

复제대码 代码如下:function RemoveHoverDom(treeId, treeNode) { 

if (!treeNode.children)return; 

$("#diyBtn1_" treeNode.id).unbind().remove(); 
}

zTree节点信息：可以根据需求动态生成.

以下为Demo数据，每个节点中的name，phonecity="23",但是要注意格式问题，这一点是不常方便。

复aze代码 代码如下:var zNodes =[ 

    {id:1,name:"所有老师",open:false,//这里false为默认关闭,true打开 

 어린이:[ 
  {id:2,name:"测试老师",phone:"123456789101"}, 
  {id:3,name:"大老师",phone:"15623545621"} 
 ] 
    }, 
    {id:4,name:"一班",open:true, 
 어린이:[ 
      
   {id:5,name:"작은꽃",phone:"25364215211"}, 
  {id:6,name:"小绿",phone:"365241253"} 
  }, 

  {id:7,name:"two班",open:true,   어린이:[ 

      
   {id:8,name:"소가족",phone:"25364215211"}, 
  {id:9,name:"小沙",phone:"365241253"} 
   } 
];

以下是我从服务动态生成树的例子, 不需要可以忽略，我留着以后参考的.

复代码 代码如下:

/*var zNodes =[ 
 
    {id:1,name:"所有老师",open:false, 
 어린이:[ 
   
  {id:,name:" ",phone:""},  
  {id:,name:" ",phone:""}< ;/s:if> 
   
 ] 
    }, 
     
 
     
    {id:,name:"",open:true, 
 어린이:[ 
      
   {id:,name:"",phone:""}, 
  {id:,name:"",phone:""} 
      
     ]}, 
     ]} 
     
 
];*/

准备就绪。初始化树要显示적지방，

复代码 代码如下:

$(document).ready(function(){ 
    $.fn.zTree.init($("#treeDemo"), 설정, zNodes); 
});

希望本文所述对大家의 javascript는 程序设计有所帮助。