bootstrap-table（一）树状表（tree-grid）

因为项目有一个接口是多级组织架构的，所以需求是使用树状图表展示，然后表格控件用的bootstrap-table，通过官网的扩展地址找到了tree-grid 这个功能。

扩展地址：bootstrap-table扩展 建议经常使用这个控件的人fork

使用方法官网有，但是我这里还是贴一下，有一点提示大家：关系id 和 pid 是number数据类型，如果后台给的是string类型，记得转换一下，不然是不能成功的，我就吃了这个亏，虽然也是我自个没看清

（道个歉，我自己的不严谨，耽误了小伙伴们的时间！！！）

不过这个可以通过修改源码达到目的bootstrap-table-treegrid,修改为：

onCheckRoot: function (row, data) {
    var that = this;
    if (row[that.options.parentIdField] == '0') {
        return true;
    } else {
        return false;
    }
}

引用的各类文件我就不贴了，大家记得参考一下官网扩展代码：tree-grid

  var $table = $('#table');
  $(function() {
    $table.bootstrapTable({
      url: '../json/treegrid.json',
      height: $(window).height(),
      striped: true,
      sidePagination: 'server',
      //这里是标志id  和 parentIdField有关系
      idField: 'id',
      columns: [
        {
          field: 'ck',
          checkbox: true
        },
        {
          field: 'name',
          title: '名称'
        },
        {
          field: 'status',
          title: '状态',
          sortable: true,
          align: 'center',
          formatter: 'statusFormatter'
        },
        {
          field: 'permissionValue',
          title: '权限值'
        }
      ],
      //最主要的就是下面  定义哪一列作为展开项  定义父级标志 这里是pid
      //定义的列一定是要在表格中展现的  换言之就是上方有这个列 不然报错
      treeShowField: 'name',
      
      parentIdField: 'pid',
      onLoadSuccess: function(data) {
        $table.treegrid({
          initialState: 'collapsed',
          treeColumn: 1,
          expanderExpandedClass: 'glyphicon glyphicon-minus',
          expanderCollapsedClass: 'glyphicon glyphicon-plus',
          onChange: function() {
            $table.bootstrapTable('resetWidth');
          }
        });
      }
    });
  });
    // 格式化类型
  function typeFormatter(value, row, index) {
    if (value === 'menu') {
      return '菜单';
    }
    if (value === 'button') {
      return '按钮';
    }
    if (value === 'api') {
      return '接口';
    }
    return '-';
  }

  // 格式化状态
  function statusFormatter(value, row, index) {
    if (value === 1) {
      return '<span class="label label-success">正常</span>';
    } else {
      return '<span class="label label-default">锁定</span>';
    }
  }

下面是效果图，我个人觉得还是很OK的：