继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

jquery树形菜单(无阶数限制)

这个名字没人起
关注TA
已关注
手记 271
粉丝 19
获赞 92

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

 

<!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>

 

 

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP