原创文章,转载请注明出处
作者: BoyLee 出处: Http://BoyLee.net首先安装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初始化的代码
1Private Sub uwgCustomer_InitializeLayout()Sub uwgCustomer_InitializeLayout(ByVal sender As Object, ByVal e As Infragistics.WebUI.UltraWebGrid.LayoutEventArgs) Handles uwgCustomer.InitializeLayout
2 On Error GoTo ERR_FLAG
3 Dim strSQL As String
4 Dim strErrMsg As String
5 Dim objConn As New clsAdoNetSql
6 Dim rdrAddr As SqlDataReader
7 Dim sel_addr As ValueList
8 Dim intI, intJ As Int16
9 Me.uwgCustomer.Columns(0).HeaderText = "お客様コード"
10 Me.uwgCustomer.Columns(1).HeaderText = "来場日"
11 Me.uwgCustomer.Columns(2).HeaderText = "名前(姓)<font color=red>※</font>"
12 Me.uwgCustomer.Columns(3).HeaderText = "名前(名)"
13 Me.uwgCustomer.Columns(4).HeaderText = "名前(せい)<font color=red>※</font>"
14 Me.uwgCustomer.Columns(5).HeaderText = "名前(めい)"
15 Me.uwgCustomer.Columns(6).HeaderText = "電話番号"
16 Me.uwgCustomer.Columns(7).HeaderText = "郵便"
17 Me.uwgCustomer.Columns(8).HeaderText = "番号"
18 Me.uwgCustomer.Columns(9).HeaderText = ""
19 Me.uwgCustomer.Columns(10).HeaderText = "都道府県"
20 Me.uwgCustomer.Columns(11).HeaderText = "市区町村"
21 Me.uwgCustomer.Columns(12).HeaderText = "町域"
22 Me.uwgCustomer.Columns(0).Width = Unit.Pixel(90)
23 Me.uwgCustomer.Columns(1).Width = Unit.Pixel(75)
24 Me.uwgCustomer.Columns(2).Width = Unit.Pixel(75)
25 Me.uwgCustomer.Columns(3).Width = Unit.Pixel(72)
26 Me.uwgCustomer.Columns(4).Width = Unit.Pixel(94)
27 Me.uwgCustomer.Columns(5).Width = Unit.Pixel(74)
28 Me.uwgCustomer.Columns(6).Width = Unit.Pixel(90)
29 Me.uwgCustomer.Columns(7).Width = Unit.Pixel(35)
30 Me.uwgCustomer.Columns(8).Width = Unit.Pixel(40)
31 Me.uwgCustomer.Columns(9).Type = ColumnType.Button
32 Me.uwgCustomer.Columns(9).CellButtonDisplay = CellButtonDisplay.Always
33 Me.uwgCustomer.Columns(9).Width = Unit.Pixel(50)
34 Me.uwgCustomer.Columns(9).DefaultValue = "検索"
35
36 Me.uwgCustomer.Columns(10).Width = Unit.Pixel(70)
37 Me.uwgCustomer.Columns(10).Type = ColumnType.DropDownList
38
39 Me.uwgCustomer.Columns(11).Width = Unit.Pixel(87)
40 Me.uwgCustomer.Columns(12).Width = Unit.Pixel(77)
41
42 strSQL = " SELECT PREFECTURES_CODE, "
43 strSQL &= " PREFECTURES_NAME "
44 strSQL &= " FROM CM_PREFECTURES "
45 rdrAddr = objConn.RunQueryCmd(strSQL)
46 sel_addr = Me.uwgCustomer.Columns(10).ValueList
47 While rdrAddr.Read
48 sel_addr.ValueListItems.Add(New ValueListItem)
49 sel_addr.ValueListItems(sel_addr.ValueListItems.Count - 1).DisplayText = rdrAddr("PREFECTURES_NAME")
50 sel_addr.ValueListItems(sel_addr.ValueListItems.Count - 1).DataValue = rdrAddr("PREFECTURES_CODE")
51 End While
52 rdrAddr.Close()
53 objConn.CloseConnection()
54 Exit Sub
55ERR_FLAG:
56 'デバッグ用の
57 strErrMsg = Err.Description
58 Exit Sub
59 End Sub
通过设置ColumnType来改变列属性,有Button,DropDownList等,普通列为可编辑的TextBox
这里比较简单,不再废话耽误大家时间了,下次讲如何绑定数据
posted @ 2007-03-06 14:44
BoyLee 阅读(3924)
评论(13) 编辑 收藏