dojox.grid.DataGrid 编程篇(2) -- 方法与事件
来源:互联网 发布:张俊豪2017年网络春晚 编辑:程序博客网 时间:2024/06/05 03:57
dojox.grid.DataGrid 组件还提供了一些方法,使用者利用这些方法可以进一步丰富表格的表现体验。
2. 获取(取消)选中行
3. 设置单元格焦点
4. 将某一行显示在视图中
5. 隐藏某一列
6. 改变行的显示 onStyleRow (参数:row对象)
7. 行点击事件 onRowClick (参数: Event 对象)
另外:Enter键也能触发 onRowClick 事件。
不过这里有个Bug,上下键移动时,选择行不会跟随,这时候按下Enter时 e.rowIndex === undefined。后面会介绍如何解决这个Bug。
(改进的 EnhancedGrid 上下键移动时,选择行会跟随)
8. 行选择事件 onSelected (参数: row index)
9. 单元格点击事件 onCellClick (参数: Event 对象)
10. 全选择的代码示例:
在 onResizeColumn 实际中设置回去。
11. 变化通知
当使用编辑列的时候,可以利用数据源的变更通知:
-- 本章结束 --
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; }});
-- 本章结束 --
- dojox.grid.DataGrid 编程篇(2) -- 方法与事件
- dojox.grid.DataGrid 编程篇(一)- 方法与事件
- dojox.grid.DataGrid 编程篇(3) -- DataGrid的一些Bug
- dojox.grid.DataGrid 编程篇(1) -- Layout设计
- dojox.grid.DataGrid显示数据
- dojox/grid/DataGrid数据格网
- DojoX DataGrid
- 项目中用转dojox.grid.DataGrid的几点必知
- 关于 dojo.data.ItemFileWriteStore & dojox.grid.DataGrid 一个注意事项
- Dojox.grid.data 使用指南
- Dojox.grid.data 使用指南
- dojo之dojox.grid.Grid
- DataGrid鼠标事件方法
- DataGrid鼠标事件方法
- DataGrid鼠标事件方法
- dojox.grid.data.Objects的一个bug
- dojox/grid/EnhancedGrid数据格网小部件
- silverlight datagrid/grid导出到excel 方法
- ZOJ 2744 Palindromes
- ListView 实现点击侧边A-Z快速查找[中英文混排]
- linux 进程地址空间的一步步探究
- HBase实现记录定期定量删除
- 开学第二周9.8--9.14
- dojox.grid.DataGrid 编程篇(2) -- 方法与事件
- Android重的wifi的操作
- Android Notification实例理解
- 在eclipse里找到jsp编译后的java和class文件的位置
- 华为最新机试题
- DNS失效导致邮件发送不出去
- 关于linux静态库和动态库的分析
- sql server 开启锁跟踪
- mysql 数据 drop 了 恢复