本篇文章给大家分享的是有关DataTables中怎么利用TreeGrid插件实现树形表格，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。
<script src='您的资源目录/jquery.js'></script><script src='您的资源目录/jquery.dataTables.min.js'></script><script src='您的资源目录/dataTables.treeGrid.js'></script>
// JSON对象数据应包含一个属性“children”作为子集{"data": [ { "name": "lhmyy521125", ... "children": [ { "name": "hello", ... } ] } ]}
<!--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" >'; 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>
以上就是DataTables中怎么利用TreeGrid插件实现树形表格，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注亿速云行业资讯频道。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
