最近更新一个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