自己動手，通過源碼找回 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和其他貢獻者，感謝開源。