layui的tabletree擴展組件

需求：點擊父級菜單展現子級菜單

難點：某個父級菜單下面有5000條子級菜單（有點坑），當我想把這5000條子級菜單塞到父級菜單下面的時候完蛋了，頁面卡死了...

解決：tabletree這組件我發現用的人是真的少，沒辦法只能硬着頭皮去看這麼low的組件js源碼。下面是解決步驟，但願能幫助到和我遇到同樣困惑的小盆友。

步驟一：下圖一是我頁面上的代碼，思路其實就是先判斷子級菜單的數量，若是子級菜單少於200條的話就直接用組件的obj.async(數組)；把子級菜單數組塞給父級菜單，這個方法會自動局部刷新（仍是比較好用的，layui官方文檔沒有講到這個方法，本身開源碼找到的，真坑）；若是子級菜單多於200條的話就把查詢到的子級菜單按200條一批分批塞給父級菜單，這裏還有個小問題，我這一批塞成功後這個obj.async()方法沒有返回值，日了狗了還得看圖二tableTree.js源碼，發現每當這個obj.async()方法執行完後能獲取obj.data.treeList，這樣就有實現思路了，我先定義了一個臨時變量dataList = [],當obj.async()方法執行完一批後給dataList = obj.data.treeList賦值，判斷dataList是否大於0，大於0說明這批數據塞成功了，而後dataList = []賦值空，去塞下一批數據。

圖一：（我本地頁面）

圖2：（tableTree源碼）

步驟二：功能是實現了，問題又來了，5000條數據要耗時十幾分鍾去塞，什麼鬼，我代碼沒有這麼爛啊，還得看源碼，發如今塞數據的時候這個組件會自動去重，就下圖我標出來的方法，由於我數據後臺查詢的時候已經去重，因此果斷註釋掉了這個方法，效率大大提升了，只能這樣先湊合用了

結論：論技術選型和選擇組件的重要性，我的感受一個好的選擇大於一切，若是是個人話絕對不會選擇tabletree這個組件，這裏是沒辦法有強制要求...