bootstrapTable treegrid的使用

最近打算本身弄一個後臺,在整頓樹形插件的時候,遇到問題,bootstrapTable treegrid最開始是怎麼都顯示不了樹形,而後是數據出不來,

如今來記錄下.

問題1:最開始怎麼都顯示不出來的問題,是由於 bootstrap-table.min.css 的問題.替換後OK了

問題2:數據不出來的問題,由於返回的數據格式不對.

$('#exampleTable')
        .bootstrapTable(
            {
                type : "GET",
                url : prefix + "/list", // 服務器數據的加載地址
                idField: 'menuId',
                dataType: 'json',
                responseHandler: function (res) {
                    //將服務端你的數據轉換成bootstrap table 能接收的類型
                    return {
                        "data": res.list   //數據
                    };
                },
                // //請求服務器數據時，你能夠經過重寫參數的方式添加一些額外的參數，例如 toolbar 中的參數 若是
                // queryParamsType = 'limit' ,返回參數必須包含
                // limit, offset, search, sort, order 不然, 須要包含:
                // pageSize, pageNumber, searchText, sortName,
                // sortOrder.
                // 返回false將會終止請求
                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: 'id', title: '編號', sortable: true, align: 'center'},
                    // {field: 'pid', title: '所屬上級'},
                    {field: 'status', title: '狀態', sortable: true, align: 'center', formatter: 'statusFormatter'},
                  /*  {field: 'permissionValue', title: '權限值'},
                    {
                        field: 'operate',
                        title: '操做',
                        align: 'center',
                        events: operateEvents,
                        formatter: 'operateFormatter'
                    }*/],

                // bootstrap-table-treegrid.js 插件配置 -- start
                //在哪一列展開樹形
                treeShowField: 'name',
                //指定父id列
                parentIdField: 'parentId', onResetView: function (data) {
                    //console.log('load');
                    $table.treegrid({
                        initialState: 'collapsed',// 全部節點都摺疊
                        // initialState: 'expanded',// 全部節點都展開，默認展開
                        treeColumn: 1,
                        // expanderExpandedClass: 'glyphicon glyphicon-minus',  //圖標樣式
                        // expanderCollapsedClass: 'glyphicon glyphicon-plus',
                        onChange: function () {
                            $table.bootstrapTable('resetWidth');
                        }
                    });

                    //只展開樹形的第一級節點
                    $table.treegrid('getRootNodes').treegrid('expand');

                },
                onCheck: function (row) {
                    var datas = $table.bootstrapTable('getData');
                    // 勾選子類
                    selectChilds(datas, row, "id", "parentId", true);

                    // 勾選父類
                    selectParentChecked(datas, row, "id", "parentId")

                    // 刷新數據
                    $table.bootstrapTable('load', datas);
                },

                onUncheck: function (row) {
                    var datas = $table.bootstrapTable('getData');
                    selectChilds(datas, row, "id", "parentId", false);
                    $table.bootstrapTable('load', datas);
                }
                // bootstrap-table-treetreegrid.js 插件配置 -- end
            });

由於是封裝的數據,返回的和控件要求的對不上,因此得轉一下.