treegrid树形表格的完美运用

<!-- 引入treegrid-->
<link rel="stylesheet" th:href="@{/static/js/plugins/bootstrap-table-treegrid/jquery.treegrid.min.css}">
<script type="text/javascript" th:src="@{/static/js/plugins/bootstrap-table-treegrid/bootstrap-table-treegrid.js}"></script>
<script type="text/javascript" th:src="@{/static/js/plugins/bootstrap-table-treegrid/jquery.treegrid.min.js}"></script>

<div>
<div>
<h1></h1>
<table id="menuTable"></table>
<br/>
</div>
</div>

var menus = [[${menus}]]; //后台传递的过来的数据
var $table = $('#menuTable');
// '[{"id":1,"pid":0,"name":"用户管理",url:'',icon:'',"permission":{}},' +
$(function() {
//加载树形表格
$table.bootstrapTable({
data:menus,
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: 'url', title: '路径' },
{ field: 'icon', title: '图标' },
// {field: 'id', title: '编号', sortable: true, align: 'center'},
{field: 'pid', title: '所属上级',formatter:'pidFormatter'},
{ field: 'permission', title: '权限值', sortable: true, align: 'center', formatter: 'permissionFormatter' },
{ field: 'operate', title: '操作', align: 'center', events : operateEvents, formatter: 'operateFormatter' },
],
//在哪一列展开树形
treeShowField: 'name',
//指定父id列
parentIdField: 'pid',
onResetView: function(data) {
//console.log('load');
$table.treegrid({
initialState: 'collapsed',// 所有节点都折叠
// initialState: 'expanded',// 所有节点都展开，默认展开
treeColumn: 1,
expanderExpandedClass: 'mdi mdi-minus', //图标样式
expanderCollapsedClass: 'mdi mdi-plus',
onChange: function() {
$table.bootstrapTable('resetWidth');
}
});
//只展开树形的第一级节点
$table.treegrid('getRootNodes').treegrid('expand');
},
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);
}
});