dojox.grid.DataGrid 编程篇(2)
mianhuantang 2013-01-26
dojox.grid.DataGrid编程篇(2)--方法与事件
dojox.grid.DataGrid组件还提供了一些方法，使用者利用这些方法可以进一步丰富表格的表现体验。
1.获取、修改任一单元格的数据：
取得第3行，字段"f3"的值
[javascript]viewplaincopy
vargrid=dijit.byId("grid1");
varrow=grid.getItem(3);
//获取值
varvalue=grid.store.getValue(row,"f3");
//修改值
grid.store.setValue(row,"f3","abc");
或者直接写为
[javascript]viewplaincopy
vargrid=dijit.byId("grid1");
varrow=grid.getItem(3);
varvalue=row["f3"];
注意：默认情况下，每次修改值都会导致Grid该行刷新
2.获取(取消)选中行
[javascript]viewplaincopy
vargrid=dijit.byId("grid1");
varselectedRows=grid.selection.getSelected();
varvalue=selectedRows[0]["f3"];
因为支持多选，所以grid.selection.getSelected返回的是选中的行数组。
[javascript]viewplaincopy
//获得选择的第一行
grid.selection.getFirstSelected();
//清除所有选中行
grid.selection.deselectAll();
//选中第n行
grid.selection.select(4);
3.设置单元格焦点
[javascript]viewplaincopy
//设置第一行，第二列的单元格的焦点
grid.focus.setFocusIndex(0,1);
4.将某一行显示在视图中
[javascript]viewplaincopy
//滚动显示出第4行
grid.scrollToRow(3);
5.隐藏某一列
[javascript]viewplaincopy
//隐藏第五列
grid.layout.setColumnVisibility(4,false);
6.改变行的显示onStyleRow(参数：row对象)
[javascript]viewplaincopy
dojo.connect(grid,"onStyleRow",function(row){
//第二行背景设为红色
if(row.index==1){
row.customClasses+="redRow";
}
});
grid.resize();
<styletype="text/css">
.redRowtr{background-color:red!important;}
</style>
7.行点击事件onRowClick(参数:Event对象)
[javascript]viewplaincopy
dojo.connect(grid,"onRowClick",function(e){
alert(e.rowIndex);
});
另外：Enter键也能触发onRowClick事件。
不过这里有个Bug，上下键移动时，选择行不会跟随，这时候按下Enter时e.rowIndex===undefined。后面会介绍如何解决这个Bug。
（改进的EnhancedGrid上下键移动时，选择行会跟随）
8.行选择事件onSelected(参数:rowindex)
[javascript]viewplaincopy
dojo.connect(grid,"onSelected",function(index){
alert(index);
});
如果选择行发生变化时会被触发。
9.单元格点击事件onCellClick(参数:Event对象)
[javascript]viewplaincopy
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]viewplaincopy
<tabledojoType='dojox.grid.DataGrid'id='grid1'jsid='js_grid1'
style='border:1px#a8a8a8solid;width:450px;height:200px;'store="getDataStore(10)"
canSort='false'editable="true"selectionMode='extended'selectable="false">
<colgroupspan="1"noscroll="true"></colgroup>
<colgroupspan="6"></colgroup>
<thead>
<tr>
<thfield="f0"cellStyles="text-align:center;"width="50px"editable="true"cellType="dojox.grid.cells.Bool"alwaysEditing="true">
<divstyle="text-align:center;">
<labelfor="chk">选择</label><br/><inputtype="checkbox"id="chk"onclick="changeAll(this)">
</div>
</th>
<thfield="f1"cellStyles="text-align:center;"width="100px">列1</th>
<thfield="f2"cellStyles="text-align:center;"width="100px">列2</th>
<thfield="f3"cellStyles="text-align:center;"width="100px">列3</th>
<thfield="f4"cellStyles="text-align:center;"width="100px">列4</th>
<thfield="f5"cellStyles="text-align:center;"width="100px">列5</th>
<thfield="f6"cellStyles="text-align:center;"width="100px"formatter="addLink">列6</th>
</tr>
</thead>
</table>
JavaScript：表头的Checkbox点击时触发下面的方法。
[javascript]viewplaincopy
functionchangeAll(checkbox){
vargrid=dijit.byId("grid1");
for(vari=0,row;(row=grid.getItem(i));i++){
grid.store.setValue(row,"f0",checkbox.checked);
}
}
注意：在表格列宽变化时(即拖拽调整列宽)会导致Grid重绘，因此上面用cacheCheck来保持表头的Checkbox的checked状态。
在onResizeColumn实际中设置回去。
[javascript]viewplaincopy
dojo.connect(grid,"onResizeColumn",function(cellIdx){
dojo.byId("chk").checked=cacheCheck;
});
11.变化通知
当使用编辑列的时候，可以利用数据源的变更通知：
[javascript]viewplaincopy
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;
}
});
--本章结束--
