Dojo dgrid：（预）在渲染时选择行答案

【问题标题】：Dojo dgrid: (Pre) Select row on renderDojo dgrid：（预）在渲染时选择行
【发布时间】：2013-01-23 07:54:38
【问题描述】：

如何配置 dgrid 和它的 store 来定义在渲染行时是否已经选择了行？

例如，如果我的行数据是这样的：

{
  id: 1,
  name: 'Item Name',
  selected: true
}

我当前的代码是在商店被填充后循环遍历集合，但我确信必须有更有效的方法来做到这一点。

var items = [
  {id: 1, name: 'Item 1', selected: true},
  {id: 2, name: 'Item 2', selected: false}
];

require(
  [
    "dgrid/OnDemandGrid",
    "dgrid/Selection",
    "dojo/store/Memory",
    "dojo/_base/declare",
    "dojo/_base/array"
  ],

  function (OnDemandGrid, Selection, Memory, declare, array) {
    var store = new Memory({
        data: items,
        idProperty: "id"
    });

    var grid = new declare([OnDemandGrid, Selection])({
        selectionMode: "multiple",
        columns: {
          id: { label: "ID" },
          name: { label: "Name" }
        },
        store: store
      }, "MyGrid");

      array.forEach(items, function (item) {
        if (item.selected) {
          grid.select(grid.row(item.id));
        }
      });

      grid.startup();
    });
  }
);

【问题讨论】：

标签： select dojo dgrid

【解决方案1】：

似乎Selection.js 的做法与https://github.com/SitePen/dgrid/blob/master/Selection.js#L433 相同，但我刚刚有了一个想法，如何让选择成为渲染过程的一部分：

var grid = new declare([OnDemandGrid, Selection])({
    selectionMode: "multiple",
    store: store,
    columns: {
        id: {
            label: "ID",
            get: function(item) {
                var grid = this.grid;
                if (item.selected === true) {
                    grid.select(grid.row(item.id));
                }
                return item.id;
            }            
        },
        name: { label: "Name" }
    },
    "MyGrid"
);

查看实际操作：http://jsfiddle.net/phusick/stxZc/

【讨论】：

成功了。请注意，对于其他人，如果他们使用 dgrid/selector，则应将 get 方法添加到选择器对象而不是常规列，因为即使该行也不会检查复选框/单选被选中。

【解决方案2】：

我找到了这篇文章，并想就这个问题做出承诺。我想获取 dgrid 中的第一行数据，这就是我找到这篇文章的地方。但它对我的解决方案有所帮助。

在第一列中，我添加了一个“获取”功能，并且能够找到并选择第一条记录。我希望这对任何试图获取或选择 dgrid 中的第一条记录的人有所帮助。

var columns = [
  { label: "Name", field: '_item', x: null,
    formatter: lang.hitch(this, this._nameFormatter),
    get: lang.hitch(this, function(item){
        console.log(item)
        if(!this.x) {
          this.x = item.id;
          this.grid.select(item.id);
          this.detailsPane.setDetails(item.id);
          return item;
        } else {
          return item;
        }
      })
    },

   { label: 'Email', field: 'email',
     formatter: lang.hitch(this, this._emailFormatter)
   },

   { label: "Phone", field: "phone" },
   { label: 'Address', field: 'address' },
   { label: 'City', field: 'city' },
   { label: 'State', field: 'state' },
   { label: 'Zip Code', field: 'zipcode'}
];

【讨论】：