dojox.grid.DataGrid 编程篇(2) -- 方法与事件

前端之家收集整理的这篇文章主要介绍了dojox.grid.DataGrid 编程篇(2) -- 方法与事件前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
dojox.grid.DataGrid 组件还提供了一些方法,使用者利用这些方法可以进一步丰富表格的表现体验。

1. 获取修改任一单元格的数据:
取得第3行,字段"f3"的值

var grid = dijit.byId("grid1");
var row = grid.getItem(3);
// 获取值
var value = grid.store.getValue(row,"f3");
// 修改值
grid.store.setValue(row,"f3","abc");
或者直接写为
var grid = dijit.byId("grid1");
var row = grid.getItem(3);
var value = row["f3"];
注意:默认情况下,每次修改值都会导致Grid该行刷新

2. 获取(取消)选中行
var grid = dijit.byId("grid1");
var selectedRows = grid.selection.getSelected();
var value = selectedRows[0]["f3"];
因为支持多选,所以 grid.selection.getSelected 返回的是选中的行数组。
// 获得选择的第一行
grid.selection.getFirstSelected();
// 清除所有选中行
grid.selection.deselectAll();
// 选中第n行
grid.selection.select(4);

3. 设置单元格焦点
// 设置第一行,第二列的单元格的焦点
grid.focus.setFocusIndex(0,1);

4. 将某一行显示在视图中
// 滚动显示出第4行
grid.scrollToRow(3);

5. 隐藏某一列
// 隐藏第五列
grid.layout.setColumnVisibility(4,false);

6. 改变行的显示 onStyleRow (参数:row对象)
dojo.connect(grid,"onStyleRow",function(row) {
   // 第二行背景设为红色
   if (row.index == 1) {
      row.customClasses += " redRow ";
   }
});
grid.resize();

<style type="text/css">
.redRow tr { background-color: red !important; }
</style>


7. 行点击事件 onRowClick (参数: Event 对象)
 dojo.connect(grid,"onRowClick",function(e) {
    alert(e.rowIndex);
 });

另外:Enter键也能触发 onRowClick 事件。
不过这里有个Bug,上下键移动时,选择行不会跟随,这时候按下Enter时 e.rowIndex === undefined。后面会介绍如何解决这个Bug。
(改进的 EnhancedGrid 上下键移动时,选择行会跟随)

8. 行选择事件 onSelected (参数: row index)
 dojo.connect(grid,"onSelected",function(index) {
    alert(index);
 });
如果选择行发生变化时会被触发。

9. 单元格点击事件 onCellClick (参数: Event 对象)
dojo.connect(grid,"onCellClick",function(e) {
   console.log("[" + e.rowIndex + "," + e.cellIndex + "]");
   //rowIndex=-1 为表头
   if (e.rowIndex < 0) return;
   e.cellNode.style.backgroundColor = "red";
});

10. 全选择的代码示例:
<table dojoType='dojox.grid.DataGrid' id='grid1' jsid='js_grid1' 
 style='border:1px #a8a8a8 solid;width:450px;height:200px;' store="getDataStore(10)"
 canSort='false' editable="true" selectionMode='extended' selectable="false" >
  <colgroup span="1" noscroll="true"></colgroup>
  <colgroup span="6"></colgroup>
 <thead>
    <tr>
      <th field="f0" cellStyles="text-align:center;" width="50px" editable="true" cellType="dojox.grid.cells.Bool" alwaysEditing="true">
        <div style="text-align:center;">
            <label for="chk">选择</label><br/><input type="checkBox" id="chk" onclick="changeAll(this)">
        </div>
      </th>
      <th field="f1" cellStyles="text-align:center;" width="100px" >列1</th>
      <th field="f2" cellStyles="text-align:center;" width="100px" >列2</th>
      <th field="f3" cellStyles="text-align:center;" width="100px" >列3</th>
      <th field="f4" cellStyles="text-align:center;" width="100px" >列4</th>
      <th field="f5" cellStyles="text-align:center;" width="100px" >列5</th>
      <th field="f6" cellStyles="text-align:center;" width="100px" formatter="addLink">列6</th>
    </tr>
</thead>
</table>
JavaScript:表头的CheckBox点击时触发下面的方法
function changeAll(checkBox) {
    var grid = dijit.byId("grid1");
    for(var i=0,row; (row=grid.getItem(i)); i++) {
        grid.store.setValue(row,"f0",checkBox.checked);
    }
}
注意:在表格列宽变化时(即拖拽调整列宽)会导致Grid重绘,因此上面用 cacheCheck 来保持表头的CheckBox的checked状态。
在 onResizeColumn 实际中设置回去。
 dojo.connect(grid,"onResizeColumn",function(cellIdx) {
     dojo.byId("chk").checked = cacheCheck;
 });


11. 变化通知
当使用编辑列的时候,可以利用数据源的变更通知
grid._isChanged = false;
dojo.connect(grid.store,"onSet",function(item,attr,oldVal,newVal) {
    if (oldVal == null)
        oldVal = "";
    if (oldVal != newVal) {
       	dojo.byId("divMsg").innerHTML = attr + ":" + oldVal + "->" + newVal;
       	grid._isChanged = true;
    }
});
-- 本章结束 --

猜你在找的Dojo相关文章