点击获取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中文网微信公众号,及时获取最新动态及最新资讯