dataTables.treeGrid

插件介绍展现效果使用方法DataTable 渲染JSON数据格式HTML数据格式（以DEMO截图代码为例）

插件介绍

针对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 对我的支持~

以上就上有关DataTablesTreeGrid插件可以快速实现树形表格的相关介绍，要了解更多jQuery,datatables,treeGrid,树形表格内容请登录学步园。