<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<table id="treeTable" class="table table-hover table-bordered"></table>
<!--引入jquery,以及文件中相关的js，css-->
<script type="application/javascript">
$(function() {
loadTable();
function loadTable(){
<!--数据结构不需要做特殊处理，数据结构中要有id与父id字段名称与idField和parentIdField对应-->
var $table = $("#treeTable");
$table.bootstrapTable({
url:'服务器数据地址',
striped:true,
sidePagenation:'server',
idField:'id',//主键id
treeShowField: 'name',
parentIdField: 'parentId',//父id
clickToSelect: true,
columns:[
{
field:'name',
title:'名称'
},{
field:'permission',
title:'权限'
},{
field:'description',
title:'描述'
},{
title: '操作',
field: 'id',
formatter: function (value) {
var html = '<a class="btn btn-xs btn-info cate-edit" onclick="updatePer('+ value + ')" >编辑</a>';
html += ' <a class="btn btn-xs btn-danger cate-delete" onclick="checkPer('+ value + ')" >删除</a>';
return html;
}
},
],
onLoadSuccess: function(result) {
$table.treegrid({
initialState: 'collapsed',//收缩
indentation:'20',
treeColumn: 0,//指明第几列数据改为树形
expanderExpandedClass: 'glyphicon glyphicon-triangle-bottom',
expanderCollapsedClass: 'glyphicon glyphicon-triangle-right',
onChange: function() {
$table.bootstrapTable('resetWidth');
}
});
}
});
}
});
</script>
</body>
</html>
bootstrap_treegrid-demo.zip （8个子文件） 
treeTable.html 2KB
bootstrap_treegrid 
bootstrap-table.js 107KB bootstrap-table.css 7KB jquery-treegrid img 
expand.png 3KB collapse.png 3KB js jquery.treegrid.min.js 10KB css jquery.treegrid.min.css 314B bootstrap-table-treegrid.js 4KB资源评论
