jquery树形菜单(无阶数限制)
通过数组的遍历，动态生成树形节点，对后端数据的要求降低，只需要一个数组即可。
- <!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>