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

Question

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

Answer 1

对的，这是可能的。使用dgrid/OnDemandGrid和定义query函数，该函数将返回true或false基于您为dojo/store电网供电的每一行的逻辑。

我准备了一个在 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");

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