You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

FilteredListMixin子项过滤失效:dojo/store/Memory是否支持递归查询?

关于Dojo FilteredListMixin层级数据过滤的问题解答

1. 官方文档表述的具体含义

当你的列表数据是层级结构(比如每个顶层项带有children属性,包含子项数组,像Fruits下面有Apple、Banana这类子项),要实现搜索时能匹配到子项,你的数据存储必须具备递归遍历并检查所有嵌套子项的能力。简单来说:FilteredListMixin是依赖store的查询结果来渲染列表的,如果store的query方法只检查顶层对象的属性,那自然搜不到子项;只有store能递归深入每个项的children数组,判断是否有符合搜索条件的子元素,才能让FilteredListMixin展示包含匹配子项的父项,或者直接展示匹配的子项(取决于你的需求)。

2. dojo/store/Memory是否支持递归搜索?

默认情况下不支持。Memory store的原生query方法只会遍历顶层的数据对象,不会自动深入children或其他嵌套属性里进行匹配。所以你直接用默认的Memory store,只能搜索到顶层的header(比如Fruits、Electronics),子项的内容搜不到。

3. 实现子项过滤需要补充的配置/代码

要让层级数据支持子项搜索,你需要扩展Memory store,重写它的query方法,加入递归匹配的逻辑。这里给你一个常见的实现思路:

步骤1:扩展Memory store,添加递归查询逻辑

define([
    'dojo/store/Memory',
    'dojo/_base/array'
], function(Memory, array) {
    return Memory.extend({
        // 重写query方法,支持递归搜索children
        query: function(query, options) {
            // 先获取所有顶层数据
            var allItems = this.data;
            // 递归筛选符合条件的项(包括父项如果子项匹配的情况)
            var filteredItems = array.filter(allItems, function(item) {
                return this._matchItem(item, query);
            }, this);
            
            // 处理排序等options(可选,根据你的需求)
            if (options && options.sort) {
                filteredItems = array.sort(filteredItems, options.sort);
            }
            
            return filteredItems;
        },
        
        // 递归检查当前项或其子项是否匹配查询条件
        _matchItem: function(item, query) {
            // 先检查当前项是否匹配查询(这里做了大小写不敏感的模糊匹配,可根据需求调整)
            var matches = true;
            for (var key in query) {
                if (!item[key].toLowerCase().includes(query[key].toLowerCase())) {
                    matches = false;
                    break;
                }
            }
            if (matches) {
                return true;
            }
            
            // 如果当前项不匹配,检查子项
            if (item.children && item.children.length > 0) {
                return array.some(item.children, function(child) {
                    return this._matchItem(child, query);
                }, this);
            }
            
            return false;
        }
    });
});

步骤2:在FilteredListMixin中使用自定义的Memory store

把原来引入的dojo/store/Memory替换成你上面扩展的store,这样当你输入搜索关键词时,store会递归检查所有子项,返回包含匹配子项的父项(或者直接匹配的项,取决于你_matchItem的逻辑),FilteredListMixin就能正确渲染出符合条件的层级内容了。

额外说明

如果你需要更灵活的过滤(比如只显示匹配的子项,同时保留父层级路径),可以修改_matchItem的逻辑,不仅判断是否匹配,还能构建新的层级结构,只保留匹配的子项和对应的父节点。

内容的提问来源于stack exchange,提问作者klng

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.05.28 03:57:17