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

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

dojox.grid.DataGrid 组件还提供了一些方法,使用者利用这些方法可以进一步丰富表格的表现体验。

参考自:http://www.educity.cn/wenda/370866.html


  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 对象)

另外:Enter键也能触发 onRowClick 事件。
不过这里有个Bug,上下键移动时,选择行不会跟随,这时候按下Enter时 e.rowIndex === undefined。后面会介绍如何解决这个Bug。
(改进的 EnhancedGrid 上下键移动时,选择行会跟随)
8. 行选择事件 onSelected (参数: row index)
如果选择行发生变化时会被触发。
9. 单元格点击事件 onCellClick (参数: Event 对象)

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"$amp;>amp;$lt;/colgroup> <colgroup span="6"$amp;>amp;$lt;/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$amp;>amp;$lt;br/$amp;>amp;$lt;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点击时触发下面的方法。
  var cacheCheck = false; 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); } cacheCheck = checkbox.checked; }

注意:在表格列宽变化时(即拖拽调整列宽)会导致Grid重绘,因此上面用 cacheCheck 来保持表头的Checkbox的checked状态。
在 onResizeColumn 实际中设置回去。

继续补充中
-- 本章结束 --

相关文章

我有一个网格,可以根据更大的树结构编辑小块数据.为了更容易...
我即将开始开发一款教育性的视频游戏.我已经决定以一种我可以...
我正在使用带有Grails2.3.9的Dojo1.9.DojoNumberTextBox小部...
1.引言鉴于个人需求的转变,本系列将记录自学arcgisapiforja...
我正在阅读使用dojo’sdeclare进行类创建的语法.描述令人困惑...
我的团队由更多的java人员和JavaScript经验丰富组成.我知道这...