通过数组的遍历，动态生成树形节点，对后端数据的要求降低，只需要一个数组即可。

 

树形菜单

 
  
  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
  5. <title>树形节点</title> 
  6. <style type="text/css"> 
  7. .ui-treenode ul li{ 
  8.     list-style:url("p_w_picpaths/tree/tree2.JPG"); 
  9.     padding: 4px; 
  10.     background: url('p_w_picpaths/tree/tree4.JPG') no-repeat 0px 5px; 
  11.     font-size: 12px; 
  12.     text-indent: 20px; 
  13. } 
  14. .ui-treenode ul li.cur{ 
  15.     background: url('p_w_picpaths/tree/tree3.JPG') no-repeat 0px 5px; 
  16.     list-style:url("p_w_picpaths/tree/tree1.JPG"); 
  17. } 
  18. </style> 
  19. <script type="text/javascript" src='http://code.jquery.com/jquery-latest.min.js'></script> 
  20. <script type="text/javascript"> 
  21. (function($){ 
  22.     var self = null; 
  23.     $.fn.TreeNode = function(cfg,callback){ 
  24.         self = $(this); 
  25.         //默认0为根节点 
  26.         self.attr('nodeId',0); 
  27.          
  28.         var default_cfg = { 
  29.                 data:null 
  30.         };  
  31.          
  32.         var _config = $.extend({},default_cfg,cfg); 
  33.          
  34.         var data = _config.data; 
  35.          
  36.         var fn = { 
  37.                 createNode: function(parent){ 
  38.                     var son = parent.next(); 
  39.                     var nodeId = parent.attr('nodeId'); 
  40.                      
  41. //                  如果是第一次打开  则创建   否则使用已有的节点 
  42.                     if(nodeId == 0 || son[0]&&son[0].nodeName != 'UL'){ 
  43.                         var dom = ""; 
  44.                         //判断是否为叶子节点 
  45.                         if(parent && $(parent).attr('nodeId') != undefined && data.length > 0){ 
  46.                             dom = "<ul>"; 
  47.                             if(data && typeof data == "object") 
  48.                             $.each(data,function(i){ 
  49.                                 var obj = data[i]; 
  50.                                 if($(parent).attr('nodeId') == obj.parentId){ 
  51.                                     dom += "<li nodeId="+obj.id+">"+obj.text+"<input type='checkbox'/></li>"; 
  52.                                 } 
  53.                             }); 
  54.                             dom += "</ul>"; 
  55.                             $(parent).attr('nodeId') == 0 ? $(dom).appendTo(parent) : $(dom).insertAfter(parent).hide().slideDown(200,function(){ 
  56.                                 var isChecked = $(this).prev('li').find('input:checkbox').attr('checked'); 
  57.                                 $('li',this).each(function(){ 
  58.                                     $('input:checkbox:first',this).attr('checked',isChecked); 
  59.                                 }); 
  60.                             }); 
  61.                         } 
  62.                     } 
  63.                     return $(dom); 
  64.                 }, 
  65.                 swicthNode:function (target){ 
  66.                     if(target.tagName == 'LI'){ 
  67.                             var parent = $(target); 
  68.                             var son = parent.next(); 
  69.                             var newNode; 
  70.                             parent.toggleClass('cur'); 
  71.                                 //如果是第一次打开  则创建   否则使用已有的节点 
  72.                                 if(son[0]&&son[0].nodeName == 'LI'){ 
  73.                                     newNode = fn.createNode(parent); 
  74.                                 }else{ 
  75.                                     newNode = parent.next('ul');     
  76.                                     newNode.slideToggle(); 
  77.                                 } 
  78.                     } 
  79.                 }, 
  80.                 linkCheck:function (){ 
  81.                     $('input:checkbox',self).live('change',function(){ 
  82.                         var parent_box = $(this); 
  83.                         fn.createNode(parent_box.parent()); 
  84.                         var attr_checked = parent_box.attr('checked') == undefined ? false:true; 
  85.                         var checkbox = parent_box.parent().next('ul').find('input:checkbox').attr('checked',attr_checked); 
  86.                     }); 
  87.                 }        
  88.         }; 
  89.          
  90.         self.getData = function(){ 
  91.             var data = new Array(); 
  92.             $('input:checkbox:checked',self).each(function(){ 
  93.                 var li = $(this).parent(); 
  94.                 data.push(li.attr('nodeId')); 
  95.             }); 
  96.             return data; 
  97.         } 
  98.  
  99.         //创建根节点 
  100.         fn.createNode(self); 
  101.         $('ul li',self).live('click',function(e){ 
  102.             fn.swicthNode(e.target); 
  103.         }); 
  104.          
  105.         //checkbox联动 子节点随着父节点变化 
  106.         fn.linkCheck(); 
  107.          
  108.         return self; 
  109.     }; 
  110. })(jQuery); 
  111. </script> 
  112. </head> 
  113. <body> 
  114. <div style='width:900px;height:600px;margin: 0px auto;border: 1px solid;'> 
  115. <!--树形节点--> 
  116.     <div id='demo' class='ui-treenode'> 
  117.          
  118.     </div> 
  119. </div> 
  120. <input type='button' value='get checked data!' id='btn-get'> 
  121. <script type="text/javascript"> 
  122. $(function(){ 
  123.     /* 节点关系数据   可从后台传入 */ 
  124.     var data = [ 
  125.                 {id:1,text:'name1',parentId:0}, 
  126.                 {id:2,text:'name2',parentId:0}, 
  127.                 {id:3,text:'name3',parentId:0}, 
  128.                 {id:4,text:'name4',parentId:0}, 
  129.                 {id:5,text:'name5',parentId:0},  
  130.                 {id:6,text:'name6',parentId:1}, 
  131.                 {id:7,text:'name7',parentId:1}, 
  132.                 {id:8,text:'name8',parentId:1}, 
  133.                 {id:9,text:'name9',parentId:2}, 
  134.                 {id:10,text:'name10',parentId:2}, 
  135.                 {id:11,text:'name11',parentId:2}, 
  136.                 {id:12,text:'name12',parentId:2}, 
  137.                 {id:13,text:'name13',parentId:2}, 
  138.                 {id:14,text:'name14',parentId:10}, 
  139.                 {id:15,text:'name15',parentId:10}    
  140.     ]; 
  141.     var treeNode = $('#demo').TreeNode({data:data}); 
  142.     $('#btn-get').click(function(){ 
  143.         var data = treeNode.getData(); 
  144.         alert('你选中了：'+data); 
  145.     }); 
  146. }); 
  147. </script> 
  148. </body> 
  149. </html>