bootstrap-table 父子表 联动表 完整例子
bootstrap-table 父子表 联动表 完整例子
程裕强
发布于 2019-07-02 10:49:57
发布于 2019-07-02 10:49:57
版权声明：本文为博主原创文章，欢迎转载。 https://cloud.tencent.com/developer/article/1454275
前台页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 引入bootstrap样式 -->
<link href="/db/table/bootstrap.min.css" rel="stylesheet">
<!-- 引入bootstrap-table样式 -->
<link href="/db/table/bootstrap-table.min.css" rel="stylesheet">
<!-- jquery -->
<script src="/db/table/jquery.min.js"></script>
<script src="/db/table/bootstrap.min.js"></script>
<!-- bootstrap-table.min.js -->
<script src="/db/table/bootstrap-table.min.js"></script>
<!-- 引入中文语言包 -->
<script src="/db/table/bootstrap-table-zh-CN.min.js"></script>
<script type="application/javascript">
window.onload=initTable;
function initTable(){
$("#display_result").bootstrapTable({
url: '/db/log/list.do',
method: 'get',
striped: true, //是否显示行间隔色
detailView: true,//父子表
pagination: true,//显示分页
sidePagination: "client",
pageNumber:1,
pageSize: 20,
pageList: [10, 25],
columns: [{
field: 'upday',
title: '上传日期'
}, {
field: 'username',
title: '上传人'
}, {
field: 'dir',
title: '保存目录'
}, {
field: 'count',
title: '文件数'
}, {
field: 'tags',
title: '标签'
},],
//注册加载子表的事件。注意下这里的三个参数！
onExpandRow: function (index, row, $detail) {
initSubTable(index, row, $detail);
}
});
//初始化子表格(无线循环)
initSubTable = function (index, row, $detail) {
var parentid = row.id;
var cur_table = $detail.html('<table></table>').find('table');
$(cur_table).bootstrapTable({
url: '/db/log/files.do',
method: 'get',
queryParams: { id: parentid },
ajaxOptions: { id: parentid },
uniqueId: "id",
striped: true, //是否显示行间隔色
pagination: true,//显示分页
sidePagination: "client",
pageNumber:1,
pageSize: 15,
pageList: [10, 25],
columns: [{
field: 'fileType',
title: '文件类型'
}, {
field: 'fileName',
title: '文件名'
}, {
field: 'fileDir',
title: '保存目录'
}, {
field: 'category1',
title: '推荐标签'
}, {
field: 'category2',
title: '自定义标签'
},{
field: 'fileSize',
title: '文件大小'
},],
//无线循环取子表，直到子表里面没有记录
onExpandRow: function (index, row, $Subdetail) {
initSubTable(index, row, $Subdetail);
}
});
};
}
</script>
</head>
<body>
<h3>文档上传日志查询</h3>
<div id="showResult" style="width: 1000px;" >
<table id="display_result" class="table" style="text-align: center">
</table>
</div>
</body>
</html>后台代码
@RequestMapping(value = "/list.do" )
@ResponseBody
public List<UplogBean> list() throws Exception {
return uplogService.getUpLogList();
}
@RequestMapping(value="/files.do")
@ResponseBody
public List<FileBean> files(String id){
return fileService.getFileList(id);
}运行效果
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019年05月10日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录