【插件篇】前段bootstrap-table-treegrid試手，解決無法顯示樹形列表或者圖標不顯示問題。

 

說明：具體代碼操作我就不貼了。官方有正規的例子！bootstrap-table-examples傳送

使用注意事項：

1. 傳入的id和pid可以是string類型的（我后台返回的是Long類型轉換成string來顯示的），開始看到有的地方說必須使用number類型，走了不少彎路。去研究js中String轉Long精度丟失的問題了。。。。。
2. 頂級節點的parentId值得問題。官方默認的判斷方式為如果parentId為空（null或者“”）時，此行就是頂級節點。但是結合我自己的情況。我在設計時頂級節點的parentId都置為0。所以不得不改了下bootstarap-table-treegrid.js的判斷方式了。下面是改動的地方：
3. 圖標是否顯示，查看是否開啟樣式的渲染了，下面代碼有說明。
4. 還有一種情況時，默認是使用兩張圖片。可以f12調試。控制台會提示查不到對應的圖片。

        onLoadSuccess:function (data) {
            $table.treegrid({
                // 初始化狀態是全部折疊
                // initialState: 'collapsed',
                treeColumn: 1,
                // 下面兩個是控制樹形列表前面加號加號的樣式渲染是否開啟的
                // expanderExpandedClass: 'glyphicon glyphicon-minus',
                // expanderCollapsedClass: 'glyphicon glyphicon-plus',
                // onChange: function() {
                //     $("#dataGrid").bootstrapTable('resetWidth');
                // }
            });
        }

　　下面是bootstrap-table-treegrid.js中的一個方法

        onCheckRoot: function (row, data) {
            var that = this;
            // 此處原本是判斷當前行row中的parentIdField的值是否為空值來判斷
            // 是否是頂級節點。不滿足我的設計要求。
            // 因為我在設計時，頂級節點(即目錄)菜單的父節點值為0。
            // 所以改為判斷是否為0值即可。
            //return !row[that.options.parentIdField];
            if(row[that.options.parentIdField] == "0"){
                return true;
            }
            return false;
        }

 

結尾：目前就這么多的問題，希望能幫到諸位。有其他問題可以留言探討。