0

行を選択するためのチェックボックスを備えた（データストアではなく）配列に裏打ちされたDojo dgridウィジェットを使用することは可能ですか？

基本的な配列に裏打ちされたdgridから始めて、行選択を有効にするためにSelectionミックスインを追加しました。これで、配列に支えられて行を選択できるdgridができました。ただし、セレクター列プラグインを介してチェックボックスを追加しようとすると、エラーが発生します。this.store is undefined.

this.storeは、選択された行を識別するために使用されると判断しました。グリッドの選択を照会したときに返される結果に直接相関するthis.store.getIdentity（rowObject）メソッドへの呼び出しがいくつかあります。

ストアの代わりにオブジェクトの配列を使用する場合、選択した行を識別するために特定の列フィールドを指定することは可能ですか？以下のコードのWORKAROUND_STOREはこれを効果的に実行しますが、次のようなプロパティを設定するような単純な解決策が欠落している可能性selector({idProperty: 'col1'}).があります。

require(["dgrid/Grid",
         "dgrid/selector",
         "dgrid/Selection",
         "dojo/_base/declare"],
    function(Grid, selector, Selection, declare){

        var columns = {
            col1: selector({}),
            col2: {label: 'COL2'},
            col3: {label: 'COL3'},
        };

        var data = [
            { col1: '1', col2: 'A', col3: 'I'},
            { col1: '2', col2: 'B', col3: 'II'},
            { col1: '3', col2: 'C', col3: 'III'}
        ];

        WORKAROUND_STORE = {
            getIdentity: function(item) { return item.col1 }
        }

        var SelectionGrid = declare([Grid, Selection]);
        window.methodGrid = new SelectionGrid({
            store: WORKAROUND_STORE,
            columns: columns,
            selectionMode: "none",
            allowSelectAll: true
        }, "methodGridDiv");
        window.methodGrid.renderArray(data);
    }
);
4

1 に答える 1

4

最終的に行ったことは次のとおりです。データ配列をDojoメモリストアにラップしました。このストアには、新しいデータ配列を受け入れるsetData（）メソッドがあります。主な変更点：

  • グリッドの代わりにOnDemandGridを使用する
  • データの配列をDojoメモリストアオブジェクトにラップします
  • グリッドのストアを更新して、データの配列を更新します
  • グリッドのrefreshメソッド（）を呼び出します

完全なコード：

require(["dgrid/OnDemandGrid",
         "dgrid/selector",
         "dgrid/Selection",
         "dojo/_base/declare",
         "dojo/store/Memory"],
    function(OnDemandGrid, selector, Selection, declare, Memory){

        var columns = {
            col1: selector({}),
            col2: {label: 'COL2'},
            col3: {label: 'COL3'},
        };

        var data = [
            { col1: '1', col2: 'A', col3: 'I'},
            { col1: '2', col2: 'B', col3: 'II'},
            { col1: '3', col2: 'C', col3: 'III'}
        ];

        var SelectionGrid = declare([OnDemandGrid, Selection]);
        window.methodGrid = new SelectionGrid({
            store: Memory({idProperty: 'methodId'}),
            columns: columns,
            selectionMode: "none",
            allowSelectAll: true
        }, "methodGridDiv");
        window.methodGrid.store.setData(data);
        window.methodGrid.refresh();
    }
);

以下に応じて更新します。

実際にそこにチェックボックスがありましたか？コードスニペットには表示されません。

チェックボックスを追加するコードは次のとおりcol1: selector({})です。またはより明確に：col1: selector({selectorType: 'checkbox'})

セレクタープラグインは別の列プラグインであり、エディタープラグインとは動作が異なることに注意してください。

于 2012-08-20T06:06:36.157 に答える