前言
最近要弄一下表格树，项目用的是 bootstrap 模板，所以很容易就搜到了 官网的例子 http://issues.wenzhixin.net.cn/bootstrap-table/#extensions/treegrid.html，但是复制到自己的项目中时，一直出不来层级的效果，在排除代码错误后，狠下心来把项目中用到 css 与 js 一个个与官网的 css 与 js 进行对比，最后发现是本地 引入的 bootstrap-table.js 是 1.11.1 版本，换成 https://cdn.bootcss.com/bootstrap-table/1.12.1/bootstrap-table.min.js 后，效果就出来了。官网的例子中没有级联选中与取消选中的功能，网上搜了一下无果后，手动写了下，现在把代码贴上
代码
<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width,initial-scale=1.0" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<title>系统管理</title>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.bootcss.com/jquery-treegrid/0.2.0/css/jquery.treegrid.min.css">
</head>
<body>
<div class="container">
<h1>Table Treegrid</h1>
<table id="table"></table>
<button onclick="test()">test</button>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<!-- <script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.js"></script> -->
<script src="https://cdn.bootcss.com/bootstrap-table/1.12.1/bootstrap-table.min.js"></script>
<!--<script src="http://issues.wenzhixin.net.cn/bootstrap-table/assets/bootstrap-table/src/bootstrap-table.js"></script> -->
<script src="https://cdn.bootcss.com/bootstrap-table/1.12.0/extensions/treegrid/bootstrap-table-treegrid.js"></script>
<script src="https://cdn.bootcss.com/jquery-treegrid/0.2.0/js/jquery.treegrid.min.js"></script>
<script type="text/javascript">
var $table = $('#table');var data = JSON.parse('[{"id":1,"pid":0,"status":1,"name":"系统管理","permissionValue":"open:system:get"},{"id":2,"pid":0,"status":1,"name":"字典管理","permissionValue":"open:dict:get"},{"id":20,"pid":1,"status":1,"name":"新增系统","permissionValue":"open:system:add"},{"id":200,"pid":20,"status":1,"name":"新增系统","permissionValue":"open:system:add"},{"id":201,"pid":20,"status":1,"name":"新增系统","permissionValue":"open:system:add"},{"id":2001,"pid":200,"status":1,"name":"新增系统","permissionValue":"open:system:add"},{"id":2002,"pid":200,"status":1,"name":"新增系统","permissionValue":"open:system:add"},{"id":21,"pid":1,"status":1,"name":"编辑系统","permissionValue":"open:system:edit"},{"id":22,"pid":1,"status":1,"name":"删除系统","permissionValue":"open:system:delete"},{"id":33,"pid":2,"status":1,"name":"系统环境","permissionValue":"open:env:get"},{"id":333,"pid":33,"status":1,"name":"新增环境","permissionValue":"open:env:add"},{"id":3333,"pid":33,"status":1,"name":"编辑环境","permissionValue":"open:env:edit"},{"id":233332,"pid":33,"status":0,"name":"删除环境","permissionValue":"open:env:delete"}]')
$(function() {
console.log(data)
$table.bootstrapTable({
data:data,
idField: 'id',
dataType:'jsonp',
columns: [
{
field: 'check',
checkbox: true,
formatter: function (value, row, index) {
if (row.check == true) {
console.log(row.serverName);
return {
checked: true//设置选中
};
}
}
},
{
field: 'name',
title: '名称'
},
// {field: 'id', title: '编号', sortable: true, align: 'center'},
// {field: 'pid', title: '所属上级'},
{
field: 'status',
title: '状态',
sortable: true,
align: 'center',
formatter: 'statusFormatter'
},
{
field: 'permissionValue',
title: '权限值'
}
],
// bootstrap-table-tree-column.js 插件配置
// treeShowField: 'name',
// parentIdField: 'pid'
// bootstrap-table-tree-column.js 插件配置
// bootstrap-table-treegrid.js 插件配置
treeShowField: 'name',
parentIdField: 'pid',
onResetView: function(data) {
console.log('load');
// jquery.treegrid.js
$table.treegrid({
// initialState: 'collapsed',
treeColumn: 1,
// expanderExpandedClass: 'glyphicon glyphicon-minus',
// expanderCollapsedClass: 'glyphicon glyphicon-plus',
onChange: function() {
$table.bootstrapTable('resetWidth');
}
});
},
onCheck:function(row){
var datas = $table.bootstrapTable('getData');
// 勾选子类
selectChilds(datas,row,"id","pid",true);
// 勾选父类
selectParentChecked(datas,row,"id","pid")
// 刷新数据
$table.bootstrapTable('load', datas);
},
onUncheck:function(row){
var datas = $table.bootstrapTable('getData');
selectChilds(datas,row,"id","pid",false);
$table.bootstrapTable('load', datas);
},
// bootstrap-table-treetreegrid.js 插件配置
});
});
// 格式化类型
function typeFormatter(value, row, index) {
if (value === 'menu') {
return '菜单';
}
if (value === 'button') {
return '按钮';
}
if (value === 'api') {
return '接口';
}
return '-';
}
// 格式化状态
function statusFormatter(value, row, index) {
if (value === 1) {
return '<span class="label label-success">正常</span>';
} else {
return '<span class="label label-default">锁定</span>';
}
}
</script>
<script>
/**
* 选中父项时，同时选中子项
* @param datas 所有的数据
* @param row 当前数据
* @param id id 字段名
* @param pid 父id字段名
*/
function selectChilds(datas,row,id,pid,checked) {
for(var i in datas){
if(datas[i][pid] == row[id]){
datas[i].check=checked;
selectChilds(datas,datas[i],id,pid,checked);
};
}
}
function selectParentChecked(datas,row,id,pid){
for(var i in datas){
if(datas[i][id] == row[pid]){
datas[i].check=true;
selectParentChecked(datas,datas[i],id,pid);
};
}
}
</script>
</html>后记
大家可以直接引入我代码中的 css 与 js 文件，都是cdn地址，最后吐槽一句，前端真坑。