DataTables TreeGrid 插件 可以快速实现树形表格
dataTables.treeGrid
插件介绍
针对DataTables写的树形表格插件(什么是DataTables? 可以点击访问官网了解)
在原DataTables基础上可以快速实现树形表格的渲染:
1、支持自定义展开/收缩 图标
2、支持自定义缩进距离
3、N层子集展开父级收缩 子集统一收缩;
插件地址:https://github.com/lhmyy521125/dataTables.treeGrid
初始化表格只需要添加DataTables treeGrid 属性
'treeGrid': {
'left': 15,
'expandIcon': '<span><i class="fa fa-plus-square"></i></span>',
'collapseIcon': '<span><i class="fa fa-minus-square"></i></span>'
},
展现效果
使用方法
<script src='您的资源目录/jquery.js'></script>
<script src='您的资源目录/jquery.dataTables.min.js'></script>
<script src='您的资源目录/dataTables.treeGrid.js'></script>
DataTable 渲染JSON数据格式
// JSON对象数据应包含一个属性“children”作为子集
{
"data":
[
{
"name": "lhmyy521125",
...
"children": [
{
"name": "hello",
...
}
]
}
]
}
HTML数据格式(以DEMO截图代码为例)
<!--HTML table-->
<table class="table table-striped table-bordered table-hover" id="editable">
<thead>
<tr>
<th width="4%"></th>
<th width="15%">名称</th>
<th>链接</th>
<th width="8%">类型</th>
<th>权限</th>
<th width="8%">排序</th>
<th width="8%">状态</th>
<th width="20%">操作</th>
</tr>
</thead>
<tbody></tbody>
</table>
<script type="text/javascript">
var dataTable;
$(function () {
dataTable = $("#editable").DataTable({
"dom": "l",
"ordering": false, //禁用排序
"lengthMenu": [500],
"ajax": {
"url": ctx + "system/menu/dataJson",
"async": false
},
'treeGrid': {
'left': 15,
'expandIcon': '<span><i class="fa fa-plus-square"></i></span>',
'collapseIcon': '<span><i class="fa fa-minus-square"></i></span>'
},
"columns": [
{
className: 'treegrid-control',
data: function (item) {
if (item.children.length>0) {
return '<span><i class="fa fa-plus-square"></i></span>';
}
return '';
}
},
{
data:function(item){
return '<i class="'+item.menuIcon+'"></i> '+item.menuName;
}
},
{"data": "menuUrl"},
{
data:function(item){
if(item.menuType==1){
return '<small class="label label-warning">目录</small>';
}else if(item.menuType==2){
return '<small class="label label-primary">菜单</small>';
}else{
return '<small class="label label-info">功能</small>';
}
}
},
{"data": "permissionCode"},
{
data:function(item){
var html = '<input name="menuSort" type="text" value="'+item.menuSort+'" class="form-control sorts" style="width:70px;margin:0;padding:0;text-align:center;">';
html = html + '<input name="menuSortId" type="hidden" value="'+item.menuId+'">';
return html;
}
},
{
data:function(item){
if(item.menuStatus==true){
return "<button type='button' class='btn btn-primary btn-xs' onclick=\"updateStatus('" + item.menuId + "','false');\"><i class='fa fa-refresh'></i> 启用</button>";
}else{
return "<button type='button' class='btn btn-danger btn-xs' onclick=\"updateStatus('" + item.menuId + "','true');\"><i class='fa fa-refresh'></i> 禁用</button>";
}
}
},
{
data:function(item){
var html = "<a onclick=\"edit('" + item.menuId + "');\" class='btn btn-success btn-xs' ><i class='fa fa-edit'></i> 编辑</a> ";
html = html + "<a onclick=\"add('" + item.menuId + "');\" class='btn btn-primary btn-xs' ><i class='fa fa-plus'></i> 添加下级菜单</a> ";
html = html + "<a onclick=\"deleteObject('" + item.menuId + "');\" class='btn btn-danger btn-xs' ><i class='fa fa-trash-o'></i> 删除</a> ";
return html;
}
}
]
});
});
//添加
function add(menuId){
var url = ctx + 'system/menu/add?menuId='+menuId;
openLayer("添加下级", url, "600px", "550px");
}
//编辑
function edit(menuId){
var url = ctx + "system/menu/edit/" + menuId;
openLayer("编辑", url, "600px", "550px");
}
//更新状态
function updateStatus(menuId,status){
var title = "是否启用";
if (status == "false") {
title = "是否禁用";
}
var url = ctx + "system/menu/updateStatus?menuId="+menuId+"&menuStatus="+status;
confirmLayer(title, url);
}
//删除菜单操作
//删除单条
function deleteObject(menuId) {
confirmLayer('要删除该数据么?', ctx + 'system/menu/delete/' + menuId);
}
//更新排序操作
function updateSort() {
var checkID = $("#editable tbody tr td input[name='menuSortId'],input[name='menuSort']").serialize();
if (checkID == "") {
top.layer.alert('请至少选择一条数据!', {icon: 0, title: '警告'});
return;
}
commonHandleAll(ctx + "system/menu/updateSort", checkID, "要更新该菜单排序吗?");
}
</script>
插件地址:https://github.com/lhmyy521125/dataTables.treeGrid
如果该插件帮助到您,别忘记了点个 star 对我的支持~