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 最后實踐

  趕快行動起來 測試一下吧，需要源碼的 ，可以聯系我