原创文章,转载请注明出处
作者: 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 SubERR_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 FunctionErr_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
>
193
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
