dojox.grid.DataGrid 编程篇(2)

阅读更多

dojox.grid.DataGrid 编程篇(2) -- 方法与事件
dojox.grid.DataGrid 组件还提供了一些方法，使用者利用这些方法可以进一步丰富表格的表现体验。

1. 获取、修改任一单元格的数据：
取得第3行，字段"f3"的值
[javascript] view plaincopy

    var grid = dijit.byId("grid1"); 
    var row = grid.getItem(3); 
    // 获取值 
    var value = grid.store.getValue(row, "f3"); 
    // 修改值 
    grid.store.setValue(row, "f3", "abc"); 

或者直接写为
[javascript] view plaincopy

    var grid = dijit.byId("grid1"); 
    var row = grid.getItem(3); 
    var value = row["f3"]; 

注意：默认情况下，每次修改值都会导致Grid该行刷新

2. 获取(取消)选中行
[javascript] view plaincopy

    var grid = dijit.byId("grid1"); 
    var selectedRows = grid.selection.getSelected(); 
    var value = selectedRows[0]["f3"]; 

因为支持多选，所以 grid.selection.getSelected 返回的是选中的行数组。
[javascript] view plaincopy

    // 获得选择的第一行 
    grid.selection.getFirstSelected(); 
    // 清除所有选中行 
    grid.selection.deselectAll(); 
    // 选中第n行 
    grid.selection.select(4); 


3. 设置单元格焦点
[javascript] view plaincopy

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


4. 将某一行显示在视图中
[javascript] view plaincopy

    // 滚动显示出第4行 
    grid.scrollToRow(3); 


5. 隐藏某一列
[javascript] view plaincopy

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


6. 改变行的显示 onStyleRow (参数：row对象)
[javascript] view plaincopy

    dojo.connect(grid, "onStyleRow", function(row) { 
       // 第二行背景设为红色 
       if (row.index == 1) { 
          row.customClasses += " redRow "; 
       } 
    }); 
    grid.resize(); 
     
     



7. 行点击事件 onRowClick (参数: Event 对象)
[javascript] view plaincopy

    dojo.connect(grid, "onRowClick", function(e) { 
       alert(e.rowIndex); 
    }); 


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

8. 行选择事件 onSelected (参数: row index)
[javascript] view plaincopy

    dojo.connect(grid, "onSelected", function(index) { 
       alert(index); 
    }); 

如果选择行发生变化时会被触发。

9. 单元格点击事件 onCellClick (参数: Event 对象)
[javascript] view plaincopy

    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. 全选择的代码示例：
[html] view plaincopy

         style='border:1px #a8a8a8 solid;width:450px;height:200px;' store="getDataStore(10)" 
     canSort='false' editable="true" selectionMode='extended' selectable="false" > 
       
       
      
         
           
           
           
           
           
           
           
         
     
   

选择	列1	列2	列3	列4	列5	列6

 

JavaScript：表头的Checkbox点击时触发下面的方法。
[javascript] view plaincopy

    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 实际中设置回去。
[javascript] view plaincopy

    dojo.connect(grid, "onResizeColumn", function(cellIdx) { 
        dojo.byId("chk").checked = cacheCheck; 
    }); 



11. 变化通知
当使用编辑列的时候，可以利用数据源的变更通知：
[javascript] view plaincopy

    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; 
        } 
    }); 



--  本章结束 --