这几天做公司的项目，有个模块功能需求是要做成表格树，自己在网上找了好多例子，但是都没有符合项目需求的，最后看到了ligerui框架里的表格功能下面的树表格，在此基础上改了一下，大家有需要的可以借鉴一下，或者有更好的办法可以留言。
LigerUI 官网地址： http://www.ligerui.com/
表格树 地址：http://www.ligerui.com/demo.html ，截图如下：
下图为根据自己项目的需求，最后修改完的截图：
引入的文件：
<!-- ligerUI -->
<link href="static/plugins/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
<script src="jquery/jquery-1.9.0.min.js" type="text/javascript"></script>
<script src="static/plugins/ligerUI/js/core/base.js" type="text/javascript"></script>
<script src="static/plugins/ligerUI/js/plugins/ligerGrid.js" type="text/javascript"></script>
<script src="static/plugins/ligerUI/js/plugins/ligerResizable.js" type="text/javascript"></script>
下面为所做功能的代码：
html：
<div id="maingrid"></div>css：
#maingrid{
width: 100% !important;
margin-bottom:10px;
}
/* 让文字垂直居中 */
.l-grid-row-cell-inner{
line-height: 28px;
}
/* 加号按钮 */
.l-grid-tree-link-close{
margin-top: 3px;
}
/* 减号按钮 */
.l-grid-tree-link-open{
margin-top: 3px;
}js：
var manager;
var TreeDeptData = {
Rows: [
{
name: "A组",
children: [
{
name: "组一",
ssss: '',
pzz: '',
zws: '',
bzc: '',
byxs: '',
Maximum: '',
Minimum: '' ,
children: [
{
name: "组一第一队",
ssss: '111',
pzz: '222',
zws: '333',
bzc: '444',
byxs: '555',
Maximum: '666',
Minimum: '777'
},
{
name: "组一第二队",
ssss: '111',
pzz: '222',
zws: '333',
bzc: '444',
byxs: '555',
Maximum: '666',
Minimum: '777'
},
{
name: "组一第三队",
ssss: '111',
pzz: '222',
zws: '333',
bzc: '444',
byxs: '555',
Maximum: '666',
Minimum: '777'
},
{
name: "组一第四队",
ssss: '111',
pzz: '222',
zws: '333',
bzc: '444',
byxs: '555',
Maximum: '666',
Minimum: '777'
}
]
},
{
name: "组二",
ssss: '',
pzz: '',
zws: '',
bzc: '',
byxs: '',
Maximum: '',
Minimum: '' ,
children: [
{
name: "组一第一队",
ssss: '111',
pzz: '222',
zws: '333',
bzc: '444',
byxs: '555',
Maximum: '666',
Minimum: '777'
},
{
name: "组一第二队",
ssss: '111',
pzz: '222',
zws: '333',
bzc: '444',
byxs: '555',
Maximum: '666',
Minimum: '777'
},
{
name: "组一第三队",
ssss: '111',
pzz: '222',
zws: '333',
bzc: '444',
byxs: '555',
Maximum: '666',
Minimum: '777'
},
{
name: "组一第四队",
ssss: '111',
pzz: '222',
zws: '333',
bzc: '444',
byxs: '555',
Maximum: '666',
Minimum: '777'
}
]
},
{
name: "组三",
ssss: '',
pzz: '',
zws: '',
bzc: '',
byxs: '',
Maximum: '',
Minimum: '' ,
children: [
{
name: "组一第一队",
ssss: '111',
pzz: '222',
zws: '333',
bzc: '444',
byxs: '555',
Maximum: '666',
Minimum: '777'
},
{
name: "组一第二队",
ssss: '111',
pzz: '222',
zws: '333',
bzc: '444',
byxs: '555',
Maximum: '666',
Minimum: '777'
},
{
name: "组一第三队",
ssss: '111',
pzz: '222',
zws: '333',
bzc: '444',
byxs: '555',
Maximum: '666',
Minimum: '777'
},
{
name: "组一第四队",
ssss: '111',
pzz: '222',
zws: '333',
bzc: '444',
byxs: '555',
Maximum: '666',
Minimum: '777'
}
]
},
{
name: "组四",
ssss: '',
pzz: '',
zws: '',
bzc: '',
byxs: '',
Maximum: '',
Minimum: '' ,
children: [
{
name: "组一第一队",
ssss: '111',
pzz: '222',
zws: '333',
bzc: '444',
byxs: '555',
Maximum: '666',
Minimum: '777'
},
{
name: "组一第二队",
ssss: '111',
pzz: '222',
zws: '333',
bzc: '444',
byxs: '555',
Maximum: '666',
Minimum: '777'
},
{
name: "组一第三队",
ssss: '111',
pzz: '222',
zws: '333',
bzc: '444',
byxs: '555',
Maximum: '666',
Minimum: '777'
},
{
name: "组一第四队",
ssss: '111',
pzz: '222',
zws: '333',
bzc: '444',
byxs: '555',
Maximum: '666',
Minimum: '777'
}
]
},
{
name: "组五",
ssss: '',
pzz: '',
zws: '',
bzc: '',
byxs: '',
Maximum: '',
Minimum: '' ,
children: [
{
name: "组一第一队",
ssss: '111',
pzz: '222',
zws: '333',
bzc: '444',
byxs: '555',
Maximum: '666',
Minimum: '777'
},
{
name: "组一第二队",
ssss: '111',
pzz: '222',
zws: '333',
bzc: '444',
byxs: '555',
Maximum: '666',
Minimum: '777'
},
{
name: "组一第三队",
ssss: '111',
pzz: '222',
zws: '333',
bzc: '444',
byxs: '555',
Maximum: '666',
Minimum: '777'
},
{
name: "组一第四队",
ssss: '111',
pzz: '222',
zws: '333',
bzc: '444',
byxs: '555',
Maximum: '666',
Minimum: '777'
}
]
}
]
},
{
name: "B组",
children: [
{
name: "组一",
ssss: '',
pzz: '',
zws: '',
bzc: '',
byxs: '',
Maximum: '',
Minimum: '' ,
children: [
{
name: "组一第一队",
ssss: '111',
pzz: '222',
zws: '333',
bzc: '444',
byxs: '555',
Maximum: '666',
Minimum: '777'
},
{
name: "组一第二队",
ssss: '111',
pzz: '222',
zws: '333',
bzc: '444',
byxs: '555',
Maximum: '666',
Minimum: '777'
},
{
name: "组一第三队",
ssss: '111',
pzz: '222',
zws: '333',
bzc: '444',
byxs: '555',
Maximum: '666',
Minimum: '777'
},
{
name: "组一第四队",
ssss: '111',
pzz: '222',
zws: '333',
bzc: '444',
byxs: '555',
Maximum: '666',
Minimum: '777'
}
]
},
{
name: "组二",
ssss: '',
pzz: '',
zws: '',
bzc: '',
byxs: '',
Maximum: '',
Minimum: '' ,
children: [
{
name: "组一第一队",
ssss: '111',
pzz: '222',
zws: '333',
bzc: '444',
byxs: '555',
Maximum: '666',
Minimum: '777'
},
{
name: "组一第二队",
ssss: '111',
pzz: '222',
zws: '333',
bzc: '444',
byxs: '555',
Maximum: '666',
Minimum: '777'
},
{
name: "组一第三队",
ssss: '111',
pzz: '222',
zws: '333',
bzc: '444',
byxs: '555',
Maximum: '666',
Minimum: '777'
},
{
name: "组一第四队",
ssss: '111',
pzz: '222',
zws: '333',
bzc: '444',
byxs: '555',
Maximum: '666',
Minimum: '777'
}
]
},
{
name: "组三",
ssss: '',
pzz: '',
zws: '',
bzc: '',
byxs: '',
Maximum: '',
Minimum: '' ,
children: [
{
name: "组一第一队",
ssss: '111',
pzz: '222',
zws: '333',
bzc: '444',
byxs: '555',
Maximum: '666',
Minimum: '777'
},
{
name: "组一第二队",
ssss: '111',
pzz: '222',
zws: '333',
bzc: '444',
byxs: '555',
Maximum: '666',
Minimum: '777'
},
{
name: "组一第三队",
ssss: '111',
pzz: '222',
zws: '333',
bzc: '444',
byxs: '555',
Maximum: '666',
Minimum: '777'
},
{
name: "组一第四队",
ssss: '111',
pzz: '222',
zws: '333',
bzc: '444',
byxs: '555',
Maximum: '666',
Minimum: '777'
}
]
},
{
name: "组四",
ssss: '',
pzz: '',
zws: '',
bzc: '',
byxs: '',
Maximum: '',
Minimum: '' ,
children: [
{
name: "组一第一队",
ssss: '111',
pzz: '222',
zws: '333',
bzc: '444',
byxs: '555',
Maximum: '666',
Minimum: '777'
},
{
name: "组一第二队",
ssss: '111',
pzz: '222',
zws: '333',
bzc: '444',
byxs: '555',
Maximum: '666',
Minimum: '777'
},
{
name: "组一第三队",
ssss: '111',
pzz: '222',
zws: '333',
bzc: '444',
byxs: '555',
Maximum: '666',
Minimum: '777'
},
{
name: "组一第四队",
ssss: '111',
pzz: '222',
zws: '333',
bzc: '444',
byxs: '555',
Maximum: '666',
Minimum: '777'
}
]
},
{
name: "组五",
ssss: '',
pzz: '',
zws: '',
bzc: '',
byxs: '',
Maximum: '',
Minimum: '' ,
children: [
{
name: "组一第一队",
ssss: '111',
pzz: '222',
zws: '333',
bzc: '444',
byxs: '555',
Maximum: '666',
Minimum: '777'
},
{
name: "组一第二队",
ssss: '111',
pzz: '222',
zws: '333',
bzc: '444',
byxs: '555',
Maximum: '666',
Minimum: '777'
},
{
name: "组一第三队",
ssss: '111',
pzz: '222',
zws: '333',
bzc: '444',
byxs: '555',
Maximum: '666',
Minimum: '777'
},
{
name: "组一第四队",
ssss: '111',
pzz: '222',
zws: '333',
bzc: '444',
byxs: '555',
Maximum: '666',
Minimum: '777'
}
]
}
]
},
{
name: "C组",
children: [
{
name: "组一",
ssss: '',
pzz: '',
zws: '',
bzc: '',
byxs: '',
Maximum: '',
Minimum: '' ,
children: [
{
name: "组一第一队",
ssss: '111',
pzz: '222',
zws: '333',
bzc: '444',
byxs: '555',
Maximum: '666',
Minimum: '777'
},
{
name: "组一第二队",
ssss: '111',
pzz: '222',
zws: '333',
bzc: '444',
byxs: '555',
Maximum: '666',
Minimum: '777'
},
{
name: "组一第三队",
ssss: '111',
pzz: '222',
zws: '333',
bzc: '444',
byxs: '555',
Maximum: '666',
Minimum: '777'
},
{
name: "组一第四队",
ssss: '111',
pzz: '222',
zws: '333',
bzc: '444',
byxs: '555',
Maximum: '666',
Minimum: '777'
}
]
},
{
name: "组二",
ssss: '',
pzz: '',
zws: '',
bzc: '',
byxs: '',
Maximum: '',
Minimum: '' ,
children: [
{
name: "组一第一队",
ssss: '111',
pzz: '222',
zws: '333',
bzc: '444',
byxs: '555',
Maximum: '666',
Minimum: '777'
},
{
name: "组一第二队",
ssss: '111',
pzz: '222',
zws: '333',
bzc: '444',
byxs: '555',
Maximum: '666',
Minimum: '777'
},
{
name: "组一第三队",
ssss: '111',
pzz: '222',
zws: '333',
bzc: '444',
byxs: '555',
Maximum: '666',
Minimum: '777'
},
{
name: "组一第四队",
ssss: '111',
pzz: '222',
zws: '333',
bzc: '444',
byxs: '555',
Maximum: '666',
Minimum: '777'
}
]
},
{
name: "组三",
ssss: '',
pzz: '',
zws: '',
bzc: '',
byxs: '',
Maximum: '',
Minimum: '' ,
children: [
{
name: "组一第一队",
ssss: '111',
pzz: '222',
zws: '333',
bzc: '444',
byxs: '555',
Maximum: '666',
Minimum: '777'
},
{
name: "组一第二队",
ssss: '111',
pzz: '222',
zws: '333',
bzc: '444',
byxs: '555',
Maximum: '666',
Minimum: '777'
},
{
name: "组一第三队",
ssss: '111',
pzz: '222',
zws: '333',
bzc: '444',
byxs: '555',
Maximum: '666',
Minimum: '777'
},
{
name: "组一第四队",
ssss: '111',
pzz: '222',
zws: '333',
bzc: '444',
byxs: '555',
Maximum: '666',
Minimum: '777'
}
]
},
{
name: "组四",
ssss: '',
pzz: '',
zws: '',
bzc: '',
byxs: '',
Maximum: '',
Minimum: '' ,
children: [
{
name: "组一第一队",
ssss: '111',
pzz: '222',
zws: '333',
bzc: '444',
byxs: '555',
Maximum: '666',
Minimum: '777'
},
{
name: "组一第二队",
ssss: '111',
pzz: '222',
zws: '333',
bzc: '444',
byxs: '555',
Maximum: '666',
Minimum: '777'
},
{
name: "组一第三队",
ssss: '111',
pzz: '222',
zws: '333',
bzc: '444',
byxs: '555',
Maximum: '666',
Minimum: '777'
},
{
name: "组一第四队",
ssss: '111',
pzz: '222',
zws: '333',
bzc: '444',
byxs: '555',
Maximum: '666',
Minimum: '777'
}
]
},
{
name: "组五",
ssss: '',
pzz: '',
zws: '',
bzc: '',
byxs: '',
Maximum: '',
Minimum: '' ,
children: [
{
name: "组一第一队",
ssss: '111',
pzz: '222',
zws: '333',
bzc: '444',
byxs: '555',
Maximum: '666',
Minimum: '777'
},
{
name: "组一第二队",
ssss: '111',
pzz: '222',
zws: '333',
bzc: '444',
byxs: '555',
Maximum: '666',
Minimum: '777'
},
{
name: "组一第三队",
ssss: '111',
pzz: '222',
zws: '333',
bzc: '444',
byxs: '555',
Maximum: '666',
Minimum: '777'
},
{
name: "组一第四队",
ssss: '111',
pzz: '222',
zws: '333',
bzc: '444',
byxs: '555',
Maximum: '666',
Minimum: '777'
}
]
}
]
}
]
};
$(function() {
manager = $("#maingrid").ligerGrid({
columns: [
{
display: '组',
name: 'name',
id: 'zu',
width: 500,
minWidth :500, //表格列最小允许宽度(调整大小时将不允许小于这个值)
align: 'left'
},
{
display: '一',
name: 'ssss',
width: 100,
type: 'int', //排序类型,包括string、int、float、date
align: 'left'
},
{
display: '二',
name: 'pzz',
width: 100,
type: 'float', //排序类型,包括string、int、float、date
align: 'left'
},
{
display: '三',
name: 'zws',
width: 100,
type: 'float', //排序类型,包括string、int、float、date
align: 'left'
},
{
display: '四',
name: 'bzc',
width: 100,
type: 'float', //排序类型,包括string、int、float、date
align: 'left'
},
{
display: '五',
name: 'byxs',
width: 100,
minWidth :100,
type: 'float', //排序类型,包括string、int、float、date
align: 'left'
},
{
display: '六',
name: 'Maximum',
width: 100,
type: 'float', //排序类型,包括string、int、float、date
align: 'left'
},
{
display: '七',
name: 'Minimum',
width: 100,
type: 'float', //排序类型,包括string、int、float、date
align: 'left'
}
],
width: '100%',
height: '95%',
title: '标题',
usePager:false, //是否分页
enabledSort:false, //是否允许排序
data: TreeDeptData,
alternatingRow: false, //是否附加奇偶行效果行,
allowHideColumn:false, //是否显示'切换列层'按钮
tree: { //树模式
columnId: 'zu', //以树形显示的字段id ,或者name值也可以
//columnName:'name', //要显示为树形的字段name
}
});
manager.collapseAll(); //初始化把所有树收缩
//为第一级所有的行修改样式
$('.l-grid-body-table > tbody > tr:visible').each(function(i,n){
$(n).children('td').css('border-right','0'); //让所有的td右边框为0
$(n).children('td:last-child').css('border-right','1px solid #A3C0E8'); //给最后一个td加上border
$(n).css("background","#EAF3FF"); //设置第一级整行的样式
});
//为第二级所有的行修改样式
$('.l-grid-body-table > tbody > tr:hidden').each(function(i,e){
var html = $(e).children('td').next().find('div').html();
if(html == ''){
$(e).children('td').css('border-right','0'); //让所有的td右边框为0
$(e).children('td:last-child').css('border-right','1px solid #A3C0E8'); //给最后一个td加上border
$(e).css("background","#EAF3FF"); //设置第二级整行的样式
}
});
});
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
