點擊獲取DevExpress v19.1.7最新完整版試用下載
DevExpress UI for Blazor即將在最新的v19.1.8中可用，此次更新發布包括DevExpress Blazor組件的主要功能增強：新的數據網格、圖表、TreeView和Tabs。本文將先為大家介紹Data Grid、TreeView API！
Data Grid
新的數據分頁API
Blazor數據網格組件附帶了一個外部數據導航API，激活網格的分頁模式（DataNavigationMode = DataGridNavigationMode.Paging），然后使用以下API啟用分頁：
- PageIndex - 指定當前頁面索引。
- PageIndexChanged - 當前頁面索引更改時觸發。
- PageCount - 返回當前頁數。
- PageCountChanged - 當前頁數更改時觸發。
...@code {
int gridPageIndex;
[Parameter] public int GridPageIndex {
get => gridPageIndex;
set { gridPageIndex = value; InvokeAsync(StateHasChanged); }
}
[Parameter] public int GridPageNumber {
get => gridPageIndex + 1;
set { gridPageIndex = value - 1; InvokeAsync(StateHasChanged); }
}
int gridPageCount;
[Parameter] public int GridPageCount {
get => gridPageCount;
set { gridPageCount = value; InvokeAsync(StateHasChanged); }
}
}
TreeView
支持節點模板
Blazor TreeView允許用戶通過模板化UI元素為節點和相關內容創建可重用的布局，可用模板如下：
- NodeTemplate - 指定所有TreeView節點內容的模板，所有節點的模板均相同。
- NodeTextTemplate - 指定所有TreeView節點文本的模板，所有節點的模板均相同。
- Template - 指定單個節點內容的模板。
- TextTemplate - 指定單個節點的文本模板。
新節點的展開/折疊動作
現在，您可以指定哪個用戶操作來展開或折疊節點。要啟用此功能，請將NodeExpandCollapseAction屬性設置為以下操作當中的一個：
- Auto – 單擊（或如果AllowNodeSelection屬性設置為“ true”，則雙擊）一個節點或其展開按鈕來展開/折疊該節點。
- NodeClick - 單擊一個節點或其展開按鈕來展開或折疊該節點。
- NodeDoubleClick - 雙擊節點或其展開按鈕來展開或折疊該節點。
- ButtonClick – 僅單擊節點展開按鈕即可展開或折疊該節點。
@context.Text...@code {
DxTreeView treeView;
protected string GetNodeCssClass(ITreeViewNodeInfo nodeInfo) {
var selectedNode = treeView.GetSelectedNodeInfo();
var selectedStateClass = selectedNode != null &&
selectedNode.Name == nodeInfo.Name ? "text-primary" : "text-secondary";
var expandedStateClass = !nodeInfo.IsLeaf &&
treeView.GetNodeExpanded(n => n.Name == nodeInfo.Name) ?
"font-weight-bold" : "";
return (selectedStateClass + " " + expandedStateClass).Trim();
}
}
DevExpress v19.1.7全新發布，歡迎下載最新版體驗哦~
DevExpress中文網官網QQ群：540330292 歡迎一起進群討論
掃描關注DevExpress中文網微信公眾號，及時獲取最新動態及最新資訊
