Question

我对dojo相对较新，并且已经看到了datagrid如何提供动态过滤功能，根据您在过滤器文本输入中键入的内容减少可见行。我还没有找到任何如何使用dgrid做的例子。如果可以，请提供示例或指向我提供教程或示例的资源。谢谢！

Answer 1

是的，有可能。使用dgrid/OnDemandGrid并定义query函数，该函数将根据true为网格供电的每一行的逻辑返回false或dojo/store。

我在jsFiddle：http://jsfiddle.net/phusick/7gnFd/准备了一个与一起玩的例子，所以我不必解释太多：

enter image description here

查询功能：

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");

Answer 2

我知道这不是问题的答案，所提供的答案很有用，而且我们使用它很多。

但是，如果您使用的是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);
                }
            }

是否可以像在数据网格中一样过滤dgrid中的数据？如果是这样，怎么样？

2 个答案: