DevExpress Blazor组件全新来袭!增强Data Grid、TreeView API
时间:2019-10-28
本文章向大家介绍DevExpress Blazor组件全新来袭!增强Data Grid、TreeView API,主要包括DevExpress Blazor组件全新来袭!增强Data Grid、TreeView API使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
点击获取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中文网微信公众号,及时获取最新动态及最新资讯
原文地址:https://www.cnblogs.com/AABBbaby/p/11751134.html
- [数据清洗]- Pandas 清洗“脏”数据(三)
- [数据清洗]- Pandas 清洗“脏”数据(二)
- [数据清洗]-Pandas 清洗“脏”数据(一)
- [数据清洗]-混乱的邮编数据
- 10行代码,Python实现爬取淘宝/天猫评论
- 4.请求安全-- 结合使用的安全优势总结
- TensorFlow强化学习入门(4)——深度Q网络(DQN)及其扩展
- 3.请求安全-- 如何验证请求的唯一性
- 2.请求安全-- MD5的必要性以及实际应用场景
- 1.请求安全-- 一个简单的 单设备登录 单点登录
- phalapi-进阶篇3(自动加载和拦截器)
- phalapi-进阶篇2(DI依赖注入和单例模式)
- 基于PhalApi的DB集群拓展 V0.1bate
- phalapi-进阶篇1(Api,Domain,和Model)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Nginx系列:负载均衡
- low版爬虫脚本,Python简单图片爬虫案例
- 漫画:什么是计数排序?
- SEO工具脚本,Python百度普通收录API提交工具
- Elastic Stack 实现日志的自动采集、搜索和分析
- 致开发人员:沉迷面向对象编程不可自拔?函数式编程了解一下
- MySQL空间函数实现位置打卡
- 单细胞交响乐8-marker基因检测
- 用TensorFlow.js在浏览器中进行实时语义分割 | MixLab算法系列
- python实现高性能mock服务
- 数据可视、语义分割、T_Youtube、智能调酒 | Mixlab人工智能合集
- Appium自动化测试框架探索与实践
- 交叉验证和超参数调整:如何优化你的机器学习模型
- 编写Docker Compose时要注意的五大常见错误
- 详解DBSCAN聚类