MudBlazor DataGrid 筛选从1行属性到完全自定义【免费下载链接】MudBlazorBlazor Component Library based on Material Design principles. Do more with Blazor, utilizing CSS and keeping JavaScript to a bare minimum.项目地址: https://gitcode.com/GitHub_Trending/mu/MudBlazorMudBlazor 是基于 Material Design 的 Blazor 组件库它的数据表格MudDataGrid内置了从逐列筛选到跨列全局搜索的筛选能力。读完这篇你可以用1行属性开启数据表格筛选也能在需要时把筛选面板换成自己写的 UI全程不用手写过滤逻辑。30秒启用 MudDataGrid 基础筛选默认情况下表格是不响应筛选的Filterable为false。你只要把它打开剩下的事组件都替你做了MudDataGrid TOrder Items_orders Filterabletrue RowsPerPage10 Columns PropertyColumn Propertyo o.Customer / PropertyColumn Propertyo o.Amount / /Columns /MudDataGrid没有一行业务代码。保存后刷新每列表头都会多一个漏斗图标点它输入关键词表格实时过滤。如果某列不想参与筛选比如序号列在这列上加Filterablefalse即可表格级的开关可以被单列覆盖。三种 FilterModeSimple / ColumnFilterRow / ColumnFilterMenu 什么时候切筛选面板长什么样由FilterMode决定。三种形态各有一类最适合的场景Simple默认所有列的条件收进同一个浮层点任意一列的漏斗都能编辑全部条件。列不多、条件之间需要联动着看时用它。ColumnFilterRow表头下方常驻一行输入框每列一个当前条件一目了然。筛选是高频操作的后台页面选它。ColumnFilterMenu每列各自弹一个小菜单只影响当前列。列很多、条件互不相干的宽表选它。MudDataGrid TOrder Items_orders Filterabletrue FilterModeDataGridFilterMode.ColumnFilterRow !-- 列定义同上 -- /MudDataGrid我的建议是先保持默认 Simple 跑一遍等用户开始抱怨看不到其他列的条件再切。⚠️ 切换模式会丢掉已有筛选条件官方示例切换后都调用了ClearFiltersAsync()你也可以照着做避免带着旧条件进新模式。内置筛选不够用时FilterTemplate 自定义筛选什么时候才需要它两种情况某一列想要下拉多选而不是文本框或者你想把整个筛选面板做成客户 日期范围这种组合表单。列级在列里放FilterTemplate模板里能拿到context用它读写该列的筛选定义。比如把状态列换成多选框PropertyColumn Propertyo o.Status Title状态 FilterTemplate MudSelect Tstring MultiSelectiontrue SelectedValues_status SelectedValuesChanged(v SetStatus(context, v)) Label状态 Clearabletrue MudSelectItem ValuePaidPaid/MudSelectItem MudSelectItem ValueShippedShipped/MudSelectItem /MudSelect /FilterTemplate /PropertyColumn选中后要把值写回筛选定义再触发应用多选时挂一个FilterFunction做包含判断更稳private Task SetStatus(FilterContextOrder ctx, IEnumerablestring values) { var def (FilterDefinitionOrder)ctx.FilterDefinition!; def.Value values.ToList(); def.FilterFunction o values.Contains(o.Status); return ctx.Actions.ApplyFilterAsync(ctx.FilterDefinition!); }表格级MudDataGrid自己也有一个FilterTemplate可以整个替换筛选面板。你通过ref拿到表格实例输入变化后调grid.AddFilterAsync(...)写入条件点完成调grid.CloseFilterAsync()关闭完整写法官方文档示例里可以直接抄。QuickFilter跨列全局搜索怎么做逐列筛选解决精确条件QuickFilter 解决我就是要搜个关键字。它和列筛选是 AND 关系一行数据要同时通过列筛选和你的谓词才会显示两者互补不冲突。⚠️ 先记牢QuickFilter的类型是FuncT, bool是谓词函数不是字符串。把文本框的string值直接绑上去是编译不过的。正确姿势是传一个 lambda并在文本框上加Immediatetrue让它逐字触发MudTextField bind-Value_keyword Label快速筛选 Immediatetrue / MudDataGrid TOrder Items_orders QuickFilter(item _keyword is null || item.Customer.Contains(_keyword, StringComparison.OrdinalIgnoreCase)) !-- 列定义同上 -- /MudDataGrid注意这里没写Filterabletrue——QuickFilter 独立工作列筛选开不开都不影响它。踩坑这三件事别做别自己预过滤 Items。先在外面Where(...)一遍再交给表格会和内置筛选叠成双重过滤条件互相打架排查起来很痛苦。表格负责过滤你只负责给它完整数据。别在 QuickFilter 谓词里做重活。它会对每一行重复执行里面只做一次字符串比较就好输入侧用DebounceInterval防抖大列表再配合分页或虚拟滚动。别忽略大小写设置。字符串列筛不到数据用户常反馈明明有这条记录却搜不到先查FilterCaseSensitivity的取值再查数据源。一句话选型九成页面Filterabletrue加默认 Simple 就够用有固定下拉或范围条件就上列级 FilterTemplate要全局搜索词就挂 QuickFilter。想深入细节翻 MudDataGrid 源码 和 官方文档的 DataGrid 示例页参数注释都在里面。【免费下载链接】MudBlazorBlazor Component Library based on Material Design principles. Do more with Blazor, utilizing CSS and keeping JavaScript to a bare minimum.项目地址: https://gitcode.com/GitHub_Trending/mu/MudBlazor创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考