bootstraptable+treegrid实现树状表格

 1.首先引入相关的文件：

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

2.在table中设置树状表的参数

$(function () {
    var $table = $("#tb_zph");
    $table.bootstrapTable({
        url:'../menu/getMenu',
        method: 'post',                      //请求方式（*）
        toolbar: '#toolbar',                //工具按钮用哪个容器
        striped: true,                      //是否显示行间隔色
        cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
        //pagination: true,                   //是否显示分页（*）
        sortable: true,                     //是否启用排序
        sortOrder: "asc",                   //排序方式
        //queryParams: oTableInit.queryParams,//传递参数（*）
        //sidePagination: "client",           //分页方式：client客户端分页，server服务端分页（*）
        pageNumber:1,                       //初始化加载第一页，默认第一页
        pageSize: 10,                       //每页的记录行数（*）
        pageList: [5,10, 25, 50, 100],        //可供选择的每页的行数（*）
        //search: true,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
        //strictSearch: true,
        showColumns: true,                  //是否显示所有的列
        showRefresh: true,                  //是否显示刷新按钮
        minimumCountColumns: 2,             //最少允许的列数
        clickToSelect: true,                //是否启用点击选中行
        //height: 500,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
        uniqueId: "id",                     //每一行的唯一标识，一般为主键列
        //showToggle:true,                    //是否显示详细视图和列表视图的切换按钮
        cardView: false,                    //是否显示详细视图
        //detailView: true,                   //是否显示父子表
        showExport: true,                     //是否显示导出
        exportDataType: "basic",              //basic', 'all', 'selected'.
        idField:'id',
        columns:[
            {
                radio: true
            },{
                field:'name',
                title:'名称'
            },{
                field:'token',
                title:'权限标识'
            },{
                field:'level',
                title:'菜单层级',
                formatter: 'typeFormatter'
            }
        ],
        // 设置树状表格参数
        treeShowField: 'name',
        parentIdField: 'pId',
        onLoadSuccess: function(data) {
        	//console.log(data);
            $table.treegrid({
                initialState: 'expanded',//展开
                treeColumn: 1,//指明第几列数据改为树形
                expanderExpandedClass: 'glyphicon glyphicon-triangle-bottom',
                expanderCollapsedClass: 'glyphicon glyphicon-triangle-right',
                onChange: function() {
                    $table.bootstrapTable('resetWidth');
                }
            });
        }
    });
})

3.后台

	/***
	 * 树结构
	 * @return
	 */
	@RequestMapping("getMenu")
	@ResponseBody
	public List<Node> getTree(){
		
		List<Node> nodeList = roleService.getTree();		
		return nodeList;
		
	}

Node类：

package com.learning.www.entity;

import com.fasterxml.jackson.annotation.JsonProperty;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@NoArgsConstructor
@AllArgsConstructor
public class Node {
	 
	// 节点id
	private Integer id;
	// 父节点id
	@JsonProperty
	private Integer pId;
	// 节点名称
	private String name;
	// 需要自定义图片时，使用该属性
	private String iconSkin;
	// 需要自定义图片时，使用该属性
	private String token;
	// 通过该属性，设置图片
	private Integer level;
	// 当需要设置某个节点被选中的时候，通过该属性定义
	private Boolean checked;
}

效果：