在没有商店的情况下使用带有选择器列插件的Dojo dgrid?

时间:2012-05-16 07:47:18

标签: javascript dojo widget dgrid

是否可以使用由数组支持的Dojo dgrid小部件(而不是数据存储区)和复选框来选择行?

我成功启动了基于阵列的基本dgrid,然后添加了Selection mixin以启用行选择。所以现在我有一个由数组支持的dgrid并允许行选择。但是,当我尝试通过selector column plugin添加复选框时,出现错误: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);
    }
);

1 个答案:

答案 0 :(得分:4)

这就是我最终要做的事情:我将数据数据包装在Dojo Memory存储中,该存储具有一个接受新数据数组的setData()方法。主要变化:

  • 使用OnDemandGrid而不是Grid
  • 将数据数组包装在Dojo Memory存储对象中
  • 更新网格存储以更新数据数组
  • 调用网格的刷新方法()

完整代码:

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

请注意,选择器插件是另一个column plugin,其工作方式与编辑器插件不同。