點擊獲取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元素為節點和相關內容創建可重用的布局，可用模板如下：

1. NodeTemplate - 指定所有TreeView節點內容的模板，所有節點的模板均相同。
2. NodeTextTemplate - 指定所有TreeView節點文本的模板，所有節點的模板均相同。
3. Template - 指定單個節點內容的模板。
4. 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中文網微信公眾號，及時獲取最新動態及最新資訊