自己动手,通过源码找回 Ant-Design-Blaozr 中 Tree 组件的搜索筛选效果
最近更新一个Blazor server的项目,顺带把用到的Ant-Design-Blazor 升级到了最新的 0.14.4,结果发现之前在 0.8.4 版本中 Tree 组件的搜索显示效果变了,从仅显示找到的节点变成了在全部节点中高亮显示匹配的结果,为了节省用户沟通成本(就是懒得跟最终用户费口舌解释),于是自己动手把这个筛选效果找回来。
从 github 上拉取最新的 ant 代码回来,找到 Tree.Razor.cs 中的 SearchValue 属性,顺藤摸瓜找到 TreeNode.razor.cs 中的 RealDisplay 属性,参考 0.8.4 的实现把它改回去
internal bool RealDisplay
{
get
{
if (string.IsNullOrEmpty(TreeComponent.SearchValue))
{
//普通模式下节点显示规则
if (ParentNode == null) return true; //第一级节点默认显示
if (ParentNode.Expanded == false) return false; //上级节点如果是折叠的,必定折叠
return ParentNode.RealDisplay; //否则查找路径三的级节点显示情况
}
else
{
//筛选模式下不考虑节点是否展开,只要节点符合条件,或者存在符合条件的子节点是就展开显示
return Matched || HasChildMatched;
}
}
}
信心满满地运行,搜索结果的筛选效果确实是实现了,但是——所有匹配节点的上级节点全丢了——什么情况?原路找回 SearchNodes() 方法,应该是调用 node.OpenPropagation 方法时没有设置父节点的 HasChildMatched 属性,补上
internal void OpenPropagation()
{
this.Expand(true);
if (this.ParentNode != null)
{
this.ParentNode.HasChildMatched = true;
this.ParentNode.OpenPropagation();
}
}
这下才算是彻底恢复了之前的搜索结果的显示效果。个人感觉原来的筛选效果挺好的,即使新版本增加了 MatchedStyle 和 MatchedClass 突出显示结果,也可以保留筛选啊,想不通为啥要去掉。
因为是自己用,所以把生成的 AntDesign.dll 文件直接替换掉 C:\Users\用户名\.nuget\packages\antdesign\0.14.4\lib\net6.0 下的同名文件后 再重新生成引用它的项目就可以了。由于没有改动 AntDesign 的接口,其实直接替换发布目录下的同名文件应该也是可以的。
PS:借着这个机会,走马观花地学习了一下 AntDesign 的源代码,意外的发现一个动态生成 RenderFragment 的小技巧
var value = $"{start}<span class=\"{TreeComponent.MatchedClass}\" style=\"{TreeComponent.MatchedStyle}\">{match}</span>{end}";
<span>
@((MarkupString)value)
</span>
这显然比单独写函数返回 RenderFragment 直观省事得多。不过当 RenderFragment 作为模板时不能用函数传参了,需要通过 Inline 方式通过委托动态传参。例如要给 Table 组件的 FooterTemplate 传参
<Table FooterTemplate="@footer(sumValue)"
...省略了...
>
...也省略了...
</Table>
需要用以下方式
RenderFragment<float> footer = (v) => (RenderTreeBuilder __builder) =>
{
<span style="font-weight:bold">
预估金额总计: @v.ToString("¥0.00")
</span>
};
最后,感谢 Ant-Design-Blazor 的作者James Yeung和其他贡献者,感谢开源。
自己动手,通过源码找回 Ant-Design-Blaozr 中 Tree 组件的搜索筛选效果的更多相关文章
- 【高并发】通过源码深度分析线程池中Worker线程的执行流程
大家好,我是冰河~~ 在<高并发之--通过ThreadPoolExecutor类的源码深度解析线程池执行任务的核心流程>一文中我们深度分析了线程池执行任务的核心流程,在ThreadPool ...
- react ,ant Design UI中table组件合并单元格并展开详情的问题
需求:购物车订单列表,如图: 一:单元格合并 遇到这种你会怎么办呢? 单元格合并? 还是其他的方法? 下面是我的处理方式,就是在table 组件的columns上处理,这里拿商品举例,其余的类似, ...
- 通过源码了解ASP.NET MVC 几种Filter的执行过程
一.前言 之前也阅读过MVC的源码,并了解过各个模块的运行原理和执行过程,但都没有形成文章(所以也忘得特别快),总感觉分析源码是大神的工作,而且很多人觉得平时根本不需要知道这些,会用就行了.其实阅读源 ...
- Linux下通过源码编译安装程序
本文简单的记录了下,在linux下如何通过源码安装程序,以及相关的知识.(大神勿喷^_^) 一.程序的组成部分 Linux下程序大都是由以下几部分组成: 二进制文件:也就是可以运行的程序文件 库文件: ...
- 通过源码了解ASP.NET MVC 几种Filter的执行过程 在Winform中菜单动态添加“最近使用文件”
通过源码了解ASP.NET MVC 几种Filter的执行过程 一.前言 之前也阅读过MVC的源码,并了解过各个模块的运行原理和执行过程,但都没有形成文章(所以也忘得特别快),总感觉分析源码是大神 ...
- 在centos6.7通过源码安装python3.6.7报错“zipimport.ZipImportError: can't decompress data; zlib not available”
在centos6.7通过源码安装python3.6.7报错: zipimport.ZipImportError: can't decompress data; zlib not available 从 ...
- Kafka详解六:Kafka如何通过源码实现监控
问题导读: 1.kafka的消费者组的消费偏移存储,kafka支持两个版本? 2.ConsumerOffsetChecker类的作用是什么? 3.Kafka如何通过源码实现 ...
- 通过源码编译安装VIM
开发中使用的是Ubuntu 12.04 LTS,通过sudo apt-get install vim安装的版本较低,不支持YCM,所以,用源码编译并安装最新的Vim. 卸载旧版本的Vim: sudo ...
- echarts 通过源码方法 传入对应data数据获取分割步长值
通过源码方法获取这里的分割数字长度 /** * Quantity of a number. e.g. 0.1, 1, 10, 100 * * @param {number} val * @return ...
- 通过源码安装PostgresSQL
通过源码安装PostgresSQL 1.1 下载源码包环境: Centos6.8 64位 yum -y install bison flex readline-devel zlib-devel yum ...
随机推荐
- SpringBoot实战:Spring Boot接入Security权限认证服务
引言 Spring Security 是一个功能强大且高度可定制的身份验证和访问控制的框架,提供了完善的认证机制和方法级的授权功能,是一个非常优秀的权限管理框架.其核心是一组过滤器链,不同的功能经由不 ...
- FP分数规划在无线通信中的应用
更多精彩内容请关注微信公众号 '优化与算法' 前言 在数学优化中,分数规划是线性分式规划的推广.分数规划中的目标函数是两个函数的比值,这两个函数通常是非线性的.要优化的比值通常描述系统的某种效率. 1 ...
- web3 产品介绍 Dune Analytics 区块链的数据探索和可视化 链上热点和趋势一手掌握
Dune Analytics 是一个强大的数据分析平台,旨在帮助用户在区块链上进行数据探索和可视化. Dune Analytics的特点: 数据查询与可视化:Dune Analytics允许用户从多个 ...
- 【SpringBoot】12 Web开发 Part3 SpringMVC扩展
例如我们习惯于SSM的xml配置, 这是使用MVC的容器跳转方式 <?xml version="1.0" encoding="UTF-8"?> &l ...
- 【Layui】16 表单元素 Form
文档地址: https://www.layui.com/demo/form.html 表单元素: 1.输入框 2.密码框 3.下拉列表 4.单选框 5.复选框 6.文档域 7.富文本 8.开关 单行输 ...
- 【转载】 tensorflow: 怎样找到对应的bazel 版本和安装
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/u011279649/article/de ...
- 台式机电脑散热之狂想曲——主机机箱散热的另类方法(纯空想中ing)
本博文是一篇狂想曲,之所以叫狂想曲是因为本文只是博主在无聊时突发奇想,而且仅停留于想的阶段,所以本文内容不用太过认真. 事情是这样的,博主有一台式机,有事没事的就喜欢宅在宿舍里面,有时候还能偶然用这台 ...
- ApplicationRunner的讲解
在开发中可能会有这样的情景.需要在容器启动的时候执行一些内容.比如读取配置文件,数据库连接之类的.SpringBoot给我们提供了两个接口来帮助我们实现这种需求.这两个接口分别为CommandLine ...
- 10W数据量导入与现有表数据去重
使用的是PostgreSQL 在做大数据量(十万级)导入时,某些字段和数据库表里数据(千万级)重复的需要排除掉,把表数据查询出来用程序的方式判断去重效率很低,于是考虑用临时表. 先把新数据插入到临时表 ...
- Camera | 10.linux驱动 led架构-基于rk3568
前面文章我们简单给大家介绍了如何移植闪光灯芯片sgm3141,该驱动依赖了led子系统和v4l2子系统. V4L2可以参考前面camera系列文章,本文主要讲述led子系统. 一.LED子系统框架 L ...