1、引入ztree树相关的js文件

css/demo.css" type="text/css">
 

 

 

 

注意excheck.js文件是一定要引入的，要不然会导致节点前的checkbox无法显示和操作。

2、默认设置每一个节点的nocheck属性值为true

nocheck表示无checkbox选择框，属性值设置为true，表示不会显示节点前面的checkbox选择框。所以需要我们在提供节点数据给zTree树控件之前设置好每一个节点的nocheck值为true，示例数据形如：

//ztree用于初始化的静态数据      
 
var zNodes = [
 
{ id: 1, pId: 0, name: "随意勾选 1", nocheck: true },
 
{ id: 11, pId: 1, name: "随意勾选 1-1", nocheck: true },
 
{ id: 111, pId: 11, name: "无 checkbox 1-1-1", nocheck: true },
 
{ id: 112, pId: 11, name: "随意勾选 1-1-2", nocheck: true },
 
{ id: 12, pId: 1, name: "无 checkbox 1-2", nocheck: true },
 
{ id: 2, pId: 0, name: "随意勾选 2", nocheck: true },
 
];

3、动态设置节点前显示checkbox

想要让某个节点显示checkbox选择框，就必须要更新其nocheck属性值为false即可。核心方法如下所示：

function filter(node) {
 
return node;
 
}
///动态设置zTree的所有节点有checkbox
 
function DynamicUpdateNodeCheck() {
 
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
 
//根据过滤机制获得zTree的所有节点          
 
var nodes = zTree.getNodesByFilter(filter);
 
//遍历每一个节点然后动态更新nocheck属性值
 
for (var i = 0; i < nodes.length; i++) {
 
var node = nodes[i];
 
node.nocheck = false; //表示显示checkbox
 
zTree.updateNode(node);
 
}
 
}

4、ztree显示选中节点

//初使化所有被选中的节点
        function initChecked(){
                var zTree = $.fn.zTree.getZTreeObj("resTree");
                var orgId = $("#orgId").val();
                if(orgId!=null && orgId !=''){
                    var node = zTree.getNodeByParam("orgId", orgId, null);   //得到选中节点
                    zTree.checkNode(node, true, true);              //显示选中节点
                    zTree.selectNode(node);                    //打开选中节点的父节点
                }
        }

完整代码：

   
   
   
   
   
   
   
   


   

        Checkbox nocheck 演示