dojox.grid.DataGrid 組件還提供了一些方法，使用者利用這些方法可以進(jìn)一步豐富表格的表現(xiàn)體驗(yàn)。
1. 獲取、修改任一單元格的數(shù)據(jù)：
取得第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"];
注意：默認(rèn)情況下，每次修改值都會導(dǎo)致Grid該行刷新
2. 獲取(取消)選中行- var grid = dijit.byId("grid1");
- var selectedRows = grid.selection.getSelected();
- var value = selectedRows[0]["f3"];
因?yàn)橹С侄噙x，所以 grid.selection.getSelected 返回的是選中的行數(shù)組。
-
- grid.selection.getFirstSelected();
-
- grid.selection.deselectAll();
-
- grid.selection.select(4);
-
- grid.focus.setFocusIndex(0, 1);
-
- grid.layout.setColumnVisibility(4, false);
- 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>
- dojo.connect(grid, "onRowClick", function(e) {
- alert(e.rowIndex);
- });
另外：Enter鍵也能觸發(fā) onRowClick 事件。
不過這里有個Bug，上下鍵移動時(shí)，選擇行不會跟隨，這時(shí)候按下Enter時(shí) e.rowIndex === undefined。后面會介紹如何解決這個Bug。
（改進(jìn)的 EnhancedGrid 上下鍵移動時(shí)，選擇行會跟隨）
8. 行選擇事件 onSelected (參數(shù): row index)- dojo.connect(grid, "onSelected", function(index) {
- alert(index);
- });
如果選擇行發(fā)生變化時(shí)會被觸發(fā)。
9. 單元格點(diǎn)擊事件 onCellClick (參數(shù): Event 對象)- dojo.connect(grid, "onCellClick", function(e) {
- console.log("[" + e.rowIndex + "," + e.cellIndex + "]");
-
- if (e.rowIndex < 0) return;
- e.cellNode.style.backgroundColor = "red";
- });
- <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點(diǎn)擊時(shí)觸發(fā)下面的方法。
- 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);
- }
- }
注意：在表格列寬變化時(shí)(即拖拽調(diào)整列寬)會導(dǎo)致Grid重繪，因此上面用 cacheCheck 來保持表頭的Checkbox的checked狀態(tài)。
在 onResizeColumn 實(shí)際中設(shè)置回去。
- dojo.connect(grid, "onResizeColumn", function(cellIdx) {
- dojo.byId("chk").checked = cacheCheck;
- });
當(dāng)使用編輯列的時(shí)候，可以利用數(shù)據(jù)源的變更通知：
- 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;
- }
- });
-- 本章結(jié)束 --
本站僅提供存儲服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請
點(diǎn)擊舉報(bào)。
