【DevExpress v17.2新功能預告】DevExtreme TreeList

AABBbaby發表於2017-11-01
devExpressREM

在即將到來的v17.2中，您可以檢視到DevExtreme HTML5 TreeList小部件的這些新功能。

DevExpress v17.2新版預告

1. 遞迴選擇模式

TreeList將包括一個新的遞迴選擇模式，您只需一次點選即可選擇或取消選擇整個分支，節點上的點選也可以選擇或取消選擇所有的子節點。使用selection.recursive選項啟用該功能：

1
2
3
4
selection: {
// …
recursive: true
},

在這裡您可以看到，當我們選擇一個子節點時，TreeList也遞迴地選擇關聯的父節點：

DevExpress v17.2新版預告

2. 內建搜尋

如果您的TreeList包含數千條記錄，那麼很難找到一個特定的節點。這就是為什麼在v17.2版本中，我們在標頭過濾器中新增了搜尋功能，以加快過濾速度。

headerFilter.allowSearch選項在widget選項根級別和列選項中可用。這允許您啟用所有列的標題過濾器搜尋，或僅針對特定列。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
treeListOptions: {
//...
headerFilter: {
//...
allowSearch: true //all columns
},
 
columns: [{
//...
headerFilter: {
//...
allowSearch: true //specific column
},
}]
}

在下面的動畫中，您可以看到如何節省時間來實現頭部過濾器搜尋功能：

DevExpress v17.2新版預告

如果TreeList中有太多列，該怎麼辦？ 只需在列選擇器中啟用搜尋框即可獲得與列相同的搜尋功能：

1
2
3
4
columnChooser: {
//...
allowSearch: true
}

這使得查詢列變得輕而易舉，無論列選擇器模式如何，都可以使用該功能：

DevExpress v17.2新版預告

3. 新的Lazy載入模式

在即將釋出的版本中，您可以通過延遲摺疊專案（及其子代）的負載來優化TreeList的效能。 在此模式下，可以使用以下方法載入子節點：

  • loadDescendants() - 遞迴載入子節點
  • loadDescendants(keys) - 遞迴地載入指定節點的子節點
  • loadDescendants(keys, childrenOnly) - 根據childrenOnly引數值，僅遞交特定節點的子節點或其所有子節點的單個級別

4. getNodeByKey方法

同樣在這個版本中，您可以通過呼叫getNodeByKey（keyParam）獲取一個TreeList的節點：

treeListInstance.getNodeByKey(8);

此呼叫返回包含level、key、“visible”和“hasChildren” flags、children陣列和表示節點父級物件的完整節點。

===============================================================

想要進一步瞭解如何DevExtreme TreeList？

DevExpress v17.2即將釋出，更多精彩預告請持續關注DevExpress中文網！

掃描關注DevExpress中文網微信公眾號，及時獲取最新動態及最新資訊


相關文章