【转】关于Infragistics.WebUI.UltraWebGrid的使用

 

Infragistics.WebUI.UltraWebGrid功能比较强大，尤其是客户端时间比较丰富，能实现较多的控制。下面就有关个别客户端事件稍微说明一下。

在.cs代码中添加

Code
UltraWebGrid1.DisplayLayout.ClientSideEvents.CellClickHandler = "Template_CellClickHandler";
UltraWebGrid1.DisplayLayout.ClientSideEvents.ColumnHeaderClickHandler = "Template_ColumnHeaderClickHandler";
UltraWebGrid1.DisplayLayout.ClientSideEvents.AfterCellUpdateHandler = "Template_AfterCellUpdateHandler";
UltraWebGrid1.DisplayLayout.ClientSideEvents.AfterRowActivateHandler = "Template_AfterRowActivateHandler";

以上四个分别为：单元格单击事件，列头单击事件，单元格更新后事件，选择行事件。

注意单元格单击事件需要在前面页面该控件的样式布局部分修改CellClickActionDefault="CellSelect"，如果是

行选择CellClickActionDefault="RowSelect"

Code
<DisplayLayout RowHeightDefault="24px" Version="4.00" BorderCollapseDefault="Separate" LoadOnDemand="Xml" TableLayout="Fixed"
                  CellClickActionDefault="CellSelect" SelectTypeRowDefault="Single" RowSelectorsDefault="No" SelectTypeCellDefault="Extended">

然后编写客户端事件

Code
//声明几个常用的全局变量
var CurrentGrid=null;
var CurrentRowIndex=-1;
var CurrentColumnIndex=-1;
var CurrentRow=null;
var CurrentCell=null;

//单元格单击
function Template_CellClickHandler(gridName, cellId, button)
{   
    if(button==2)
        return;
        
     CurrentGrid=igtbl_getGridById(UltraWebGrid1);
     CurrentCell=CurrentGrid.getActiveCell();
     CurrentColumnIndex=CurrentCell.Index;
     CurrentRow=CurrentCell.Row;
     CurrentRowIndex=CurrentRow.getIndex();

    //其他你要执行的js代码
}

//行单击事件
function Template_AfterRowActivateHandler(gridId,rowId)
{
     CurrentRow=igtbl_getRowById(rowId);
     CurrentRowIndex=CurrentRow.getIndex();

    //其他你要执行的js代码
}

//表头单击事件（参数没写，自己找一下）
function Template_ColumnHeaderClickHandler()
{

}

//单元格更新后事件
function Template_AfterCellUpdateHandler(gridName, cellId)
{

}

其他一些常用操作

function DeleteRow()
{
    var row=igtbl_getActiveRow(UltraWebGrid1);
     CurrentRow=row;
    //有时需要执行一些检查，满足一定条件后然后执行一个回调函数来删除，所以将当前行保存在全局变量中
     CurrentRow.deleteRow();
}

添加行：

function InsertRow()
{
     CurrentGrid=igtbl_getGridById(UltraWebGrid1);
     CurrentGrid.Rows.addNew();

    //得到刚添加的行，可以return（返回）刚添加的行，然后进行自动赋值等操作
    var row=igtbl_getRowById(CurrentGrid.Rows.getLastRowId());
    //得到当前行的下一行
    var row=CurrentRow.getNextRow();
}

根据Id得到某个行或单元格

igtbl_getCellById(cellId);
igtbl_getRowById(rowId);

如果单元格是图片，可以这样赋值

addCell.Element.innerHTML="<NOBR><IMG style=\"CURSOR: hand\" onclick=InsertRow() src=\"../images/Default/add.bmp\"></NOBR>";

如果是文本，应该

row.getCell(columnIndex);
cell.setValue();

 

例子

<igtbl:UltraWebGrid ID="UltraWebGridResult" runat="server" Width="325px" Height="200px"
                        SkinID="GridDefault">
                        <DisplayLayout>
                            <ClientSideEvents AfterCellUpdateHandler="AfterCellUpdate"></ClientSideEvents>
                        </DisplayLayout>

.....

Js代码

 function AfterCellUpdate(tableName, itemName) {
        debugger;
            var row = igtbl_getRowById(itemName);
            var cellASNQty = row.getCell(13);
            var cellRtQty = row.getCell(14);
            var cellUnitPrice = row.getCell(15);
            var cellTotalCount = row.getCell(16);
            if (!validate(cellRtQty.getValue())) {
                alert('必须输入正数字！');
                cellRtQty.setValue(0);
                return 0;
            }
           // alert(cellASNQty.getValue());
            //alert(cellRtQty.getValue());
            if (parseFloat(cellASNQty.getValue()) < parseFloat(cellRtQty.getValue())) {
                alert('收货数量不能大于送货数量！');
                cellRtQty.setValue(0);
                return 0;
            }
            if (!validate(cellUnitPrice.getValue())) {
                alert('必须输入正数字！');
                cellUnitPrice.setValue(0);
                return 0;
            }
            cellTotalCount.setValue(cellRtQty.getValue() * cellUnitPrice.getValue());
            return 0;
        }

        function validate(sDouble) {
            var re = /^[0-9]+.?[0-9]*$/;
            return re.test(sDouble);
        }