[kendo] kendoTreeList多筆全展開調校

  • 295
  • 0

整理一下之前工作上遇到的問題:

分為左右兩邊由組織及人員組成的treelist, 組織會帶動人員dataSource的刷新, 如下圖

客戶要求左手邊組織在畫面進入時要全部展開, 用chrome時覺得太慢, 而客戶端只用IE, 就真的又更慢了....

[找出問題點]

打開開發人員工具先分析問題點, 圖中框起來的地方花了20s左右,

可以看出大多花在function call的地方

程式碼

前人為了滿足客戶的需求, 取其中間值(黃色框的部分), 從設定檔設定某一層組織的代碼,

在dataBound時去決定只展開到第3層(總共有5層), 但第44行的地方是將組織的dataItem去做expand,

是導致慢的主因, 而另一個缺點就是萬一第42行所設定的代碼並未符合上千筆資料中的任一筆, 因為each迴圈不會回傳false, 就真的一筆筆的展開了.....

[解決方法]

從DataSource的Configuration下手

將回傳的結果一一設定expended屬性, 因為kendoTreeList會依此屬性決定該筆資料是否要展開,

這個部分為了要清楚一點在dataSource的部分自己拿出來寫一份,

可以看到transport自己串url, 再利用schema的parse將return的資料再處理, 那之後在dataBound的地方可以不用重複呼叫expand方法展開

[結果]

改完後上述的function call幾乎都不見了, 時間降為1.36

為了提升效能, 應盡量減少讓程式在瀏覽器上做太多的處理,

但遇到類似這種不得不在客戶端取得全部資料再利用widget呈現的狀況, 不妨試試在dataSource有什麼可以先處理的地方