通过数组的遍历，动态生成树形节点，对后端数据的要求降低，只需要一个数组即可。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>树形节点</title> <style type="text/css"> .ui-treenode ul li{ list-style:url("images/tree/tree2.JPG"); padding: 4px; background: url('images/tree/tree4.JPG') no-repeat 0px 5px; font-size: 12px; text-indent: 20px; } .ui-treenode ul li.cur{ background: url('images/tree/tree3.JPG') no-repeat 0px 5px; list-style:url("images/tree/tree1.JPG"); } </style> <script type="text/javascript" src='http://code.jquery.com/jquery-latest.min.js'></script> <script type="text/javascript"> (function($){ var self = null; $.fn.TreeNode = function(cfg,callback){ self = $(this); //默认0为根节点 self.attr('nodeId',0); var default_cfg = { data:null }; var _config = $.extend({},default_cfg,cfg); var data = _config.data; var fn = { createNode: function(parent){ var son = parent.next(); var nodeId = parent.attr('nodeId'); // 如果是第一次打开 则创建 否则使用已有的节点 if(nodeId == 0 || son[0]&&son[0].nodeName != 'UL'){ var dom = ""; //判断是否为叶子节点 if(parent && $(parent).attr('nodeId') != undefined && data.length > 0){ dom = "<ul>"; 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>
随时随地看视频
