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 最后实践

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