溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章給大家分享的是有關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進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
