增强网格中的行选择

时间:2013-05-08 10:21:25

标签: dojo grid dojox.grid.datagrid

我是Dojo的新手,我遇到了一个让我完全陷入困境的问题。我正在使用增强型网格在Dojo中创建数据网格。

网格中的每一行都有一个复选框,可以使用该复选框选择行。该复选框已使用indirectselection插件实现。

现在,当我使用复选框选择一行时,一切正常。但是当我通过点击其他数据单元格选择一行时,该行不会被选中!

继承数据网格的JSP部分

<table  data-dojo-id="grid" data-dojo-type="dojox.grid.EnhancedGrid" plugins="{indirectSelection: {headerSelector:true}, filter: true,pagination: true}"
    data-dojo-props="store:icGrid, 
     clientSort:true "  formatterScope="myFormatters" 
    style="width: 100%; height: 20em;">
     <thead>
         <tr>
      <th width="25%" field="empNo"  formatter="formatLink">empNo</th>
      <th width="25%" field="name">name</th>
      <th width="25%" field="email">email</th>
      <th width="25%" field="phone">phone</th>
    </tr>
  </thead>
</table>

如果我删除引用间接选择的代码(plugins =“{indirectselection ...),当我点击其他数据单元格时,行会被选中(因为它们应该)。但我还需要indirectselection实现的复选框。

有没有办法在不取消行选择功能的情况下使间接选择工作?

看一下我将在下面链接的页面中的网格。我需要一个像那样工作的网格 (页面中带有复选框的最后一个网格)

http://dojotoolkit.org/documentation/tutorials/1.8/working_grid/demo/selector.php

5 个答案:

答案 0 :(得分:1)

我设法通过1.使用cellClick事件来侦听问题2.单击单元格时获取单元格的rowindex 3.将其设置为选中。

grid.on("CellClick", function(event)
    { 
        var rowId = event.rowIndex;
        grid.selection.setSelected(rowId, true);
        grid.render();
          }

grid.selection.getSelected();没有返回选定的行,我想知道这是否是兼容性问题?看起来当我使用indirectSelection插件时,行Select会以意想不到的方式运行。

答案 1 :(得分:0)

你听说过DGRID吗? 我想你应该检查一下。 道场确实非常好。

以下是一些有用的网站。

Dgrid Main webpage

Git hub Documentation

答案 2 :(得分:0)

使用下面的代码来监听网格选择并检查selectedRows返回的内容,并使用该行的索引toggleRow

dojo.connect(grid, "onRowClick", function(e) {
     var selectedRows= grid.selection.getSelected();
     grid.rowSelectCell.toggleRow(selectedRows[i], true);
});

答案 3 :(得分:0)

简单代码: - &#34; SelectionChanged&#34;`甚至可用。所以这样的代码: -

public int compare(Event e1, Event e2) {
    // nulls are equal
    if (e1 == null && e2 == null) {
        return 0;
    } 
    // A null is always less than anything.
    if (e1 == null) {
        return -1;
    }
    if (e2 == null) {
        return 1;
    }
    // null dates are equal
    if (e1.getDate() == null && e2.getDate() == null) {
        return 0;
    }
    // A null is always less than anything.
    if (e1.getDate() == null) {
        return -1;
    }
    if (e2.getDate() == null) {
        return 1;
    }
    // All present - use normal date comparison.
    return e1.getDate().compareTo(e2.getDate());
}

答案 4 :(得分:0)

&#34; SelectionChanged&#34;`甚至可用。所以这样的代码: -

grid.on("SelectionChanged", function(event)
    { 
        var rowId = event.rowIndex;
        grid.selection.setSelected(rowId, true);
        grid.render();
    }