首先,先在UltraWebGrid中增加一个模板列(Templated Column),该列的Type值要设置成”CheckBox”。那么,现在在UltraWebGrid中就已有了一个CheckBox列。
现在,要在该列的Header上加上一个CheckBox,当点击这个CheckBox时,可以在客户端上进行“全选”/“全不选”操作。
- 编辑这列的HeaderTemplate,增加一个id、name都为cbSelectAll的Checkbox。如下所示:
<igtbl:TemplatedColumn Type= “CheckBox” >
<HeaderTemplate>
<input id= “cbSelectAll” name= “cbSelectAll” type= “checkbox” οnclick= “SelectAll(0)” />
</HeaderTemplate>
</igtbl:TemplatedColumn> - 增加JavaScript函数SelectAll()和igrdInitializeLayout():
var oGrid;
var cbSelectAll;//Selects all checkboxes in the grid
function SelectAll(colIndex)
{
var checked = cbSelectAll.checked;for (i = 0; i < oGrid.Rows.length; i++)
{
oGrid.Rows.getRow(i).getCell(colIndex).setValue(checked);
}}
//Intialization function which sets the grid reference
function igrdInitializeLayout(object)
{
oGrid = igtbl_getGridById(object);
//need to set it here due to Infragistic’s handling of columns.
cbSelectAll = document.getElementById(“cbSelectAll”);
} - 设置UltraWebGrid的客户端事件 ClientSideEvents.InitializeLayoutHandler=”igrdInitializeLayout”
就可以试试看了。