【问题标题】:Is there a way to only show parent nodes in a extjs tree有没有办法只在 extjs 树中显示父节点
【发布时间】:2012-03-08 10:42:13
【问题描述】:

我想在 extjs 中只显示树的父节点。在我的数据存储中也有叶节点。

输出应该像 -

文件夹 1 文件夹 1.1 文件夹 2 文件夹 3

【问题讨论】:

    标签: javascript html tree treeview extjs4


    【解决方案1】:

    创建一个只获取父节点的过滤器对象并将其添加到存储配置中:

    例如仅过滤父节点:

    var nodeFilter = new Ext.util.Filter({
        property: 'leaf',
        value   : false
    });
    

    将它放在树存储配置中:

    var yourTreeStore = Ext.create('Ext.data.TreeStore', {
        // other configs ...
        filters: [nodeFilter]
    });
    

    编辑:

    incutonez 是对的,我根据 API 属性提交但没有注意到缺少的功能。尽管它们很容易覆盖,但可以对树存储应用过滤。这在 4.1b2 中对我有用:

    Ext.override(Ext.data.TreeStore, {
    
        hasFilter: false,
    
        filter: function(filters, value) {
    
            if (Ext.isString(filters)) {
                filters = {
                    property: filters,
                    value: value
                };
            }
    
            var me = this,
                decoded = me.decodeFilters(filters),
                i = 0,
                length = decoded.length;
    
            for (; i < length; i++) {
                me.filters.replace(decoded[i]);
            }
    
            Ext.Array.each(me.filters.items, function(filter) {
                Ext.Object.each(me.tree.nodeHash, function(key, node) {
                    if (filter.filterFn) {
                        if (!filter.filterFn(node)) node.remove();
                    } else {
                        if (node.data[filter.property] != filter.value) node.remove();
                    }
                });
            });
            me.hasFilter = true;
    
        },
    
        clearFilter: function() {
            var me = this;
            me.filters.clear();
            me.hasFilter = false;
            me.load();
        },
    
        isFiltered: function() {
            return this.hasFilter;
        }
    
    });
    

    在您的代码中使用此覆盖,您可以根据Ext.util.Filter API 创建一个“仅叶子”过滤器作为函数或属性/值对:

    // leaf only filter as a property/value pair
    var nodeFilter = new Ext.util.Filter({
        property: 'leaf',
        value   : false
    });
    
    // leaf only filter as a function
    var nodeFilter = Ext.create('Ext.util.Filter', {
      filterFn: function(item) {
        return !item.data.leaf;
      }
    });
    

    你可以在任何时候调用过滤函数来取出叶节点:

    myTreeStore.filter(nodeFilter);
    

    【讨论】:

    • +1 非常优雅。我打算建议在服务器端控制它。
    【解决方案2】:

    TreeStores 不继承过滤(因为它们是抽象存储),所以 Geronimo 的回答对我不起作用。我希望这样做,因为它会让我的生活变得更轻松。

    无论如何,我在 Sencha 论坛上有一个thread,它提供了一个工作过滤解决方案。在我的示例中,过滤由 filterBy 函数调用,所以我相信您可以调整它以按照自己的方式工作。

    【讨论】:

    • 你说得对,我只是通过 API 完成的,但没有注意到缺少的功能。我添加了一个在 4.1b2 中运行良好的覆盖,我知道在 4.07 和 4.1 之间对 treestore 进行了一些更改,但它可能会为您提供更动态的树过滤器覆盖。
    猜你喜欢
    • 2021-09-08
    • 2021-02-15
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-09-12
    • 2020-10-31
    相关资源
    最近更新 更多