treegrid树形表格的完美运用

一 问题描述:

树形表格TreeGrid在日常项目中还是运用的比较多的，哪我们在项目中，应该怎么引入和使用

TreeGrid呢?

二 使用步骤

1.首先我们需要在项目中，引入TreeGrid组件  需要引入的文件

   <!-- 引入treegrid-->
    <link rel="stylesheet" th:href="@{/static/js/plugins/bootstrap-table-treegrid/jquery.treegrid.min.css}">
    <script type="text/javascript"  th:src="@{/static/js/plugins/bootstrap-table-treegrid/bootstrap-table-treegrid.js}"></script>
    <script type="text/javascript"  th:src="@{/static/js/plugins/bootstrap-table-treegrid/jquery.treegrid.min.js}"></script>

　2. 需要在页面定义一个容器

 <div>
     <div>
        <h1></h1>
           <table id="menuTable"></table>
          <br/>
      </div>
</div>

　3. JS代码加载数据

  var menus =   [[${menus}]]; //后台传递的过来的数据
  var $table = $('#menuTable');
         // '[{"id":1,"pid":0,"name":"用户管理",url:'',icon:'',"permission":{}},' +
     $(function() {
         //加载树形表格
         $table.bootstrapTable({
             data:menus,
             idField: 'id',
             dataType:'jsonp',
             columns: [
                 { field: 'check',  checkbox: true, formatter: function (value, row, index) {
                         if (row.check == true) {
                             // console.log(row.serverName);
                             //设置选中
                             return {  checked: true };
                         }
                     }
                 },
                 { field: 'name',  title: '名称' },
                 { field: 'url',  title: '路径' },
                 { field: 'icon',  title: '图标' },
                 // {field: 'id', title: '编号', sortable: true, align: 'center'},
                 {field: 'pid', title: '所属上级',formatter:'pidFormatter'},
                 { field: 'permission',  title: '权限值', sortable: true,  align: 'center', formatter: 'permissionFormatter'  },
                 { field: 'operate', title: '操作', align: 'center', events : operateEvents, formatter: 'operateFormatter' },
             ],
             //在哪一列展开树形
             treeShowField: 'name',
             //指定父id列
             parentIdField: 'pid',
             onResetView: function(data) {
                 //console.log('load');
                 $table.treegrid({
                     initialState: 'collapsed',// 所有节点都折叠
                     // initialState: 'expanded',// 所有节点都展开，默认展开
                     treeColumn: 1,
                     expanderExpandedClass: 'mdi mdi-minus',  //图标样式
                     expanderCollapsedClass: 'mdi mdi-plus',
                     onChange: function() {
                         $table.bootstrapTable('resetWidth');
                     }
                 });
                 //只展开树形的第一级节点
                 $table.treegrid('getRootNodes').treegrid('expand');
             },
             onCheck:function(row){
                 var datas = $table.bootstrapTable('getData');
                 // 勾选子类
                 selectChilds(datas,row,"id","pid",true);

                 // 勾选父类
                 selectParentChecked(datas,row,"id","pid")

                 // 刷新数据
                 $table.bootstrapTable('load', datas);
             },

             onUncheck:function(row){
                 var datas = $table.bootstrapTable('getData');
                 selectChilds(datas,row,"id","pid",false);
                 $table.bootstrapTable('load', datas);
             }
         });

4 最终效果

5 最后实践

赶快行动起来 测试一下吧，需要源码的 ，可以联系我