在dojo datagrid中选择后如何更新Row中的内容答案

【问题标题】：How to update content in Row after selection in dojo datagrid在dojo datagrid中选择后如何更新Row中的内容
【发布时间】：2012-05-30 03:15:15
【问题描述】：

我创建了一个道场数据网格。每列都附加了一个格式化程序。生成网格时，将调用格式化程序。现在我想要它，以便如果用户选择任何行，格式化程序将被调用，并且一些字符串应该附加到所选行的列元素。

就像网格是这样的：

COLUMN
-------
a

b

c

现在用户选择了第二行，网格应该变为：

COLUMN
-------
a

b SELECTED

c

目前我是这样实现的：

if(this.grid.selection.selectedIndex !== -1){
  retrun value + "SELECTED";
}else{
 return value;
}

您能否提出一些好的方法来做到这一点？请注意，不应将“SELECTED”字符串添加到网格存储中。

【问题讨论】：

标签： datagrid dojo selection

【解决方案1】：

格式化不与点击/选择行挂钩。它仅在设置单元格的内容（值）时执行。相反，您希望将焦点移到 onRowClicked - 网格组件上的事件。它的工作原理是这样的：

grid.onRowClick = onRowClickHandler;

我不知道以下哪个示例会让您最接近您的目标，但 onRowClickHandler 可以这样设置：

function onRowClickHandler(evt) {
    var rows = this.selection.getSelected();
    // perform cell rendering here
    dojo.forEach(rows, function(row) {
       // this row is an item though.. you will have row._O as its index
    });
}

或

function onRowClickHandler(e) {
   var cellClicked = this.focus.cell
   cellClicked.formatter();
}

但是您可能会发现在网格组件中的任何位置都没有太多对可查看数据的引用。您可以使用以下查询选择器来查找单元格数据并通过对每个值调用格式化程序来更新查看的 html。不过，您需要为自定义值设置的“拆卸”捕获先前的选择。

var prevSelectedRows = [];
function onRowClickHandler(evt) {
    var idx = this.selection.selectedIndex,
        rawRow = dojo.query(".dojoxGridRow:nth-child("+(idx+1)+")", this.domNode)[0],
        self = this;

    // perform resetting of viewable values
    dojo.forEach(prevSelectedRows, function(raw) {
      dojo.query('.dojoxGridCell', raw).forEach(function(cellDOM, i) {
        cellDOM.innerHTML = cellDOM.innerHTML.replace("SELECTED", "");
      });

    });
    prevSelectedRows = []; // reset prev selection
    // look into grid.view.content for methods on this
    // perform setting of viewable values (SELECTED)
    dojo.query('.dojoxGridCell', rawRow).forEach(function(cellDOM, i) {
        // this function might be of interest, lets see how it looks in console
        console.log(self.layout.cells[i].formatter);
        cellDOM.innerHTML = cellDOM.innerHTML + "SELECTED"
    });

    prevSelectedRows.push(rawRow);
}

【讨论】：