dojo - データグリッドでできるように、dgridでデータをフィルタリングすることは可能ですか？もしそうなら、どのように？

Question

私はdojoに比較的慣れておらず、datagridが、フィルターテキスト入力に入力した内容に基づいて表示される行を減らす動的フィルタリング機能をどのように提供するかを見てきました。dgridでそれを行う方法の例は見つかりませんでした。可能であれば、例を提供するか、チュートリアルまたは例を提供するリソースを教えてください。ありがとう！

Answer 1

はい、可能です。グリッドに電力を供給する際に、各行のロジックを返すか、ロジックに基づいて返す関数を使用dgrid/OnDemandGridして定義します。querytruefalsedojo/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);
                }
            }