关于Infragistics.WebUI.UltraWebGrid按钮的使用

    在使用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 ;

分别是允许添加，允许删除，并且把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);

 

有两点是需要注意的，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 ;

}

 

添加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删除原来就有的行
}

 

当然做到上面这几点，基本可以出来了。不过可能还有一些细小的问题，欢迎交流啊。