【外掛篇】前段bootstrap-table-treegrid試手,解決無法顯示樹形列表或者圖示不顯示問題。
阿新 • • 發佈:2018-12-04
說明:具體程式碼操作我就不貼了。官方有正規的例子!bootstrap-table-examples傳送
使用注意事項:
- 傳入的id和pid可以是string型別的(我後臺返回的是Long型別轉換成string來顯示的),開始看到有的地方說必須使用number型別,走了不少彎路。去研究js中String轉Long精度丟失的問題了。。。。。
- 頂級節點的parentId值得問題。官方預設的判斷方式為如果parentId為空(null或者“”)時,此行就是頂級節點。但是結合我自己的情況。我在設計時頂級節點的parentId都置為0。所以不得不改了下bootstarap-table-treegrid.js的判斷方式了。下面是改動的地方:
- 圖示是否顯示,檢視是否開啟樣式的渲染了,下面程式碼有說明。
- 還有一種情況時,預設是使用兩張圖片。可以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; }
結尾:目前就這麼多的問題,希望能幫到諸位。有其他問題可以留言探討。