首页 > 编程语言 >自己动手,通过源码找回 Ant-Design-Blaozr 中 Tree 组件的搜索筛选效果

自己动手,通过源码找回 Ant-Design-Blaozr 中 Tree 组件的搜索筛选效果

时间:2023-04-13 13:46:09浏览次数:45  
标签:return Tree ParentNode Blaozr 源码 RenderFragment 筛选 节点

最近更新一个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和其他贡献者,感谢开源。

 

标签:return,Tree,ParentNode,Blaozr,源码,RenderFragment,筛选,节点
From: https://www.cnblogs.com/towerbit/p/17314443.html

相关文章

  • Linux系统之源码编译部署Redis数据库
    (Linux系统之源码编译部署Redis数据库)一、Redis数据库介绍1.Redis简介Redis是完全开源的,遵守BSD协议,是一个高性能的key-value数据库。2.Redis特点Redis支持数据的持久化,可以将内存中的数据保存在磁盘中,重启的时候可以再次加载进行使用。Redis不仅仅支持简单的key-va......
  • spring源码-之解决循环依赖
    Spring如何解决循环依赖为了解决循环依赖,Spring使用了三级缓存。一级缓存用于存储bean定义。二级缓存用于存放已经创建但还没有完全初始化的前期bean实例。三级缓存用于存放完全初始化的bean实例。当检测到循环依赖时,Spring会创建一个部分初始化的bean实例并将其存储在二......
  • 欢乐商城源码/品云购商城源码/英文版商城源码/全开源 可二开
    demo软件园每日更新资源,请看到最后就能获取你想要的:1.欢乐商城源码/品云购商城源码/英文版商城源码/全开源可二开商城源码/英文版商城源码/全开源可二开出海项目源码后台为中文语言页面效果:2.SQL学习指南(第2版)这是一本关于SQL的书,不是关于数据库的。以MySQL为例来......
  • TreeMap
        ......
  • Redis源码之ZipList压缩列表
    List(版本3.2之前)、Hash和SortedSet这三种数据类型,都可以使用压缩列表(ziplist)来保存数据。新版本Redis的quickList底层也是采用zipList支持,Redis版本更新频繁,本文不保证时效性。 一、ziplist结构ziplist是一个特殊双向链表,不像普通的链表使用前后指针关联在一起,它是存储......
  • 同城外卖系统源码技术分享:从设计到部署
    随着移动互联网的普及和外卖市场的快速发展,同城外卖系统成为了人们日常生活中不可或缺的一部分。所以,这些服务的背后则需要有一套完善的同城外卖系统,并且这个系统的设计和部署是至关重要的。本文将结合同城外卖系统源码,从设计到部署的角度,分享一些技术经验和实践方法。一、系统设计......
  • 轻量级人工在线客服系统源码-开源版-修改客服账号问题
    早期的开源版客服源码,最近又重新更新了下功能,修复了一些BUG访客聊天的时候,会在聊天链接里指定沟通的客服账号,这个账号在后台可以修改。当修改账号以后,访客表和消息表并没有跟着一起修改,会出现修改了账号名称后,旧的访客以及消息数据就查询不到了 现在,修复这个问题,修改账号以后......
  • 互联网医院源码|互联网平台搭建包含哪些功能?
    信息时代下,高新技术逐渐融入到我们生活中的方方面面,不论是吃喝玩乐还是交通出行等等体验都可以看到信息技术所带来的便捷,其中也包括了医疗行业,互联网医院系统的出现改善了我们的就医环境,一般去医院都需要挂号,而针对用户的挂号需求,互联网医院源码开发提供便捷的挂号功能,这样的方式可......
  • UVa 112 Tree Summing (scanf()去空格&递归&二叉树遍历)
    112-TreeSummingTimelimit:3.000secondshttp://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem&problem=48BackgroundLISPwasoneoftheearliesthigh-levelprogramminglanguagesand,withFORTRAN,isoneoft......
  • java项目 学生成绩管理系统 (源码+数据库文件)
    ​ 需要的私信我备注来意:项目名称来了就点个赞再走呗,即将毕业的兄弟有福了文章底部获取源码java项目  学生成绩管理(源码+数据库文件)技术框架:java+springboot+vue+mysql后端框系统共分为三种用户系统主要功能:系统设计三个角色,学生端,教师端,系统管理员端一、系统运行......