UltraWebGrid使用指南

原创文章,转载请注明出处
作者: BoyLee  出处: Http://BoyLee.net
ActiveReports和UltraWebGrid都是使用较为广泛.Net控件,有着方便,简单,强大等特点.
但是网上相关的中文资料很少,几乎没有,想想自己刚用这两工具时候的痛苦,一直有写个简单的入门级的使用指南.后来在博客园看到不少大大用ActiveReports,也写了不少文章,于是俺决定写个WebGrid的.

首先安装NetAdvantage,买商业版的朋友可以输入注册码,俺用未注册的,直接下一步跳过.未注册的同样可以使用,只是过了试用期后会跳出提示注册窗口.
安装好后,可以开始我们的WebGrid之旅啦,今天先来个最简单的

1. 建立一个你自己的工程,添加Infragistics.WebUI.UltraWebGrid.v3.1.dll到引用中.这里*.dll文件名可能因为 版本问题,会不一样.请自行修改(我的示例环境为xp+vs2003+PowerTools NetAdvantage 2004 Vol.2 トライアル版,以实际项目中用的一个WebGrid为例进行说明)

2.在*.aspx页面最上面添加如下代码,注册UltraWebGrid控件

<% @ Register TagPrefix = " igtbl "  Namespace = " Infragistics.WebUI.UltraWebGrid "  Assembly = " Infragistics.WebUI.UltraWebGrid.v3.1, Version=3.1.20042.1046, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb "   %>

其 中Assembly="Infragistics.WebUI.UltraWebGrid.v3.1, Version=3.1.20042.1046, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb" 具体内容取决于NetAdvantage 2004 的版本.其他具体的意思相信大家自己应该看的懂哦,俺就不多说啦.

3.WebGrid的前台代码:

< igtbl:ultrawebgrid id = " uwgCustomer "  style = " IME-MODE: active "  runat = " server "  Width = " 830px "  Height = " 188px " >
                                         < DisplayLayout StationaryMargins = " Header "  AllowSortingDefault = " Yes "  RowHeightDefault = " 21px "  Version = " 4.00 "
                                            BorderCollapseDefault = " Separate "  Name = " uwgCustomer "  TableLayout = " Fixed "  NoDataMessage = " 表示するデータがありません " >
                                             < AddNewBox Prompt = " 追加 " >
                                                 < Style BorderWidth = " 1px "  BorderStyle = " Solid "  BackColor = " LightGray " >
                                                     < BorderDetails ColorTop = " White "  WidthLeft = " 1px "  WidthTop = " 1px "  ColorLeft = " White " ></ BorderDetails >
                                                 </ Style >
                                                 < ButtonStyle Cursor = " Hand " ></ ButtonStyle >
                                             </ AddNewBox >
                                             < Pager PrevText = " 前へ "  NextText = " 次 " >
                                                 < Style BorderWidth = " 1px "  BorderStyle = " Solid "  BackColor = " LightGray " >
                                                     < BorderDetails ColorTop = " White "  WidthLeft = " 1px "  WidthTop = " 1px "  ColorLeft = " White " ></ BorderDetails >
                                                 </ Style >
                                             </ Pager >
                                             < HeaderStyleDefault VerticalAlign = " Bottom "  BorderStyle = " Solid "  HorizontalAlign = " Center "  BackColor = " LightGray " >
                                                 < BorderDetails ColorTop = " White "  WidthLeft = " 1px "  WidthTop = " 1px "  ColorLeft = " White " ></ BorderDetails >
                                             </ HeaderStyleDefault >
                                             < FrameStyle Width = " 830px "  BorderWidth = " 1px "  Font - Size = " 10pt "  Font - Names = " ＭＳ ゴシック "  BorderStyle = " Solid "
                                                Height = " 188px " ></ FrameStyle >
                                             < FooterStyleDefault BorderWidth = " 1px "  BorderStyle = " Solid "  BackColor = " LightGray " >
                                                 < BorderDetails ColorTop = " White "  WidthLeft = " 1px "  WidthTop = " 1px "  ColorLeft = " White " ></ BorderDetails >
                                             </ FooterStyleDefault >
                                             < ClientSideEvents ClickCellButtonHandler = " GetAddr "  BeforeCellUpdateHandler = " BeforeCellUpdate "  AfterSelectChangeHandler = " uwgCustomer_AfterSelectChangeHandler "
                                                BeforeEnterEditModeHandler = " BeforeEnterEditMode "  AfterEnterEditModeHandler = " AfterEnterEditMode " ></ ClientSideEvents >
                                             < GroupByBox Prompt = " 列ごとにグループ分けするときは、ここに列ヘッダーをドラックします。 " ></ GroupByBox >
                                             < SelectedRowStyleDefault ForeColor = " Black "  BackColor = " Cyan " ></ SelectedRowStyleDefault >
                                             < RowStyleDefault BorderWidth = " 1px "  BorderColor = " Gray "  BorderStyle = " Solid " >
                                                 < Padding Left = " 3px " ></ Padding >
                                                 < BorderDetails WidthLeft = " 0px "  WidthTop = " 0px " ></ BorderDetails >
                                             </ RowStyleDefault >
                                             < Strings DownLevelDeletePrompt = " 削除 "  DownLevelCancelPrompt = " キャンセル "  DownLevelDeleteColumnHeader = " 列の削除 "
                                                DownLevelEditColumnHeader = " 列の編集 "  DownLevelEditPrompt = " 編集 "  DownLevelUpdatePrompt = " 更新 " ></ Strings >
                                         </ DisplayLayout >
                                         < Bands >
                                             < igtbl:UltraGridBand AllowAdd = " Yes " ></ igtbl:UltraGridBand >
                                         </ Bands >
                                     </ igtbl:ultrawebgrid >

表格中无数据时候显示的提示信息
<DisplayLayout ............NoDataMessage="表示するデータがありません">
 
定义编辑,改变选择等客户端JS
<ClientSideEvents ClickCellButtonHandler="GetAddr" BeforeCellUpdateHandler="BeforeCellUpdate" AfterSelectChangeHandler="uwgCustomer_AfterSelectChangeHandler" BeforeEnterEditModeHandler="BeforeEnterEditMode" AfterEnterEditModeHandler="AfterEnterEditMode"></ClientSideEvents>

允许在符合一定条件时候,自动增加新的空行
<Bands>
<igtbl:UltraGridBand AllowAdd="Yes"></igtbl:UltraGridBand>
 </Bands>

其他的大部分为表格的样式,另外一些也可以根据英文意思看懂,不再赘述

4.后台*.vb中WebGrid初始化的代码

Private Sub uwgCustomer_InitializeLayout()Sub uwgCustomer_InitializeLayout(ByVal sender As Object, ByVal e As Infragistics.WebUI.UltraWebGrid.LayoutEventArgs) Handles uwgCustomer.InitializeLayout
        On Error GoTo ERR_FLAG
        Dim strSQL As String
        Dim strErrMsg As String
        Dim objConn As New clsAdoNetSql
        Dim rdrAddr As SqlDataReader
        Dim sel_addr As ValueList
        Dim intI, intJ As Int16
        Me.uwgCustomer.Columns( 0 ).HeaderText  =   " お客様コード "
        Me.uwgCustomer.Columns( 1 ).HeaderText  =   " 来場日 "
        Me.uwgCustomer.Columns( 2 ).HeaderText  =   " 名前(姓)<font color=red>※</font> "
        Me.uwgCustomer.Columns( 3 ).HeaderText  =   " 名前(名) "
        Me.uwgCustomer.Columns( 4 ).HeaderText  =   " 名前(せい)<font color=red>※</font> "
        Me.uwgCustomer.Columns( 5 ).HeaderText  =   " 名前(めい) "
        Me.uwgCustomer.Columns( 6 ).HeaderText  =   " 電話番号 "
        Me.uwgCustomer.Columns( 7 ).HeaderText  =   " 郵便 "
        Me.uwgCustomer.Columns( 8 ).HeaderText  =   " 番号 "
        Me.uwgCustomer.Columns( 9 ).HeaderText  =   ""
        Me.uwgCustomer.Columns( 10 ).HeaderText  =   " 都道府県 "
        Me.uwgCustomer.Columns( 11 ).HeaderText  =   " 市区町村 "
        Me.uwgCustomer.Columns( 12 ).HeaderText  =   " 町域 "
        Me.uwgCustomer.Columns( 0 ).Width  =  Unit.Pixel( 90 )
        Me.uwgCustomer.Columns( 1 ).Width  =  Unit.Pixel( 75 )
        Me.uwgCustomer.Columns( 2 ).Width  =  Unit.Pixel( 75 )
        Me.uwgCustomer.Columns( 3 ).Width  =  Unit.Pixel( 72 )
        Me.uwgCustomer.Columns( 4 ).Width  =  Unit.Pixel( 94 )
        Me.uwgCustomer.Columns( 5 ).Width  =  Unit.Pixel( 74 )
        Me.uwgCustomer.Columns( 6 ).Width  =  Unit.Pixel( 90 )
        Me.uwgCustomer.Columns( 7 ).Width  =  Unit.Pixel( 35 )
        Me.uwgCustomer.Columns( 8 ).Width  =  Unit.Pixel( 40 )
        Me.uwgCustomer.Columns( 9 ).Type  =  ColumnType.Button
        Me.uwgCustomer.Columns( 9 ).CellButtonDisplay  =  CellButtonDisplay.Always
        Me.uwgCustomer.Columns( 9 ).Width  =  Unit.Pixel( 50 )
        Me.uwgCustomer.Columns( 9 ).DefaultValue  =   " 検索 "

        Me.uwgCustomer.Columns( 10 ).Width  =  Unit.Pixel( 70 )
        Me.uwgCustomer.Columns( 10 ).Type  =  ColumnType.DropDownList

        Me.uwgCustomer.Columns( 11 ).Width  =  Unit.Pixel( 87 )
        Me.uwgCustomer.Columns( 12 ).Width  =  Unit.Pixel( 77 )

        strSQL  =   "  SELECT PREFECTURES_CODE,  "
        strSQL  &=   "        PREFECTURES_NAME  "
        strSQL  &=   "   FROM CM_PREFECTURES  "
        rdrAddr  =  objConn.RunQueryCmd(strSQL)
        sel_addr  =  Me.uwgCustomer.Columns( 10 ).ValueList
        While rdrAddr.Read
            sel_addr.ValueListItems.Add(New ValueListItem)
            sel_addr.ValueListItems(sel_addr.ValueListItems.Count  -   1 ).DisplayText  =  rdrAddr( " PREFECTURES_NAME " )
            sel_addr.ValueListItems(sel_addr.ValueListItems.Count  -   1 ).DataValue  =  rdrAddr( " PREFECTURES_CODE " )
        End While
        rdrAddr.Close()
        objConn.CloseConnection()
        Exit Sub
ERR_FLAG:
         ' デバッグ用の
        strErrMsg  =  Err.Description
        Exit Sub
    End Sub

通过设置ColumnType来改变列属性,有Button,DropDownList等,普通列为可编辑的TextBox
这里比较简单,不再废话耽误大家时间了,下边讲如何绑定数据

 讲了WebGrid的建立.这次到大家都关心的问题啦
如果不绑定数据,那么再漂亮,再好的Grid也没用,也只显示一句"表示するデータがありません"而已
其实WebGrid的数据绑定很简单,只要设置一个和Grid列数相同的DataTable就OK了
DataTable中的数据OK后,和DataGrid/GridView一样,就是xxx.databind()就可以了
不过和DataGrid/GridView不同的是,WebGrid是自动绑定的,不用设置
所以DataTable列对应的顺序一定要和WebGrid完全一样,而且列数也要相等.

private  Function DisplayCustomersList()Function DisplayCustomersList(ByVal strItemCode As String)
        On Error GoTo Err_handler
        Dim objConn As New clsAdoNetSql
        Dim rdrCus As SqlDataReader
        Dim strSQL As String
        Dim tblCus As New DataTable
        Dim rowTemp As DataRow
        Dim intI As Int32

        strSQL  =   "  SELECT F.CUSTOMERS_CODE,  "
        strSQL  &=   "        F.FAMILY_NAME,  "
       strSQL  &=   "        F.ONES_NAME,  "
        strSQL  &=   "        F.FAMILY_NAME_KANA,  "
        strSQL  &=   "        F.ONES_NAME_KANA,  "
        strSQL  &=   "        F.TELEPHONE_NUMBER,  "
        strSQL  &=   "        F.POSTAL_CODE1,  "
        strSQL  &=   "        F.POSTAL_CODE2,  "
       strSQL  &=   "        F.PREFECTURES_CODE,  "
        strSQL  &=   "        F.ADDRESS1,  "
        strSQL  &=   "        F.ADDRESS2  "
       strSQL  &=   "   FROM CT_CUSTOMERS_BASIC F,  "
        strSQL  &=   "        CT_ACTION_RECORD A,  "
        strSQL  &=   "        CT_EVENT_CUSTOMERS B  "
        strSQL  &=   "  WHERE B.EVENT_NAME=A.ACTION_ITEMS_TITLE   "
        strSQL  &=   "    AND A.ACTION_RECORD_CODE=' "   &  strItemCode  &   " ' "
        strSQL  &=   "    AND F.CUSTOMERS_CODE=B.CUSTOMERS_CODE "
       rdrCus  =  objConn.RunQueryCmd(strSQL)

        With tblCus.Columns
            .Add(New DataColumn( " CUSTOMERS_CODE " , GetType(String)))
            .Add(New DataColumn( " ATTEND_DATE " , GetType(String)))         ' 来場日
            .Add(New DataColumn( " CUSTOMERS_FIRST_NAME " , GetType(String)))
           .Add(New DataColumn( " CUSTOMERS_LAST_NAME " , GetType(String)))
            .Add(New DataColumn( " CUSTOMERS_FIRST_NAME_KANA " , GetType(String)))
            .Add(New DataColumn( " CUSTOMERS_LAST_NAME_KANA " , GetType(String)))
            .Add(New DataColumn( " TEL_NUMBER " , GetType(String)))
            .Add(New DataColumn( " POSTAL_CODE1 " , GetType(String)))
            .Add(New DataColumn( " POSTAL_CODE2 " , GetType(String)))
            .Add(New DataColumn( " BTN_SEARCH " ))
            .Add(New DataColumn( " SEL_ADDR " , GetType(String)))
            .Add(New DataColumn( " ADDR1 " , GetType(String)))
           .Add(New DataColumn( " ADDR2 " , GetType(String)))
        End With
        tblCus.Columns( 9 ).DefaultValue  =   " 検索 "
        While rdrCus.Read
            rowTemp  =  tblCus.NewRow
            rowTemp( " CUSTOMERS_CODE " )  =  rdrCus( " CUSTOMERS_CODE " )
            rowTemp( " ATTEND_DATE " )  =   ""    ' 来場日
            rowTemp( " CUSTOMERS_FIRST_NAME " )  =  rdrCus( " FAMILY_NAME " )
            rowTemp( " CUSTOMERS_LAST_NAME " )  =  rdrCus( " ONES_NAME " )
            rowTemp( " CUSTOMERS_FIRST_NAME_KANA " )  =  rdrCus( " FAMILY_NAME_KANA " )
            rowTemp( " CUSTOMERS_LAST_NAME_KANA " )  =  rdrCus( " ONES_NAME_KANA " )
            rowTemp( " TEL_NUMBER " )  =  rdrCus( " TELEPHONE_NUMBER " )
            rowTemp( " POSTAL_CODE1 " )  =  rdrCus( " POSTAL_CODE1 " )
            rowTemp( " POSTAL_CODE2 " )  =  rdrCus( " POSTAL_CODE2 " )
            rowTemp( " SEL_ADDR " )  =  rdrCus( " PREFECTURES_CODE " )
            rowTemp( " ADDR1 " )  =  rdrCus( " ADDRESS1 " )
            rowTemp( " ADDR2 " )  =  rdrCus( " ADDRESS2 " )
            tblCus.Rows.Add(rowTemp)
        End While
        rdrCus.Close()
        objConn.CloseConnection()

         '  To record how many exsiting customers.
        Me.Controls.Add(New LiteralControl( " <form name=frmPara><input name=hdnEx type=hidden value= "   &  _
            Me.m_ExsitCusNum.ToString  &   " ></form> " ))
        Me.hdnEx.Value  =  Me.m_ExsitCusNum.ToString

         '  For new customers
        rowTemp  =  tblCus.NewRow
        rowTemp( " CUSTOMERS_CODE " )  =   ""
        rowTemp( " ATTEND_DATE " )  =   ""
        rowTemp( " CUSTOMERS_FIRST_NAME " )  =   ""
       rowTemp( " CUSTOMERS_LAST_NAME " )  =   ""
        rowTemp( " CUSTOMERS_FIRST_NAME_KANA " )  =   ""
        rowTemp( " CUSTOMERS_LAST_NAME_KANA " )  =   ""
        rowTemp( " TEL_NUMBER " )  =   ""
        rowTemp( " POSTAL_CODE1 " )  =   ""
        rowTemp( " POSTAL_CODE2 " )  =   ""
        rowTemp( " SEL_ADDR " )  =   ""
        rowTemp( " ADDR1 " )  =   ""
        rowTemp( " ADDR2 " )  =   ""
        tblCus.Rows.Add(rowTemp)

        Me.uwgCustomer.DisplayLayout.AllowAddNewDefault  =  AllowAddNew.Yes
        Me.uwgCustomer.DisplayLayout.AllowUpdateDefault  =  AllowUpdate.Yes
        Me.uwgCustomer.DisplayLayout.CellClickActionDefault  =  CellClickAction.Edit
       uwgCustomer.DisplayLayout.SelectTypeRowDefault  =  SelectType.Single
        Me.uwgCustomer.DataSource  =  tblCus
        Me.uwgCustomer.DataBind()
       Exit Function
Err_handler:
        objConn.CloseConnection()
        strMsg  =  getErrMessage(Err.Description)
        Controls.Add(New LiteralControl( " <script language=javascript>alert( """   &  strMsg  &   """ )</script> " ))
    End Function

是不是觉得很简单啊,嘿嘿.
下一次讲的是WebGrid操作的属性和方法

这次讲的主要是一些前台/后台事件,属性,相关方法等.
文中一些日文汉字应该能认识不少的,懒的翻译了,大家BS我吧(日文汉字,加英文,差不多也能知道意思了,嘿嘿). 

前台事件：

getMsg_Val( " W00250 " , Message, Me.vldRaiJyo.ErrorMessage)
 Me.vldRaiJyo.ClientValidationFunction  =   " checkRaiJyo "

function checkRaiJyo(source, arguments)
         ... {
            var gn='uwgCustomer';
            var g=igtbl_getGridById(gn);
            var table=g.Bands[0].curTable;
            var rows=table.tBodies[0].rows;
            var rows_num=rows.length-1; // Check range: All of them except the last item.
            
            var cell;
            var cell_value;
            //for(var i=document.frmPara.hdnEx.value; i<rows_num; i++){ // The exsiting customer data won't be checked.
            for(var i=document.frmEvent.hdnEx.value; i<rows_num; i++)...{ // The exsiting customer data won't be checked.
                cell=igtbl_getCellById(gn+'rc_'+i+'_'+1);
                cell_value=cell.getValue();
                if(cell_value!='' && cell_value!=null)...{
                if(!chkDate(cell_value))...{
                    arguments.IsValid=false;
                    return;
                }
                }
            }
            arguments.IsValid=true;    
        }

一个简单的小例子,其实就是和DataGrid前台操作的方法差不多了
一些属性可以自己查看上一章的一些说明

2.其实后台我不知道该说些什么.建议大家自己多动手尝试.
后台和DataGrid一样,写个WebGrid的ID,然后后面加个".",然后就出来了,自己看吧,很多属性和方法的

 

rowCus( " ATTEND_DATE " )  =  Me.uwgCustomer.Rows(intI).Cells( 1 ).Value
                rowCus( " CUSTOMERS_FIRST_NAME " )  =  Me.uwgCustomer.Rows(intI).Cells( 2 ).Value
                rowCus( " CUSTOMERS_LAST_NAME " )  =  Me.uwgCustomer.Rows(intI).Cells( 3 ).Value
                rowCus( " CUSTOMERS_FIRST_NAME_KANA " )  =  Me.uwgCustomer.Rows(intI).Cells( 4 ).Value
                rowCus( " CUSTOMERS_LAST_NAME_KANA " )  =  Me.uwgCustomer.Rows(intI).Cells( 5 ).Value
                rowCus( " TEL_NUMBER " )  =  Me.uwgCustomer.Rows(intI).Cells( 6 ).Value
                rowCus( " POSTAL_CODE1 " )  =  Me.uwgCustomer.Rows(intI).Cells( 7 ).Value
                rowCus( " POSTAL_CODE2 " )  =  Me.uwgCustomer.Rows(intI).Cells( 8 ).Value
                rowCus( " BTN_SEARCH " )  =   " 検索 "
                rowCus( " SEL_ADDR " )  =  Me.uwgCustomer.Rows(intI).Cells( 10 ).Value
                rowCus( " ADDR1 " )  =  Me.uwgCustomer.Rows(intI).Cells( 11 ).Value
                rowCus( " ADDR2 " )  =  Me.uwgCustomer.Rows(intI).Cells( 12 ).Value

OK,全部结束啦.
当然,我只是讲了一点点基本的东西,WebGrid的强大和便捷还是要靠大家自己去发现
其实写这几篇的目的,主要是因为自己用的时候,很多东西不熟悉,而搜索的结果是根本没几篇中文的文章
也难怪,WebGrid主要是日本用的多,所以文档也是日文的居多.抛砖引玉,写了点简单的,希望能对用到WebGrid的新手朋友们有点点帮助,不要象俺开始做WebGrid时一样痛苦.相信有了这几篇入门级的文章,下面的开发对大家来说,应该要容易多了.

抛砖引玉,写了点简单的,希望能对用到WebGrid的新手朋友们有点点帮助,不要象俺开始做WebGrid时一样痛苦.相信有了这几篇入门级的文章,后续的开发对大家来说,应该要容易多了.

<ClientSideEvents

ColumnHeaderClickHandler="UltraWebGrid1_ColumnHeaderClickHandler" BeforeCellChangeHandler="UltraWebGrid1_BeforeCellChangeHandler"

BeforeColumnSizeChangeHandler="UltraWebGrid1_BeforeColumnSizeChangeHandler" KeyDownHandler="UltraWebGrid1_KeyDownHandler"

BeforeRowTemplateCloseHandler="UltraWebGrid1_BeforeRowTemplateCloseHandler" ColumnDragHandler="UltraWebGrid1_ColumnDragHandler"

KeyUpHandler="UltraWebGrid1_KeyUpHandler"

BeforeRowExpandedHandler="UltraWebGrid1_BeforeRowExpandedHandler"

GridCornerImageClickHandler="UltraWebGrid1_GridCornerImageClickHandler" BeforeRowSizeChangeHandler="UltraWebGrid1_BeforeRowSizeChangeHandler"

BeforeRowCollapsedHandler="UltraWebGrid1_BeforeRowCollapsedHandler" BeforeRowInsertHandler="UltraWebGrid1_BeforeRowInsertHandler"

RowSelectorClickHandler="UltraWebGrid1_RowSelectorClickHandler" AfterRowSizeChangeHandler="UltraWebGrid1_AfterRowSizeChangeHandler"

BeforeExitEditModeHandler="UltraWebGrid1_BeforeExitEditModeHandler" CellChangeHandler="UltraWebGrid1_CellChangeHandler"

ClickCellButtonHandler="UltraWebGrid1_ClickCellButtonHandler" AfterCellUpdateHandler="UltraWebGrid1_AfterCellUpdateHandler"

EditKeyUpHandler="UltraWebGrid1_EditKeyUpHandler" BeforeSelectChangeHandler="UltraWebGrid1_BeforeSelectChangeHandler"

ValueListSelChangeHandler="UltraWebGrid1_ValueListSelChangeHandler" AfterColumnMoveHandler="UltraWebGrid1_AfterColumnMoveHandler"

MouseUpHandler="UltraWebGrid1_MouseUpHandler"

InitializeLayoutHandler="UltraWebGrid1_InitializeLayoutHandler"

BeforeRowTemplateOpenHandler="UltraWebGrid1_BeforeRowTemplateOpenHandler" BeforeSortColumnHandler="UltraWebGrid1_BeforeSortColumnHandler"

BeforeColumnMoveHandler="UltraWebGrid1_BeforeColumnMoveHandler" AfterRowCollapsedHandler="UltraWebGrid1_AfterRowCollapsedHandler"

BeforeCellUpdateHandler="UltraWebGrid1_BeforeCellUpdateHandler" MouseDownHandler="UltraWebGrid1_MouseDownHandler"

AfterSelectChangeHandler="UltraWebGrid1_AfterSelectChangeHandler" DblClickHandler="UltraWebGrid1_DblClickHandler"

AfterRowTemplateOpenHandler="UltraWebGrid1_AfterRowTemplateOpenHandler" BeforeEnterEditModeHandler="UltraWebGrid1_BeforeEnterEditModeHandler"

EditKeyDownHandler="UltraWebGrid1_EditKeyDownHandler" AfterRowExpandedHandler="UltraWebGrid1_AfterRowExpandedHandler"

TemplateUpdateControlsHandler="UltraWebGrid1_TemplateUpdateControlsHandler" AfterRowTemplateCloseHandler="UltraWebGrid1_AfterRowTemplateCloseHandler"

CellClickHandler="UltraWebGrid1_CellClickHandler" AfterRowDeletedHandler="UltraWebGrid1_AfterRowDeletedHandler"

AfterEnterEditModeHandler="UltraWebGrid1_AfterEnterEditModeHandler" AfterColumnSizeChangeHandler="UltraWebGrid1_AfterColumnSizeChangeHandler"

AfterRowActivateHandler="UltraWebGrid1_AfterRowActivateHandler" MouseOverHandler="UltraWebGrid1_MouseOverHandler"

AfterSortColumnHandler="UltraWebGrid1_AfterSortColumnHandler" InitializeRowHandler="UltraWebGrid1_InitializeRowHandler"

MouseOutHandler="UltraWebGrid1_MouseOutHandler" BeforeRowDeletedHandler="UltraWebGrid1_BeforeRowDeletedHandler"

AfterExitEditModeHandler="UltraWebGrid1_AfterExitEditModeHandler" TemplateUpdateCellsHandler="UltraWebGrid1_TemplateUpdateCellsHandler"

BeforeRowActivateHandler="UltraWebGrid1_BeforeRowActivateHandler" AfterRowInsertHandler="UltraWebGrid1_AfterRowInsertHandler">

</ClientSideEvents>

 

前台函数定義形式：

function UltraWebGrid1_MouseOverHandler(gridName, id, button)

function UltraWebGrid1_AfterSelectChangeHandler(gridName, id)

function UltraWebGrid1_ValueListSelChangeHandler(gridName, selectId, cellId)

function UltraWebGrid1_CellChangeHandler(gridName, cellId)

function UltraWebGrid1_AfterRowSizeChangeHandler(gridName, rowId, height)

function UltraWebGrid1_AfterCellUpdateHandler(gridName, cellId)

function UltraWebGrid1_AfterColumnMoveHandler(gridName, columnId)

function UltraWebGrid1_AfterColumnSizeChangeHandler(gridName, columnId, width)

function UltraWebGrid1_AfterEnterEditModeHandler(gridName, cellId)

function UltraWebGrid1_AfterExitEditModeHandler(gridName, cellId)

function UltraWebGrid1_AfterRowActivateHandler(gridName, rowId)

function UltraWebGrid1_AfterRowCollapsedHandler(gridName, rowId)

function UltraWebGrid1_AfterRowDeletedHandler(gridName, rowId)

function UltraWebGrid1_AfterRowExpandedHandler(gridName, rowId)

function UltraWebGrid1_AfterRowInsertHandler(gridName, rowId)

function UltraWebGrid1_AfterRowTemplateCloseHandler(gridName, rowId, bSaveChanges)

function UltraWebGrid1_AfterRowTemplateOpenHandler(gridName, rowId)

function UltraWebGrid1_AfterSortColumnHandler(gridName, columnId)

function UltraWebGrid1_BeforeCellChangeHandler(gridName, cellId)

function UltraWebGrid1_BeforeCellUpdateHandler(gridName, cellId, value)

function UltraWebGrid1_BeforeColumnMoveHandler(gridName, columnId)

function UltraWebGrid1_BeforeColumnSizeChangeHandler(gridName, columnId, width)

function UltraWebGrid1_BeforeEnterEditModeHandler(gridName, cellId)

function UltraWebGrid1_BeforeExitEditModeHandler(gridName, cellId)

function UltraWebGrid1_BeforeRowActivateHandler(gridName, rowId)

function UltraWebGrid1_BeforeRowCollapsedHandler(gridName, rowId)

function UltraWebGrid1_BeforeRowDeletedHandler(gridName, rowId)

function UltraWebGrid1_BeforeRowExpandedHandler(gridName, rowId)

function UltraWebGrid1_BeforeRowInsertHandler(gridName, rowId)

function UltraWebGrid1_BeforeRowSizeChangeHandler(gridName, rowId)

function UltraWebGrid1_BeforeRowTemplateCloseHandler(gridName, rowId, bSaveChanges)

function UltraWebGrid1_BeforeRowTemplateOpenHandler(gridName, rowId, templateId)

function UltraWebGrid1_BeforeSelectChangeHandler(gridName, id)

function UltraWebGrid1_BeforeSortColumnHandler(gridName, columnId)

function UltraWebGrid1_CellClickHandler(gridName, cellId, button)

function UltraWebGrid1_ClickCellButtonHandler(gridName, cellId)

function UltraWebGrid1_ColumnDragHandler(gridName, columnId, insertBeforeColumnId)

function UltraWebGrid1_ColumnHeaderClickHandler(gridName, columnId, button)

function UltraWebGrid1_DblClickHandler(gridName, cellId)

function UltraWebGrid1_EditKeyDownHandler(gridName, cellId, key)

function UltraWebGrid1_EditKeyUpHandler(gridName, cellId, key)

function UltraWebGrid1_GridCornerImageClickHandler(gridName)

function UltraWebGrid1_InitializeLayoutHandler(gridName)

function UltraWebGrid1_InitializeRowHandler(gridName, rowId)

function UltraWebGrid1_KeyDownHandler(gridName, cellId, key)

function UltraWebGrid1_KeyUpHandler(gridName, cellId, key)

function UltraWebGrid1_MouseDownHandler(gridName, id, button)

function UltraWebGrid1_MouseOutHandler(gridName, id, button)

function UltraWebGrid1_MouseUpHandler(gridName, id, button)

function UltraWebGrid1_RowSelectorClickHandler(gridName, rowId, button)

function UltraWebGrid1_TemplateUpdateCellsHandler(gridName, controlId, cellId)

function UltraWebGrid1_TemplateUpdateControlsHandler(gridName,controlId,cellId,value)

 

var oGrid = oUltraWebGrid1;        [oUltraWebGrid1 は Globle ]               

var oBands = oGrid.Bands;

var oBand = oBands[0];

var oColumns = oBand.Columns;

var count = oColumns.length;

var oRows = oGrid.Rows;       

 

 

前台属性(JavaScript用)

gridId:        UltraWebGrid1       

rowIdの形式:        UltraWebGrid1r_4

cellIdの形式:        UltraWebGrid1rc_4_1

Grid オブジェクト

{

        .RowSizing = 2;       

        .SelectTypeRow = 2;

}

行(Row オブジェクト):

{

        .Element.id ---------　形式:WebGrid名称+r_X(X:Row番号)  

                               例えば:UltraWebGrid1r_4

}

セル(Cell オブジェクト):

{

        .style.backgroundColor = "Red";

        .style.fontWeight = "bold";

        .Element.style.fontStyle = "italic";

        .Element.style.fontWeight = "bold";

        .Element.runtimeStyle.backgroundColor = "Red";

        .Element.id-----------  形式:WebGrid名称+rc_X_Y(X:Row番号,Y:Col番号)

                                例えば:UltraWebGrid1rc_4_1

}

列(column オブジェクト)

{

        .Key == "PostalCode"

}

前台函数(JavaScript用)

//***************************************

//関数名:igtbl_getGridById

//機　能:指定IdのWebGridの引用を取得

//引　数:WebGridのId

//戻り型:WebGridオブジェクト

//戻り値:オブジェクト

//***************************************

用法:   var grid = igtbl_getGridById("UltraWebGrid1");

 

//***************************************

//関数名:igtbl_getRowById

//機　能:現在のセルのRowオブジェクトを取得します。

//引　数:CellのId

//戻り型:Rowオブジェクト

//戻り値:オブジェクト

//***************************************

用法:   var row = igtbl_getRowById(cellId);

 

//***************************************

//関数名:igtbl_getColumnById

//機　能:指定IdのColumn引用を取得する

//引　数:CellのId

//戻り型:Columnオブジェクト

//戻り値:オブジェクト

//***************************************

用法:   var column = igtbl_getColumnById(cellId);

             if(column.Key == "PostalCode")

 

//***************************************

//関数名:igtbl_getCellById

//機　能:指定IdのCell引用を取得する

//引　数:CellのId

//戻り型:Cellオブジェクト

//戻り値:オブジェクト

//***************************************

用法:   var cell = igtbl_getCellById(cellId);

 

//***************************************

//関数名:igtbl_getActiveRow

//機　能:指定IdのWebGridの選択されるRowを取得

//引　数:WebGridのId

//戻り型:Rowオブジェクト

//戻り値:オブジェクト

//***************************************

用法:   var row = igtbl_getActiveRow("UltraWebGrid1");

 

//***************************************

//関数名:igtbl_setActiveRow

//機　能:指定のRow 選択する

//引　数:GridId,rowId

//戻り型:なし

//戻り値:なし

//***************************************

用法:        igtbl_setActiveRow('UltraWebGrid1',igtbl_getElementById("UltraWebGridr_3"));

 

//***************************************

//関数名:igtbl_getActiveCell

//機　能:指定IdのWebGridの選択されるCellを取得

//引　数:WebGridのId

//戻り型:Cellオブジェクト

//戻り値:オブジェクト

//***************************************

用法:   var cell = igtbl_getActiveCell("UltraWebGrid1");

 

//***************************************

//関数名:getRow

//機　能:指定番号のRow オブジェクトの引用を取得

//引　数:Row番号

//戻り型:オブジェクト

//戻り値:指定番号のRowオブジェクト

//***************************************

用法:   var oRow = oRows.getRow(i);

 

//***************************************

//関数名:getCell

//機　能:指定番号のCellオブジェクトの引用を取得

//引　数:Cell番号

//戻り型:オブジェクト

//戻り値:指定番号のCellオブジェクト

//***************************************

用法:   var row = igtbl_getRowById(cellId);

        var cell = row.getCell(16);

 

//***************************************

//関数名:getSelected

//機　能:指定のRow　の選択ステートをチャック

//引　数:なし

//戻り型:boolean

//戻り値:false:指定番号のRow 選択される

       true:指定番号のRow 選択されない

//***************************************

用法:   [oRow = oRows.getRow(i);]

        oRow.getSelected()

 

//***************************************

//関数名:setSelected

//機　能:指定のRowが選択される

//引　数:boolean

//戻り型:なし

//戻り値:なし

//***************************************

用法:   [oRow = oRows.getRow(i);]

        oRow.setSelected(true);

        oRow.setSelected(false);

 

//***************************************

//関数名:igtbl_selectRow

//機　能:指定IdのRowの選択ステートを設置

//引　数:WebGrid のId,Row のId,boolean,boolean

//戻り型:なし

//戻り値:なし

//***************************************

用法:   var row = igtbl_getActiveRow("UltraWebGrid1");

        igtbl_selectRow("UltraWebGrid1", row.Element.id, false, false);

 

//***************************************

//関数名:igtbl_selectCell

//機　能:指定IdのCellの選択ステートを設置

//引　数:WebGrid のId,Cell のId,boolean,boolean

//戻り型:なし

//戻り値:なし

//***************************************

用法:   var cell = igtbl_getActiveCell("UltraWebGrid1");

        igtbl_selectCell("UltraWebGrid1", cell.Element.id, false, false);

    

 

//***************************************

//関数名:setValue

//機　能:指定Cellの内容を設置

//引　数:内容

//戻り型:なし

//戻り値:なし

//***************************************

用法:   var cell = igtbl_getCellById(cellId);

             if(cell)

        {

                var elem = cell.Element;

                elem.runtimeStyle.backgroundColor = "Red";

                elem.style.backgroundColor = "Red";

                cell.setValue("ダブルクリック");

        }

 

//***************************************

//関数名:setExpanded

//機　能:

//引　数:

//戻り型:なし

//戻り値:なし

//***************************************

用法:        oRow.setExpanded(true);

 

 

後台属性：

１．UltraWebGrid1.DisplayLayout.CellClickActionDefault                セルのクリックイベント

                Case "設定なし"

                    UltraWebGrid1.DisplayLayout.CellClickActionDefault = CellClickAction.NotSet

                Case "セル選択"

                    UltraWebGrid1.DisplayLayout.CellClickActionDefault = CellClickAction.CellSelect

                Case "行選択"

                    UltraWebGrid1.DisplayLayout.CellClickActionDefault = CellClickAction.RowSelect

                Case "編集"

                    UltraWebGrid1.DisplayLayout.CellClickActionDefault = CellClickAction.Edit

 

 

２．UltraWebGrid1.DisplayLayout.SelectTypeRowDefault                行の選びタイプ

                Case "デフォルト"

                    UltraWebGrid1.DisplayLayout.SelectTypeRowDefault = SelectType.None

                Case "単一行"

                    UltraWebGrid1.DisplayLayout.SelectTypeRowDefault = SelectType.Single

                Case "複数行"

                    UltraWebGrid1.DisplayLayout.SelectTypeRowDefault = SelectType.Extended

 

３．UltraWebGrid1.DisplayLayout.SelectTypeColDefault                列の選びタイプ

                Case "デフォルト"

                    UltraWebGrid1.DisplayLayout.SelectTypeColDefault = SelectType.None

                Case "単一列"

                    UltraWebGrid1.DisplayLayout.SelectTypeColDefault = SelectType.Single

                Case "複数列"

                    UltraWebGrid1.DisplayLayout.SelectTypeColDefault = SelectType.Extended

 

４．UltraWebGrid1.DisplayLayout.SelectTypeCellDefault                セルの選びタイプ

                Case "デフォルト"

                    UltraWebGrid1.DisplayLayout.SelectTypeCellDefault = SelectType.None

                Case "単一セル"

                    UltraWebGrid1.DisplayLayout.SelectTypeCellDefault = SelectType.Single

                Case "複数セル"

                    UltraWebGrid1.DisplayLayout.SelectTypeCellDefault = SelectType.Extended

 

UltraWebGrid1.Rows(0).Cells(0).Activate()

关于WebGrid的最后一讲啦,主要是一些简单前台/后台操作小例子
1.前台验证某列是否为日期格式

 

< asp:customvalidator id = " vldRaiJyo "  runat = " server "  ControlToValidate = " txtTrick " >& nbsp; </ asp:customvalidator >