dojo 有没有可能像在数据网格中一样在数据网格中过滤数据?如果有,怎么做?

guicsvcw  于 2022-12-16  发布在  Dojo
关注(0)|答案(2)|浏览(113)

我对dojo比较陌生,并且已经看到datagrid如何提供动态过滤功能,根据您在过滤器文本输入中键入的内容来减少可见行。我还没有找到任何关于如何使用dgrid的示例。如果可以做到,请提供一个示例,或者给我一个提供教程或示例的资源。谢谢!

lsmepo6l

lsmepo6l1#

是的,这是可能的。使用dgrid/OnDemandGrid并定义query函数,该函数将根据dojo/store中为网格供电的每一行的逻辑返回truefalse
我准备了一个例子在jsFiddle上使用http://jsfiddle.net/phusick/7gnFd/,所以我不必解释太多:

查询功能:

var filterQuery = function(item, index, items) {
    var filterString = filter ? filter.get("value") + "" : "";

    // early exists
    if (filterString.length < 2) return true;
    if (!item.Name) return false;

    // compare
    var name = (item.Name + "").toLowerCase();
    if (~name.indexOf(filterString.toLowerCase())) { return true;}

    return false;
};

网格:

var grid = new Grid({
    store: store,
    query: filterQuery, // <== the query function for filtering
    columns: {
        Name: "Name",
        Year: "Year",
        Artist: "Artist",
        Album: "Album",
        Genre: "Genre"
    }
}, "grid");
yzckvree

yzckvree2#

我知道这不是问题的答案,提供的答案是熟练的,我们使用它相当多。
但是,如果您使用的是TreeGrid,则此功能似乎根本无法正常工作(带有“dgrid/tree”插件的列)。我写了一些代码来模拟与使用树型网格接受答案相同的行为。基本上就是遍历商店中的项目,并隐藏任何不符合您设定的条件的行元素。我想我会分享它,以防对任何人有帮助。它相当难看,我相信它可以改进,但它的工作。
它基本上使用了与phusick的答案相同的概念,你需要查看TextBox上的一个值,但是你让它调用一个函数,而不是刷新网格:

textBox.watch("value", lang.hitch(this, function() {
                        if (timeoutId) {
                            clearTimeout(timeoutId);
                            timeoutId = null;
                        };

                        timeoutId = setTimeout(lang.hitch(this, function() {
                            this.filterGridByName(textBox.get('value'), myGrid);
                        }, 300));
                    }));

下面是函数:

filterGridByName: function(name, grid){
                try {
                        for (var j in grid.store.data){
                            var dataItem = grid.store.data[j];
                            var childrenLength = dataItem.children.length;
                            var childrenHiddenCount = 0;
                            var parentRow = grid.row(dataItem.id); 
                            for (var k in dataItem.children){

                                var row = grid.row(dataItem.children[k].id);
                                var found = false;
                                if (dataItem.children[k].name.toLowerCase().indexOf(name.toLowerCase()) != -1){
                                    found = true;
                                }
                                if (found){
                                    if (row.element){
                                        domStyle.set(row.element, "display", "block");
                                    }
                                    if (parentRow.element){
                                        domStyle.set(parentRow.element, "display", "block");
                                    }
                                } else {
                                    childrenHiddenCount++;
                                    // programmatically uncheck any hidden item so hidden items
                                    for (var m in grid.dirty){
                                        if (m === dataItem.children[k].id && grid.dirty[m].selected){
                                            grid.dirty[m].selected = false;
                                        }
                                    }
                                    if (row.element){
                                        domStyle.set(row.element, "display", "none");
                                    }
                                }
                            }
                            // if all of the children were hidden, hide the parent too

                            if (childrenLength === childrenHiddenCount){
                                domStyle.set(parentRow.element, "display", "none");
                            }
                        }
                } catch (err){
                    console.info("error: ", err);
                }
            }

相关问题