bootstrap-treetable

<table id="demo"></table>
var treeTable = $('#demo').bootstrapTreeTable({
    columns: [{
        title: '菜单名称',
        field: 'menuName',
        width: '20%',
        formatter: function(value,row, index) {
            if (row.icon == null || row == "") {
                return row.menuName;
            } else {
                return '<i class="' + row.icon + '"></i> <span class="nav-label">' + row.menuName + '</span>';
            }
        }
    }],
    data:[{
        "id": 1,
        "menuName": "系统管理",
        "parentId": 0,
        "icon": "glyphicon glyphicon-thumbs-up"
    }, {
        "id": 2,
        "menuName": "系统监控",
        "parentId": 0,
        "icon": "glyphicon glyphicon-thumbs-up"
    }, {
        "id": 100,
        "menuName": "用户管理",
        "parentId": 1,
        "icon": "#"
    }, {
        "id": 101,
        "menuName": "角色管理",
        "parentId": 1,
        "icon": "#"
    }]
});

<div id="demo-toolbar" class="btn-group" role="group">
  <button type="button" class="btn btn-default">新增</button>
  <button type="button" class="btn btn-default">编辑</button>
  <button type="button" class="btn btn-default">删除</button>
</div>
<table id="demo"></table>
var treeTable = $('#demo').bootstrapTreeTable({
    type: 'get',                   // 请求方式（*）
    url: "./data.json",            // 请求后台的URL（*）
    ajaxParams : {},               // 请求数据的ajax的data属性
    toolbar: "#demo-toolbar",      //顶部工具条
    expandColumn : 1,              // 在哪一列上面显示展开按钮
    columns: [{
        field: 'selectItem',
        checkbox: true
     },{
        title: '菜单名称',
        field: 'menuName',
        width: '20%',
        formatter: function(value,row, index) {
            if (row.icon == null || row == "") {
                return row.menuName;
            } else {
                return '<i class="' + row.icon + '"></i> <span class="nav-label">' + row.menuName + '</span>';
            }
        }
    }]
});

id: 'id',               // 选取记录返回的值,用于设置父子关系
parentId: 'parentId',   // 用于设置父子关系
rootIdValue: null,      // 设置根节点id值----可指定根节点，默认为null,"",0,"0"
data: null,             // 构造table的数据集合
type: "GET",            // 请求数据的ajax类型
url: null,              // 请求数据的ajax的url
ajaxParams: {},         // 请求数据的ajax的data属性
expandColumn: 0,        // 在哪一列上面显示展开按钮
expandAll: false,       // 是否全部展开
expandFirst: true,      // 是否默认第一级展开--expandAll为false时生效
striped: false,         // 是否各行渐变色
bordered: true,         // 是否显示边框
hover: true,            // 是否鼠标悬停
condensed: false,       // 是否紧缩表格
columns: [],            // 列
toolbar: null,          // 顶部工具条
height: 0,              // 表格高度
showTitle: true,        // 是否采用title属性显示字段内容（被formatter格式化的字段不会显示）
showColumns: true,      // 是否显示内容列下拉框
showRefresh: true,      // 是否显示刷新按钮
expanderExpandedClass: 'glyphicon glyphicon-chevron-down', // 展开的按钮的图标
expanderCollapsedClass: 'glyphicon glyphicon-chevron-right' // 缩起的按钮的图标

title      String  undefined   表头要显示的文本
field      String  undefined   要显示数据的字段名称，可以理解为json对象里的key
checkbox   Boolean false   设置为True的时候 则显示一列checkbox组件，该列的宽度为固定宽度
radio      Boolean false   设置为True的时候 则显示一列radio组件，该列的宽度为固定宽度
align      String  undefined   设置单元格数据的左右对齐方式， 可选择的值有：’left’, ‘right’, ‘center’
valign     String  undefined   设置单元格数据的上下对齐方式， 可选择的值有：’top’, ‘middle’, ‘bottom’
width      Number {Pixels or Percentage}   undefined    设置单元格列宽度。可以使用’%’百分比的方式，也可以设置要显示的像素值
visible    Boolean true    显示或隐藏该列， 默认显示， False为隐藏
formatter  Function    undefined   单元格格式化函数，有三个参数：value： 该列的字段值；row： 这一行的数据对象；index： 行号，第几行，从0开始计算
例子：formatter : function(value, row, index){ return value + row.id + index; }

//刷新
$('#demo').bootstrapTreeTable('refresh');

//带参刷新
var params = {
    searchKey:"haha"
};
$('#demo').bootstrapTreeTable('refresh',params);

//获取所选数据
var selected = $('#demo').bootstrapTreeTable('getSelections');
//为了兼容bootstrap-table的写法，统一返回数组

//任意添加数据到表格（数据格式与原数据一样）
//注：重复数据将以最后一条为准
var data = [{
        "searchValue": null,
        "createBy": "admin",
        "createTime": "2018-03-16 11:33:00",
        "updateBy": null,
        "updateTime": null,
        "remark": null,
        "params": null,
        "id": 1038,
        "menuName": "在线查询",
        "parentName": null,
        "parentId": 109,
        "orderNum": "1",
        "url": "#",
        "menuType": "F",
        "visible": 0,
        "perms": "monitor:online:list",
        "icon": "#"
    },{...}];
$('#demo').bootstrapTreeTable('appendData',data);