MudBlazor 数据表格筛选：从列筛选到全局搜索

MudBlazor 数据表格筛选从列筛选到全局搜索【免费下载链接】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后台系统里最常见的抱怨之一几千行数据的表格业务方天天问能不能直接搜。MudBlazor 数据表格筛选不需要你手写过滤循环——MudDataGridMaterial Design 风格的数据表格组件把筛选 UI 和筛选逻辑都内置了你要做的只是选对档位列筛选、组合筛选还是全局搜索三档各管一段。1 行属性打开列筛选开关这节解决最小改动让表格可搜的问题。Filterable默认是false打开后每个可筛选列的标题旁会出现筛选图标点开是内置输入框输入即过滤。MudDataGrid TElement Items_elements Filterabletrue !-- 列定义略 -- /MudDataGrid效果字符串列默认按包含匹配分页基于筛选后的数据重算不用你处理。哪列不想被筛比如自增编号列在该列声明上单独写Filterablefalse关掉即可。Simple 还是 ColumnFilterRow先看懂 3 种 FilterMode这节解决筛选入口长在哪、怎么选的问题。FilterMode取值是DataGridFilterMode枚举源码在 DataGridFilterMode.cs一共 3 个值含义由注释写死Simple默认所有列的筛选器收纳在同一个弹出面板popover里标题行保持干净列多时不拥挤ColumnFilterRow筛选 UI 直接作为表格的一行渲染出来所有条件常驻可见多条件组合时不用反复点开弹层ColumnFilterMenu每列各自一个弹出菜单点哪列才展开哪列适合筛选条件多但每列只需单条件、不想占整行的情况。MudDataGrid TElement Items_elements Filterabletrue FilterModeDataGridFilterMode.ColumnFilterRow !-- 列定义略 -- /MudDataGrid选 Simple 的理由是筛完就走的日常查询选后两者的理由是用户需要同时盯住多个已生效的条件。字符串列的大小写行为可用FilterCaseSensitivity参数调整默认大小写敏感。给单列换 UIFilterTemplate 覆盖内置输入框这节解决这一列不适合用文本框筛的问题——比如分组、状态这种离散取值多选下拉比输入框顺手得多。内置筛选器是按列可替换的在某一列内部写FilterTemplate只覆盖这一列其余列照旧。PropertyColumn Propertyx x.Group TitleCategory FilterTemplate MudSelect Tstring MultiSelectiontrue Densetrue SelectedValuesGetFilterValues(context.FilterDefinition) SelectedValuesChanged(v SetColumnFilterValues(context, v)) !-- 选项略 -- /MudSelect /FilterTemplate /PropertyColumn它替你做的分工context携带当前列的筛选定义SetColumnFilterValues把选中值写回表格筛选计算仍由MudDataGrid完成。你只负责渲染控件不用碰过滤逻辑本身。QuickFilter一个谓词接管全局搜索这节解决跨所有列的关键词搜索问题。QuickFilter不是字符串而是一个FuncT, bool谓词源码见 MudDataGrid.razor.cs表格对每行调用它返回true的行保留。MudDataGrid TElement Items_elements Filterabletrue QuickFilter_quickFilter RowsPerPage20 !-- 列定义略 -- /MudDataGrid code { private string _quickFilter; private FuncElement, bool _quickFilter _ true; private void OnQuickFilterChanged(string value) _quickFilter e e.Name.Contains(value) || e.Molar 80; }效果一个入口同时覆盖按名称搜和按阈值筛两种需求。判断依据很直接——需要任意列都能搜的入口时才上它只筛某一列的话列级筛选已经够用。 注意它和内置列筛选是并行的别在谓词里重复写一遍列筛选的逻辑。按场景对号入座这节解决我的业务该用哪档的问题。对号原则一句话单列关键词→Filterable默认模式多条件同时生效→ColumnFilterRow/ColumnFilterMenu跨列统一入口→QuickFilter谓词。方式筛选粒度UI 形态适合场景Filterable Simple单列/单值标题旁图标点开统一面板后台管理的日常查询Filterable ColumnFilterRow多列组合表格内常驻筛选行报表式多条件组合筛选Filterable ColumnFilterMenu单列每列独立弹出菜单条件多但不想占纵向空间QuickFilter 谓词全表跨列你自己放的搜索框数据检索的统一全局搜索选型速查与 3 条避坑提示先开Filterable别先上QuickFilter——多数要能搜的需求列筛选 分页已经解决QuickFilter与内置列筛选各管一套逻辑谓词里别重复实现列筛选行为会互相干扰列级Filterablefalse是白名单思维编号、时间戳这类没人按它筛的列主动关掉标题行图标更少也更安静。组件的完整参数以 API 文档为准示例代码集中在 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），仅供参考