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

 

树形菜单

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