Jquery tree plug-in zTree usage tutorial_jquery

This article analyzes the usage of Jquery tree plug-in zTree with examples. Share it with everyone for your reference. The specific analysis is as follows:

Just search for the introduction to zTree.

The final effect of this example is as follows:

When the mouse moves to the first-level directory, a select all link will appear. Click the select all link and all sub-items in the directory will be added to the recipient's text box. Of course, clicking on a single sub-item will add one. It's up to you to decide what information you want to add.

1. Download zTee, introduce jquery.js into the page, and add the corresponding js and css of zTree according to functional requirements

Copy code The code is as follows:

jquery.ztree.core-3.5.js: zTree core package

jquery.ztree.excheck-3.5.js: Checkbox function package

jquery.ztree.exedit-3.5.js: Editing function package

The zTree core package must be introduced.

2. Configure zTree, please see the comments in the code for individual instructions

zTree setup information:

Variables: The html tag IDs used in zTree will have the following suffix added at the end. For example, the IDs of the expanded and closed images in front of the first-level directory are IDMark_Switch. Let's explore others.

Copy code The code is as follows:

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 setting = {
View: {
addHoverDom: addHoverDom,
removeHoverDom: removeHoverDom
},
Callback: {
beforeClick: beforeClick,
onClick: onClick
}  
};
function beforeClick(treeId, treeNode, clickFlag) {
//alert(treeNode.id);
var ticketBagNo = treeNode.phone;
re =new RegExp(ticketBagNo);
var accept = $("#accept").val();//Find the place where you want to put the data and test whether it already exists
If(!re.test(accept)){
$("#accept").val(accept treeNode.name "<" ticketBagNo ">,");
}  
}
function onClick(event, treeId, treeNode, clickFlag) {
//alert(clickFlag "zzz");
}

There are two callback functions in callback

beforeClick:

is used to capture the event callback function before checking or unchecking, and determines whether to allow checking or unchecking based on the return value. Default value: null

onClick:

Event callback function used to capture the node being clicked
If the beforeClick method is set and returns false, the onClick event callback function will not be triggered.
Default value: null

addHoverDom is the reaction when the mouse moves over the node. Here we add a select-all function for the first-level directory. addHoverDom is a function:

Copy code The code is as follows:

function 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(treeNode); 
 }; 
    } 
}

全选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 ">,"); 
    } 
    } 
}

removeHoverDom：鼠标移除节点所做出的反应，去掉全选

复制代码 代码如下:

function removeHoverDom(treeId, treeNode) { 
if (!treeNode.children)return; 
$("#diyBtn1_" treeNode.id).unbind().remove(); 
}

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

以下为Demo数据，每个节点中的name，phone都可以按照自己的需要进行添加或修改，比如你要添加一个年龄：age="23",但是要注意格式问题，这一点是非常方便。

复制代码 代码如下:

var zNodes =[ 
    {id:1,name:"所有老师",open:false,//这里false为默认关闭,true打开 
 children:[ 
  {id:2,name:"测试老师",phone:"123456789101"}, 
  {id:3,name:"大老师",phone:"15623545621"} 
 ] 
    }, 
    {id:4,name:"一班",open:true, 
 children:[ 
      
   {id:5,name:"小花",phone:"25364215211"}, 
  {id:6,name:"小绿",phone:"365241253"} 
  }, 

  {id:7,name:"二班",open:true, 
 children:[ 
      
   {id:8,name:"小家",phone:"25364215211"}, 
  {id:9,name:"小沙",phone:"365241253"} 
   } 
];

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

复制代码 代码如下:

/*var zNodes =[ 
 
    {id:1,name:"所有老师",open:false, 
 children:[ 
   
  {id:,name:"",phone:""}, 
  {id:,name:"",phone:""} 
   
 ] 
    }, 
     
 
     
    {id:,name:"",open:true, 
 children:[ 
      
   {id:,name:"",phone:""}, 
  {id:,name:"",phone:""} 
      
     ]}, 
     ]} 
     
 
];*/

准备就绪。初始化树要显示的地方，

复制代码 代码如下:

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

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