Question

我正在使用 Dojo Dgrid，但我正在尝试添加一个复选框列，但我不确定该方法。

我一直在寻找的大多数教程遵循不同的代码结构，我无法创建复选框列。我想创建一个复选框列来选择行

代码（这里也是我的代码Fiddle）

需要（[
....................... “道场/ domready中！”

], function(parser, declare, Grid, ColumnSet, Selection, selector,Keyboard, DijitRegistry){
      parser.parse();

      var data = [
            { first: "Tom", last: "Evans" },
            { first: "Sherry", last: "Young"},
            { first: "Bob", last: "William"}
        ];

      var columns =     [
          [[
              {editor({name: "CheckBox", field: "bool"}, "checkbox")},
              { field: "first", label: "First" },
            { field: "last", label: "Last" }]]
                        ];           

      var CustomGrid = declare([Grid, ColumnSet, Selection, Keyboard, DijitRegistry]);




      var grid = new CustomGrid ({
            columnSets: columns ,
            "class":"grid"
        }, "grid");
     grid.renderArray(data);   
});

Answer 1

如果您希望列中包含用于选择行的复选框，则应将目标设置在selector列插件而不是editor上。 selector专门设计用于在每个单元格中呈现复选框（或单选按钮），以便在选中时绑定到Selection mixin。

请参阅documentation in the wiki和selector test page。

Answer 2

你也可以测试这个解决方案

首先，您必须在require（[]）部分

中添加此模块

"dgrid/extensions/ColumnResizer",
               "esri/request", "dgrid/OnDemandGrid", "dgrid/Selection", "dojo/store/Memory", "dgrid/selector",

然后定义此数组以保存列

 var columnsPol = [];

然后将复选框类型列添加到数组，将任何其他类型列添加到数组

 columnsPol.push(
             selector({ label: selector({}), selectorType: "checkbox" })
            );

columnsPol.push({
                label: "",
                field: {any  name},
                formatter: {a  function  for  formatting value  of cell},
                width: "auto",
                });

                .
                .
                .

然后定义您的网格并设置属性

var gridPol = new (declare([Grid, ColumnResizer, Selection]))({
     store: {your data},
     columns: columnsPol,
     minRowsPerPage: 40,
     maxRowsPerPage: 40,
     keepScrollPosition: true,
     selectionMode: 'none',
     allowSelectAll: true,
     loadingMessage: "Loading data...",
     noDataMessage: "No results found."
 }, {Id  for grid});
 gridPol.refresh();

然后您可以选择和取消选择行

 gridPol.on("dgrid-select", function (event) {
           var selectedRows = event.rows;
           });

并取消选择

 gridPol.on.on("dgrid-deselect",function (event){
            var deselectedRows = event.rows;
            });

Dojo DataGrid（DGrid）添加复选框列

2 个答案: