jquery.ztree增加checkbox选项（可选以及不可选）

有一棵树，我们只需要其中几个节点可以通过勾选前面checkbox来对其进行操作，且这个操作需要动态执行。应该如何实现呢？

==========》

面对这样一个需求，如果我们使用的是zTree树控件，那么将会变得非常地简单。

面对这样一个需求，如果我们使用的是zTree树控件，那么将会变得非常地简单。

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

1. <link rel="stylesheet" href="../../../css/demo.css" type="text/css">
2. <link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
3. <script type="text/javascript" src="../../../js/jquery-1.4.4.min.js">script>
4. <script type="text/javascript" src="../../../js/jquery.ztree.core-3.5.js">script>
5. <script type="text/javascript" src="../../../js/jquery.ztree.excheck-3.5.js">script>

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

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

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

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

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

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

01. //过滤节点的机制 直接return node表示不做任何过滤
02. function filter(node) {
03. return node;
04. }
05.
06. ///动态设置zTree的所有节点有checkbox
07. function DynamicUpdateNodeCheck() {
08. var zTree = $.fn.zTree.getZTreeObj("treeDemo");
09. //根据过滤机制获得zTree的所有节点
10. var nodes = zTree.getNodesByFilter(filter);
11. //遍历每一个节点然后动态更新nocheck属性值
12. for (var i = 0; i < nodes.length; i++) {
13. var node = nodes[i];
14. node.nocheck = false; //表示显示checkbox
15. zTree.updateNode(node);
16. }
17. }

完整示例代码如下所示：

    
    
    
    
    
    
    
    


    

        Checkbox nocheck 演示
    

        

            

            
        
        

            

                默认情况下设置任何节点无checkbox选择框，需要配置每一个节点的nocheck属性为true即可。
            

                zTree加载完成后通过updateNode(node)方法动态更新节点的nocheck属性为false，则节点将会显示checkbox。
            

                STEP DAY