简单知识点实例之四：BootstrapTable新型树表格
程序员文章站
2022-07-15 10:38:17
...
之前就一直苦恼，为什么没有树形表格，今天无意中看到，很开心，赶紧实验了一下。具体可以查看官网http://issues.wenzhixin.net.cn/bootstrap-table/#extensions/treegrid.html
一、创建url/bootstrap_treegrid.json
[
{
"id": 1,
"pid": 0,
"name": "系统管理",
"referred": "管理"
},
{
"id": 2,
"pid": 0,
"name": "字典管理",
"referred": "字典"
},
{
"id": 20,
"pid": 1,
"name": "新增系统",
"referred": "新增"
},
{
"id": 21,
"pid": 1,
"name": "编辑系统",
"referred": "编辑"
},
{
"id": 22,
"pid": 1,
"name": "删除系统",
"referred": "删除"
},
{
"id": 33,
"pid": 2,
"name": "系统环境",
"referred": "环境"
},
{
"id": 333,
"pid": 33,
"name": "新增环境",
"referred": "新增"
},
{
"id": 3333,
"pid": 33,
"name": "编辑环境",
"referred": "编辑"
},
{
"id": 233332,
"pid": 33,
"name": "删除环境",
"referred": "删除"
}
]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="css/bootstrap.3.3.7.css" rel="stylesheet">
<link href="css/bootstrap-theme.css" rel="stylesheet">
<link href="css/bootstrap-table.css" rel="stylesheet">
<link href="css/jquery.treegrid.min.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/bootstrap3.3.7.min.js"></script>
<script type="text/javascript" src="js/bootstrap-table.js"></script>
<script type="text/javascript" src="js/bootstrap-table-zh-CN.js"></script>
<script type="text/javascript" src="js/bootstrap-table-treegrid.js"></script>
<script type="text/javascript" src="js/jquery.treegrid.min.js"></script>
<script>
$(function () {
var $table = $("#table");
$table.bootstrapTable({
url:'url/bootstrap_treegrid.json',
striped:true,
sidePagenation:'server',
idField:'id',
columns:[
{
field: 'ck',
checkbox: true
},{
field:'name',
title:'名称'
},{
field:'referred',
title:'简称'
}
],
treeShowField: 'name',
parentIdField: 'pid',
onLoadSuccess: function(data) {
$table.treegrid({
initialState: 'collapsed',//收缩
treeColumn: 1,//指明第几列数据改为树形
expanderExpandedClass: 'glyphicon glyphicon-triangle-bottom',
expanderCollapsedClass: 'glyphicon glyphicon-triangle-right',
onChange: function() {
$table.bootstrapTable('resetWidth');
}
});
}
});
})
</script>
</head>
<body>
<table id="table"></table>
</body>
</html>四、下载地址：http://download.csdn.net/download/miss_ll/10204307
需要在webstrom此类软件中才能出现数据哦