bootstrap table 父子表實現【無限級】菜單管理功能
實現效果
前端代碼
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%@include file="/WEB-INF/include/tags.jsp" %>
<!DOCTYPE HTML>
<html>
<head>
<!-- 引入jquery插件 -->
<script src="/jquery/jquery-2.1.1.min.js" type="text/javascript"></script>
<!-- 引入bootstrap插件 -->
<script src="/bootstrap/3.3.4/js/bootstrap.min.js" type="text/javascript"></script>
<link href="/bootstrap/3.3.4/css_default/bootstrap.min.css" type="text/css" rel="stylesheet"/>
<!-- 引入bootstrap-table 語言包 -->
<script src="/bootstrap/table/bootstrap-table-zh-CN.min.js"></script>
<!-- 引入bootstrap-table插件 -->
<script src="/bootstrap/table/bootstrap-table.min.js"></script>
<link href="/bootstrap/table/bootstrap-table.min.css" rel="stylesheet">
<style>
.child-table thead {
//隱藏子表的表頭
/*display: none !important;*/
}
</style>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content">
<p class="tit">菜單列表</p>
<div class="ibox">
<div class="ibox-content">
<table id="mytab" class="table table-hover"></table>
</div>
</div>
</div>
<script type="text/javascript">
//菜單的根id
var mRootId = '0';
$(function () {
//初始化表格數據 傳遞menu的rootid
createTable(mRootId);
})
//詳情遞歸使用初始化表格方法 pid 菜單的父級id tableObj 當前生成的table所綁定的對象
function createTable(pid, tableObj) {
var isSearch = false;
if (!tableObj) {
tableObj = "#mytab";
isSearch = true;
}
//根據窗口調整表格高度
$(window).resize(function () {
$(tableObj).bootstrapTable('resetView', {
height: tableHeight()
})
})
$(tableObj).bootstrapTable({
url: "${ctx}/",//數據源 后台Controller的數據
dataField: "dataList",//服務端返回數據鍵值 就是說記錄放的鍵值是rows，分頁時使用總記錄數的鍵值為total
// height: tableHeight(),//高度調整
search: isSearch,//是否搜索
pagination: false,//是否分頁
contentType: "application/x-www-form-urlencoded",//請求數據內容格式 默認是 application/json 自己根據格式自行服務端處理
dataType: "json",//返回數據類型
method: "post",//請求方式
searchAlign: "left",//查詢框對齊方式
queryParamsType: "limit",//查詢參數組織方式
queryParams: function getParams(params) {
//params obj 其他參數 除了自身傳遞的參數外，可以由開發者自身設置傳遞
params.other = "otherInfo";
params.author = 'upuptop';
params.pid = pid
return params;
},
searchOnEnterKey: false,//回車搜索
showRefresh: isSearch,//刷新按鈕
showColumns: false,//列選擇按鈕
buttonsAlign: "right",//按鈕對齊方式
toolbarAlign: "right",//工具欄對齊方式
columns: [
{
title: "菜單名稱",//標題
field: "name",//鍵名 與上方dataList里面存放的鍵值相對應 dataList['name':"菜單名稱"]
sortable: true,//是否可排序
align: "center",//水平
order: "desc"//默認排序方式
},
{
title: "鏈接",
align: "center",//水平
field: "href",
sortable: true,
},
// {
// title: "權限",
// field: "permission",
// sortable: true,
// align: "center",//水平
// width: "20%",
// },
{
title: "排序值",
field: "sort",
align: "center",//水平
sortable: true,
},
{
title: "是否顯示",
field: "isShow",
align: "center",//水平
sortable: true,
},
{
title: "操作",
field: "operation",
align: "center",//水平
sortable: true,
},
],
locale: "zh-CN", //中文支持
detailView: true, //是否顯示詳情折疊
detailFormatter: function (index, row, element) {
// 詳情折疊 內容
// return '<p>這里顯示詳情</p>'
},
responseHandler: function (res) {
//請求返回數據成功會調用該方法/填充表格數據之前會調用這個方法
$.each(res.menuList, function (index, item) {
if (item.isShow == 1) {
item.isShow = "顯示";
} else {
item.isShow = "隱藏";
}
var tempHtml = '<a title="修改" "openDialog2(\'修改菜單\',\'${ctx}//form?id=' + item.id + '\',\'800px\',\'550px\',\'' + item.pid + '\')" style="color: #4a93ff">修改</a>';
tempHtml += ' | ';
tempHtml += '<a title="添加下一級菜單" "openDialog2(\'添加菜單\',\'${ctx}//form?pid=' + item.id + '\',\'800px\',\'550px\',\'' + item.pid + '\')" style="color: #4a93ff">添加下一級菜單</a>';
tempHtml += ' | ';
tempHtml += '<a title="刪除" style="color: red" "delConfirmx(\'' + item.id + '\',\'' + item.pid + '\',\'' + item.name + '\')">刪除</a>';
item.operation = tempHtml;
})
return res;
},
onClickRow: function (row, $element) {
//$element是當前tr的jquery對象
//單擊row事件
},
onExpandRow: function (index, row, $detail) {
//點擊左側的加號 展開查看詳情的時候調用 在這里做了遞歸調用自身再次構建一張表 這里的child-table-row.id是為了修改或者刪除，刷新子表使用
createTable(row.id, $detail.html('<table class="child-table child-table-' + row.id + '" style=""></table>').find('table'));
},
onLoadSuccess: function (data) {
},
detailFilter: function (index, row) {
//是否展開詳情的過濾方法 可以通過邏輯進行設置是否可以展開查看詳情
if (!row.childCount) {
return false;
}
return true;
}
});
}
// 刪除確認框
function delConfirmx(id, pid, name) {
top.layer.confirm('是否刪除菜單【' + name + '】？', {
btn: ['確定', '取消'] //按鈕 .bootstrapTable('refresh')
}, function (index) {
var tableObj;
if (pid != mRootId) {
tableObj = $(".child-table-" + pid);
} else {
tableObj = $("#mytab");
}
$.get("${ctx}/deleteData?id=" + id, function (res) {
top.layer.msg("刪除成功");
tableObj.bootstrapTable("refresh");
})
}, function (index) {
top.layer.close(index);
});
}
//添加修改對話框
function openDialog2(title, url, width, height, pid) {
console.log(pid);
console.log($(".child-table-" + pid));
if (navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i)) {//如果是移動端，就使用自適應大小彈窗
width = 'auto';
height = 'auto';
} else {//如果是PC端，根據用戶設置的width和height顯示。
}
top.layer.open({
type: 2,
area: [width, height],
title: title,
maxmin: true, //開啟最大化最小化按鈕
content: url,
// btn: ['確定', '關閉'],
// yes: function (index, layero) {
// },
end: function (index) {
if (pid != mRootId) {
$(".child-table-" + pid).bootstrapTable('refresh');
} else {
$("#mytab").bootstrapTable('refresh');
// window.location.reload()
}
}
});
}
//設置表格的高度
function tableHeight() {
// return $(window).height() - 50;
var height = $(window).height() - 120;
//當表格內容的高度小於外面容器的高度，容器的高度設置為內容的高度，相反時容器設置為窗口的高度-160
if ($(".fixed-table-body table").height() < $(".fixed-table-container").height()) {
$(".fixed-table-container").css({"padding-bottom": "0px", height: $(".fixed-table-body table").height() + 20});
// 是當內容少時，使用搜索功能高度保持不變
height = "auto";
} else {
height = $(window).height() - 160;
}
return height;
}
</script>
</body>
</html>
上方代碼需要修改的地方：
<head>標簽中所有的引用需要修改。 推薦cdn:https://www.bootcdn.cn/- 數據源 需要修改為自身服務端的請求地址
服務端代碼：
@RequestMapping("/")
@ResponseBody
public Map<String, Object> menuData(String pid, String search, String order, Integer offset, Integer limit) {
logger.info(" menuData() pid " + pid);
logger.info(" menuData() search " + search);
logger.info(" menuData() order " + order);
logger.info(" menuData() offset " + offset);
logger.info(" menuData() limit " + limit);
Map<String, Object> resultMap = new HashMap<>();
List<Menu> menuList = menuService.selectAllMenuByPid(pid, null);
resultMap.put("menuList", menuList);
return resultMap;
}
參考地址：
官方示例程序：https://examples.bootstrap-table.com/#welcomes/sub-table.html
博客API翻譯：https://blog.csdn.net/S_clifftop/article/details/77937356
博客API翻譯：https://blog.csdn.net/rickiyeat/article/details/56483577