jq-zTree使用

传统网站使用jq-ztree比较多，做一些技术总结

ztree网站api：http://www.treejs.cn/v3/api.php

//引入css，自己的css，ztree的css



//引入jq, ztree.core.js,


//如果勾选，引入ztree.excheck.js

//如果编辑树【拖拽，删除，批量加载】，引入ztree.exedit.js。



//dom文本中引用

    //id存放树的区域，class需要添加ztree才会有效果
    

    

1、节点不显示 checkbox / radio

//想要节点不显示勾选框，给数据添加nocheck属性，默认false显示，true为不显示。
var zNodes = [
    {
        name:"test1",
        open:true, 
        nocheck:true //nocheck为true时没有勾选框
        children:[
          {name:"test1_1"}, 
          {name:"test1_2"}
        ]
     }
  ];

2、树展开

//给数据添加open，默认false不展开，true展开。
var zNodes = [
    {
        name:"test1",
        open:true, //open为true时展开
        nocheck:true 
        children:[
          {name:"test1_1"}, 
          {name:"test1_2"}
        ]
     }
  ];
//通过获取节点添加展开属性
var zTreeObj = $.fn.zTree.getZTreeObj("tree");
var sNodes = zTreeObj .getSelectedNodes();
if (sNodes.length > 0) {
    var isOpen = sNodes[0].open;
}

3、多层树，数据没有子元素的分级，在同一层时需要进行数据处理

//同一层的数据
 {
    "list": [{
        "value": "01",
        "text": "大业务"
    }, {
        "value": "02",
        "text": "大金融"
    }, {
        "value": "0101",
        "text": "大业务分支1"
    }, {
        "value": "0201",
        "text": "大金融分支1"
    }, {
        "value": "0202",
        "text": "大金融分支2"
    }, {
        "value": "020101",
        "text": "大金融分支1子分支1"
    }, {
        "value": "020102",
        "text": "大金融分支1子分支2"        
    }]
}
//需要转换ztree需要的分级格式，需要id，name，pId
//pId指向当前节点的父级
$.each(data_type, function(i, v) {
    var bean = {};
    bean.id = v.value;
    bean.name = v.text;
    bean.pId = v.value.slice(0, v.value.length - 2); //pId需要分级
})
//处理后的数据
{
    "list": [{
        "id ": "01",
        "text": "大业务",
        "pId": "0",        
    }, {
        "id": "02",
        "text": "大金融",
        "pId": "0",    
    }, {
        "id": "0101",
        "text": "大业务分支1",
        "pId": "01",        
    }, {
        "id": "0201",
        "text": "大金融分支1",
        "pId": "02",        
    }, {
        "id": "0202",
        "text": "大金融分支2",
        "pId": "02",        
    }, {
        "id": "020101",
        "text": "大金融分支1子分支1",
        "pId": "0201",        
    }, {
        "id": "020102",
        "text": "大金融分支1子分支2",
        "pId": "0201",        
    }]
}