jquery ztree tree

1. File import

<script type="text/javascript" src="/libs/zTree_v3-master/js/jquery.ztree.core.js"></script>  
< script type= "text/javascript" src= "/libs/zTree_v3-master/js/jquery.ztree.exedit.js" ></ script > //For ztree editing (add, delete, check, change)
<script type="text/javascript" src="/libs/zTree_v3-master/js/jquery.ztree.excheck.js"></script>   //checkBox
<link rel="stylesheet" type="text/css" href="/libs/zTree_v3-master/css/zTreeStyle/zTreeStyle.css">

2.setting attribute analysis

var setting = {
     data :{
         simpleData :{
             enable : true ,
             autoCheckTrigger : true ,
             chkStyle : "checkbox" ,
             chkboxType :{ "Y" : "ps" , "N" : "ps" },
             tId : "id" , //Modify ztree's naming of node id
             pId : "parentId"     //Modify ztree's naming of parent node id

        }
    },
    check : {
         enable : true //Set the checkbox to be available
     }
};

3. Initialization

var zNodes = [];
zNodes = [
    {
        tId : 1 ,
         name : "root node 1" , //node name
 open : false ,   isParent : true },        
        

    
    {
        name : "root node 2" ,
         open : false ,
         tId : 2 ,              //custom, optional number  children : [       {
                 tId : 3 ,
                 name : "2-layer node 1"
 },
        
                        
            {
                tId : 4 ,
                 name : "2nd layer node 2" ,
                 /*open: true,*/
 children : [{
                     tId : 5 ,
                     name : "3rd layer node 1"
 }]                                
            }
        ]
    }
];

zNodes = [
    { id : 1 , name : "root node 1" , open : false , isParent : true , pId : 0 },
    { id : 4 , name : "Layer 2 Node 2" , pId : 1 },
    { id : 3 , name : "Layer 2 Node 1" , pId : 4 },
    {id:5, name:"3层节点1",pId:4},
    { name: "根节点2", open: false,id: 2,pId: 0}
];

<ul id="treeDemo" class="ztree"></ul> //html代码

zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);

4增加节点

(1)通过增加json字符串

zNodes[1].children[1].children.push({name:"3层节点2：手动添加Json字符串"})

(2)通过ztree的addNodes方法

var newNode1 = {name:"3层节点3：我是addNodes新增的"};
var x = zTreeObj.getNodeByTId("4");
zTreeObj.addNodes(x, -1, newNode1, true);

5.模糊查询，并使查询节点变色

var zNodes1 = zTreeObj . getNodesByParamFuzzy ( "name" , 'layer 3' , null ); // query with name as the condition, the result is an array of nodes
 for ( var i = 0 ; i < zNodes1 . length ; i ++) {
     $ ( "#" + zNodes1 [ i ]. tId + '_span' ). css ( 'background-color' , 'red' ); //Modify the color of the selected node
}

Unopened nodes are not in the query results because these nodes do not generate html elements

$(document).on('click',".switch",function() {
    if ($("#select").val() != "") {
        setTimeout(function() {
            $("#sel").click();
        }, 200)
    }
})

Through the click event of the expand button of the node, if the query condition is not empty, the query operation is performed. Setting a delay of 0.2 seconds through setTimeout is because HTML elements need to be generated. If they are executed sequentially, the query will still be executed first, and then added.

The html element does not have the effect of changing the color of the child node query. This method is not good, I look forward to God's advice. thanks

Guess you like