使用带有选择器列插件的 Dojo dgrid，无需存储

Using Dojo dgrid with selector column plugin without a store?

本文关键字：dgrid Dojo 存储 插件 选择器      更新时间：2023-09-26

是否可以使用由数组(而不是数据存储(支持的 Dojo dgrid 小部件来选择行？

我成功地从一个基本的数组支持的 dgrid 开始，然后添加了 Select mixin 以启用行选择。所以现在我有一个由数组支持并允许行选择的 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);
    }
);

这是我最终所做的：我将我的数据数组包装在 Dojo 内存存储中，该存储有一个接受新数据数组的 setData(( 方法。主要变化：

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

完整代码：

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

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

相关文章：