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;

}

});

--本章结束--

相关推荐