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

 

jquery树形菜单(无阶数限制)_第1张图片

   
   
   
   
    
    
    
    
    
  1. > 
    2. 
    
    
    
    
  2. <html> 
    3. 
    
    
    
    
  3. <head> 
    4. 
    
    
    
    
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    5. 
    
    
    
    
  5. <title>树形节点title> 
    6. 
    
    
    
    
  6. <style type="text/css"> 
    7. 
    
    
    
    
  7. .ui-treenode ul li{ 
    8. 
    
    
    
    
  8.     list-style:url("p_w_picpaths/tree/tree2.JPG"); 
    9. 
    
    
    
    
  9.     padding: 4px; 
    10. 
    
    
    
    
  10.     background: url('p_w_picpaths/tree/tree4.JPG') no-repeat 0px 5px; 
    11. 
    
    
    
    
  11.     font-size: 12px; 
    12. 
    
    
    
    
  12.     text-indent: 20px; 
    13. 
    
    
    
    
  13. } 
    14. 
    
    
    
    
  14. .ui-treenode ul li.cur{ 
    15. 
    
    
    
    
  15.     background: url('p_w_picpaths/tree/tree3.JPG') no-repeat 0px 5px; 
    16. 
    
    
    
    
  16.     list-style:url("p_w_picpaths/tree/tree1.JPG"); 
    17. 
    
    
    
    
  17. } 
    18. 
    
    
    
    
  18. style> 
    19. 
    
    
    
    
  19. <script type="text/javascript" src='http://code.jquery.com/jquery-latest.min.js'>script> 
    20. 
    
    
    
    
  20. <script type="text/javascript"> 
    21. 
    
    
    
    
  21. (function($){ 
    22. 
    
    
    
    
  22.     var self = null; 
    23. 
    
    
    
    
  23.     $.fn.TreeNode = function(cfg,callback){ 
    24. 
    
    
    
    
  24.         self = $(this); 
    25. 
    
    
    
    
  25.         //默认0为根节点 
    26. 
    
    
    
    
  26.         self.attr('nodeId',0); 
    27. 
    
    
    
    
  27.          
    28. 
    
    
    
    
  28.         var default_cfg = { 
    29. 
    
    
    
    
  29.                 data:null 
    30. 
    
    
    
    
  30.         };  
    31. 
    
    
    
    
  31.          
    32. 
    
    
    
    
  32.         var _config = $.extend({},default_cfg,cfg); 
    33. 
    
    
    
    
  33.          
    34. 
    
    
    
    
  34.         var data = _config.data; 
    35. 
    
    
    
    
  35.          
    36. 
    
    
    
    
  36.         var fn = { 
    37. 
    
    
    
    
  37.                 createNode: function(parent){ 
    38. 
    
    
    
    
  38.                     var son = parent.next(); 
    39. 
    
    
    
    
  39.                     var nodeId = parent.attr('nodeId'); 
    40. 
    
    
    
    
  40.                      
    41. 
    
    
    
    
  41. //                  如果是第一次打开  则创建   否则使用已有的节点 
    42. 
    
    
    
    
  42.                     if(nodeId == 0 || son[0]&&son[0].nodeName != 'UL'){ 
    43. 
    
    
    
    
  43.                         var dom = ""; 
    44. 
    
    
    
    
  44.                         //判断是否为叶子节点 
    45. 
    
    
    
    
  45.                         if(parent && $(parent).attr('nodeId') != undefined && data.length > 0){ 
    46. 
    
    
    
    
  46.                             dom = "
      "; 
    
    
    
    
    •                             if(data && typeof data == "object") 
      • 
    
    
    
    
    •                             $.each(data,function(i){ 
      • 
    
    
    
    
    •                                 var obj = data[i]; 
      • 
    
    
    
    
    •                                 if($(parent).attr('nodeId') == obj.parentId){ 
      • 
    
    
    
    
    •                                     dom += "<li nodeId="+obj.id+">"+obj.text+"<input type='checkbox'/>li>"; 
      • 
    
    
    
    
    •                                 } 
      • 
    
    
    
    
    •                             }); 
      • 
    
    
    
    
    •                             dom += "ul>"; 
      • 
    
    
    
    
    •                             $(parent).attr('nodeId') == 0 ? $(dom).appendTo(parent) : $(dom).insertAfter(parent).hide().slideDown(200,function(){ 
      • 
    
    
    
    
    •                                 var isChecked = $(this).prev('li').find('input:checkbox').attr('checked'); 
      • 
    
    
    
    
    •                                 $('li',this).each(function(){ 
      • 
    
    
    
    
    •                                     $('input:checkbox:first',this).attr('checked',isChecked); 
      • 
    
    
    
    
    •                                 }); 
      • 
    
    
    
    
    •                             }); 
      • 
    
    
    
    
    •                         } 
      • 
    
    
    
    
    •                     } 
      • 
    
    
    
    
    •                     return $(dom); 
      • 
    
    
    
    
    •                 }, 
      • 
    
    
    
    
    •                 swicthNode:function (target){ 
      • 
    
    
    
    
    •                     if(target.tagName == 'LI'){ 
      • 
    
    
    
    
    •                             var parent = $(target); 
      • 
    
    
    
    
    •                             var son = parent.next(); 
      • 
    
    
    
    
    •                             var newNode; 
      • 
    
    
    
    
    •                             parent.toggleClass('cur'); 
      • 
    
    
    
    
    •                                 //如果是第一次打开  则创建   否则使用已有的节点 
      • 
    
    
    
    
    •                                 if(son[0]&&son[0].nodeName == 'LI'){ 
      • 
    
    
    
    
    •                                     newNode = fn.createNode(parent); 
      • 
    
    
    
    
    •                                 }else{ 
      • 
    
    
    
    
    •                                     newNode = parent.next('ul');     
      • 
    
    
    
    
    •                                     newNode.slideToggle(); 
      • 
    
    
    
    
    •                                 } 
      • 
    
    
    
    
    •                     } 
      • 
    
    
    
    
    •                 }, 
      • 
    
    
    
    
    •                 linkCheck:function (){ 
      • 
    
    
    
    
    •                     $('input:checkbox',self).live('change',function(){ 
      • 
    
    
    
    
    •                         var parent_box = $(this); 
      • 
    
    
    
    
    •                         fn.createNode(parent_box.parent()); 
      • 
    
    
    
    
    •                         var attr_checked = parent_box.attr('checked') == undefined ? false:true; 
      • 
    
    
    
    
    •                         var checkbox = parent_box.parent().next('ul').find('input:checkbox').attr('checked',attr_checked); 
      • 
    
    
    
    
    •                     }); 
      • 
    
    
    
    
    •                 }        
      • 
    
    
    
    
    •         }; 
      • 
    
    
    
    
    •          
      • 
    
    
    
    
    •         self.getData = function(){ 
      • 
    
    
    
    
    •             var data = new Array(); 
      • 
    
    
    
    
    •             $('input:checkbox:checked',self).each(function(){ 
      • 
    
    
    
    
    •                 var li = $(this).parent(); 
      • 
    
    
    
    
    •                 data.push(li.attr('nodeId')); 
      • 
    
    
    
    
    •             }); 
      • 
    
    
    
    
    •             return data; 
      • 
    
    
    
    
    •         } 
      • 
    
    
    
    
    •  
      • 
    
    
    
    
    •         //创建根节点 
      • 
    
    
    
    
    •         fn.createNode(self); 
      • 
    
    
    
    
    •         $('ul li',self).live('click',function(e){ 
      • 
    
    
    
    
    •             fn.swicthNode(e.target); 
      • 
    
    
    
    
    •         }); 
      • 
    
    
    
    
    •          
      • 
    
    
    
    
    •         //checkbox联动 子节点随着父节点变化 
      • 
    
    
    
    
    •         fn.linkCheck(); 
      • 
    
    
    
    
    •          
      • 
    
    
    
    
    •         return self; 
      • 
    
    
    
    
    •     }; 
      • 
    
    
    
    
    • })(jQuery); 
      • 
    
    
    
    
    • script> 
      • 
    
    
    
    
    • head> 
      • 
    
    
    
    
    • <body> 
      • 
    
    
    
    
    • <div style='width:900px;height:600px;margin: 0px auto;border: 1px solid;'> 
      • 
    
    
    
    
    •  
      • 
    
    
    
    
    •     <div id='demo' class='ui-treenode'> 
      • 
    
    
    
    
    •          
      • 
    
    
    
    
    •     div> 
      • 
    
    
    
    
    • div> 
      • 
    
    
    
    
    • <input type='button' value='get checked data!' id='btn-get'> 
      • 
    
    
    
    
    • <script type="text/javascript"> 
      • 
    
    
    
    
    • $(function(){ 
      • 
    
    
    
    
    •     /* 节点关系数据   可从后台传入 */ 
      • 
    
    
    
    
    •     var data = [ 
      • 
    
    
    
    
    •                 {id:1,text:'name1',parentId:0}, 
      • 
    
    
    
    
    •                 {id:2,text:'name2',parentId:0}, 
      • 
    
    
    
    
    •                 {id:3,text:'name3',parentId:0}, 
      • 
    
    
    
    
    •                 {id:4,text:'name4',parentId:0}, 
      • 
    
    
    
    
    •                 {id:5,text:'name5',parentId:0},  
      • 
    
    
    
    
    •                 {id:6,text:'name6',parentId:1}, 
      • 
    
    
    
    
    •                 {id:7,text:'name7',parentId:1}, 
      • 
    
    
    
    
    •                 {id:8,text:'name8',parentId:1}, 
      • 
    
    
    
    
    •                 {id:9,text:'name9',parentId:2}, 
      • 
    
    
    
    
    •                 {id:10,text:'name10',parentId:2}, 
      • 
    
    
    
    
    •                 {id:11,text:'name11',parentId:2}, 
      • 
    
    
    
    
    •                 {id:12,text:'name12',parentId:2}, 
      • 
    
    
    
    
    •                 {id:13,text:'name13',parentId:2}, 
      • 
    
    
    
    
    •                 {id:14,text:'name14',parentId:10}, 
      • 
    
    
    
    
    •                 {id:15,text:'name15',parentId:10}    
      • 
    
    
    
    
    •     ]; 
      • 
    
    
    
    
    •     var treeNode = $('#demo').TreeNode({data:data}); 
      • 
    
    
    
    
    •     $('#btn-get').click(function(){ 
      • 
    
    
    
    
    •         var data = treeNode.getData(); 
      • 
    
    
    
    
    •         alert('你选中了：'+data); 
      • 
    
    
    
    
    •     }); 
      • 
    
    
    
    
    • }); 
      • 
    
    
    
    
    • script> 
      • 
    
    
    
    
    • body> 
      • 
    
    
    
    
    • html> 
      •