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

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

默认情况下zTree树节点无checkbox选择框 ==========》动态设置每一个节点均有选择框checkbox

面对这样一个需求，如果我们使用的是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. 
   }

完整示例代码如下所示：

 
   [html]  
   view plain 
  
 <!DOCTYPE html>  
 <html>  
 <head>  
     <title>ZTREE DEMO - 默认zTree几点无checkbox动态设置节点checkbox出现</title>  
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
     <link rel="stylesheet" href="../../../css/demo.css" type="text/css">  
     <link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">  
     <script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>  
     <script type="text/javascript" src="../../../js/jquery.ztree.core-3.5.js"></script>  
     <script type="text/javascript" src="../../../js/jquery.ztree.excheck-3.5.js"></script>  
     <script type="text/javascript">  
         <!--  
         var setting = {  
             check: {  
                 enable: true,  
                 nocheckInherit: false  
             },  
             data: {  
                 simpleData: {  
                     enable: 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 },  
         ];  
   
         //过滤节点的机制 直接return node表示不做任何过滤  
         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);  
             }  
         }  
   
         ///页面加载后初始化zTree数据且默认展开所有节点  
         $(document).ready(function () {  
             $.fn.zTree.init($("#treeDemo"), setting, zNodes).expandAll(true);  
         });  
         //-->  
     </script>  
 </head>  
 <body>  
     <h1>  
         Checkbox nocheck 演示</h1>  
     <div class="content_wrap">  
         <div class="zTreeDemoBackground left">  
             <ul id="treeDemo" class="ztree">  
             </ul>  
         </div>  
         <div class="right">  
             <p>  
                 默认情况下设置任何节点无checkbox选择框，需要配置每一个节点的nocheck属性为true即可。</p>  
             <p>  
                 zTree加载完成后通过updateNode(node)方法动态更新节点的nocheck属性为false，则节点将会显示checkbox。</p>  
             <h3>  
                 STEP DAY</h3>  
             <div>  
                 <input type="button" value="动态设置节点有checkbox" onclick="DynamicUpdateNodeCheck()" />  
             </div>  
         </div>  
     </div>  
 </body>  
 </html>  