在使用Infragistics.WebUI.UltraWebGrid的过程中,很多时候我们可能也要向Microsoft的GridView控件一样,添加一些如添加该行,
删除该行的按钮,初次使用Infragistics.WebUI.UltraWebGrid控件的朋友,可能会摸索一段时间,因此写出来供朋友们参考参考,少浪费
些时间,就可以玩玩cs之类的,
先看一下效果:
点击右边的+号,可以添加行,点击—号,可以删除行,是不是很方便?
如何做到的呢,有些关键的地方,自己找起来还是很麻烦的,参考一下吧
在服务器端添加:
UltraWebGrid1.DisplayLayout.AllowAddNewDefault
=
Infragistics.WebUI.UltraWebGrid.AllowAddNew.Yes;
UltraWebGrid1.DisplayLayout.AllowDeleteDefault = AllowDelete.Yes;
UltraWebGrid1.DisplayLayout.AddNewBox.Hidden = true ;
UltraWebGrid1.DisplayLayout.AllowDeleteDefault = AllowDelete.Yes;
UltraWebGrid1.DisplayLayout.AddNewBox.Hidden = true ;
分别是允许添加,允许删除,并且把Infragistics.WebUI.UltraWebGrid自定义的AddNewBox去掉。当然这些也
可以在客户端或它的xml样式文件中定义。
在服务器端添加两列
//
添加按钮列
UltraGridColumn addCol = new UltraGridColumn();
addCol.Header.Caption = "" ;
addCol.Width = Unit.Parse( " 30 " );
addCol.CellStyle.HorizontalAlign = HorizontalAlign.Center;
addCol.Type = ColumnType.Button;
addCol.CellButtonStyle.CssClass = " addButton " ;
addCol.Key = " Add " ;
addCol.CellButtonDisplay = CellButtonDisplay.Always;
UltraWebGrid1.Bands[ 0 ].Columns.Add(addCol);
// 删除按钮列
UltraGridColumn delCol = new UltraGridColumn();
delCol.Header.Caption = "" ;
delCol.Width = Unit.Parse( " 30 " );
delCol.CellStyle.HorizontalAlign = HorizontalAlign.Center;
delCol.Type = ColumnType.Button;
delCol.CellButtonStyle.CssClass = " delButton " ;
delCol.Key = " Del " ;
delCol.CellButtonDisplay = CellButtonDisplay.Always;
UltraWebGrid1.Bands[ 0 ].Columns.Add(delCol);
UltraGridColumn addCol = new UltraGridColumn();
addCol.Header.Caption = "" ;
addCol.Width = Unit.Parse( " 30 " );
addCol.CellStyle.HorizontalAlign = HorizontalAlign.Center;
addCol.Type = ColumnType.Button;
addCol.CellButtonStyle.CssClass = " addButton " ;
addCol.Key = " Add " ;
addCol.CellButtonDisplay = CellButtonDisplay.Always;
UltraWebGrid1.Bands[ 0 ].Columns.Add(addCol);
// 删除按钮列
UltraGridColumn delCol = new UltraGridColumn();
delCol.Header.Caption = "" ;
delCol.Width = Unit.Parse( " 30 " );
delCol.CellStyle.HorizontalAlign = HorizontalAlign.Center;
delCol.Type = ColumnType.Button;
delCol.CellButtonStyle.CssClass = " delButton " ;
delCol.Key = " Del " ;
delCol.CellButtonDisplay = CellButtonDisplay.Always;
UltraWebGrid1.Bands[ 0 ].Columns.Add(delCol);
有两点是需要注意的,delCol.Type = ColumnType.Button;该列的类型要设定为按钮类型,
其次delCol.CellButtonDisplay = CellButtonDisplay.Always;该按钮要设定为一直显示,否则只有鼠标划过才显示。(郁闷吧,Infragistics.WebUI.UltraWebGrid就是这样的。)
然后是添加客户端的代码了,首先添加css
.addButton
{
background-position : center ;
background-image : url(http://images.cnblogs.com/webgrid/add.gif) ;
background-repeat : no-repeat ;
background-color : #ffffff ;
border : 0 ;
}
.delButton
{
background-position : center ;
background-image : url(http://images.cnblogs.com/webgrid/del.gif) ;
background-repeat : no-repeat ;
background-color : #ffffff ;
border : 0 ;
}
{
background-position : center ;
background-image : url(http://images.cnblogs.com/webgrid/add.gif) ;
background-repeat : no-repeat ;
background-color : #ffffff ;
border : 0 ;
}
.delButton
{
background-position : center ;
background-image : url(http://images.cnblogs.com/webgrid/del.gif) ;
background-repeat : no-repeat ;
background-color : #ffffff ;
border : 0 ;
}
添加js代码
//
按钮列单击后
function AfterClickCellButtonHandler(gridName, cellId)
{
var oCell = igtbl_getCellById(cellId);
switch (oCell.Column.Key)
{
case " Add " :
InsertRow();
break ;
case " Del " :
DeleteRow();
break ;
}
}
function InsertRow()
{
CurrentGrid = igtbl_getGridById(UltraWebGrid1);
CurrentGrid.Rows.addNew();
}
function DeleteRow()
{
var row = igtbl_getActiveRow(UltraWebGrid1);
CurrentRow = row;
if (row != null )
{
var Id = row.getCell( 0 ).getValue();
if (id == null )
{
row.deleteRow(); // 新增行直接删除
return ;
}
else
// Ajax删除原来就有的行
}
function AfterClickCellButtonHandler(gridName, cellId)
{
var oCell = igtbl_getCellById(cellId);
switch (oCell.Column.Key)
{
case " Add " :
InsertRow();
break ;
case " Del " :
DeleteRow();
break ;
}
}
function InsertRow()
{
CurrentGrid = igtbl_getGridById(UltraWebGrid1);
CurrentGrid.Rows.addNew();
}
function DeleteRow()
{
var row = igtbl_getActiveRow(UltraWebGrid1);
CurrentRow = row;
if (row != null )
{
var Id = row.getCell( 0 ).getValue();
if (id == null )
{
row.deleteRow(); // 新增行直接删除
return ;
}
else
// Ajax删除原来就有的行
}
当然做到上面这几点,基本可以出来了。不过可能还有一些细小的问题,欢迎交流啊。