bootstrap-treegrid JS引入和实例

js引入部分

 <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">
 
<script src="https://cdn.bootcss.com/bootstrap-table/1.12.1/bootstrap-table.min.js"></script>
<script type="text/javascript" src="/wro/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>

实例部分

	$('#tb_departments').bootstrapTable({
			url : url, //请求后台的URL（*）
			method : 'post', //请求方式（*）
			contentType:"application/x-www-form-urlencoded; charset=UTF-8",
			toolbar : '#toolbar', //工具按钮用哪个容器
			striped : false, //是否显示行间隔色
			cache : false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
			pagination : true, //是否显示分页（*）
			sortable : false, //是否启用排序
			sidePagination : "server", //分页方式：client客户端分页client客户端分页，server服务端分页（*）
			pageNumber : 1, //初始化加载第一页，默认第一页
			pageSize : 9, //每页的记录行数（*）
			pageList : [ 10, 25, 50, 100 ], //可供选择的每页的行数（*）
			height : 520, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
			uniqueId : "ID", //每一行的唯一标识，一般为主键列
			queryParamsType : "undefined",
			onDblClickCell: function (index,value,row) {
		    	details(row.id);
		    },
			queryParams : function queryParams(params) { //设置查询参数  
				var param = {
					pageNumber : params.pageNumber,
					pageSize : params.pageSize,
				};
				return param;
			},
			columns:[[  ]],
		treeShowField: 'name', 
		parentIdField: 'pid',
		onLoadSuccess: function(data) {
		$('#tb_departments').treegrid({
          initialState: 'collapsed',//收缩
          treeColumn: 1,//指明第几列数据改为树形
          expanderExpandedClass: 'glyphicon glyphicon-triangle-bottom',
          expanderCollapsedClass: 'glyphicon glyphicon-triangle-right',
          onChange: function() {
        	  $('#tb_departments').bootstrapTable('resetWidth');
        	  }
    	   });
	  	}
});

主要部分

onLoadSuccess: function(data) {
		$('#tb_departments').treegrid({
          initialState: 'collapsed',//收缩
          treeColumn: 1,//指明第几列数据改为树形
          expanderExpandedClass: 'glyphicon glyphicon-triangle-bottom',
          expanderCollapsedClass: 'glyphicon glyphicon-triangle-right',
          onChange: function() {
        	  $('#tb_departments').bootstrapTable('resetWidth');
        	  }
    	   });
	  	}

数据JSON

[
    {
      "id": 1,
      "pid": 0,
      "name": "系统管理",
      "permissionValue": "open:system:get"
    },
    {
      "id": 2,
      "pid": 0,
      "name": "字典管理",
      "permissionValue": "open:dict:get"
    },
    {
      "id": 20,
      "pid": 1,
      "name": "新增系统",
      "permissionValue": "open:system:add"
    },
    {
      "id": 21,
      "pid": 1,
      "name": "编辑系统",
      "permissionValue": "open:system:edit"
    },
    {
      "id": 22,
      "pid": 1,
      "name": "删除系统",
      "permissionValue": "open:system:delete"
    },
    {
      "id": 33,
      "pid": 2,
      "name": "系统环境",
      "permissionValue": "open:env:get"
    },
    {
      "id": 333,
      "pid": 33,
      "name": "新增环境",
      "permissionValue": "open:env:add"
    },
    {
      "id": 3333,
      "pid": 33,
      "name": "编辑环境",
      "permissionValue": "open:env:edit"
    },
    {
      "id": 233332,
      "pid": 33,
      "name": "删除环境",
      "permissionValue": "open:env:delete"
    }
]