UltraWebGrid使用系列(一)

原创文章,转载请注明出处
作者: 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(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
这里比较简单,不再废话耽误大家时间了,下次讲如何绑定数据

0
0
(请您对文章做出评价)
« 上一篇：急了一身汗终于搞定了------不能粗心啊
» 下一篇：UltraWebGrid使用系列(二)
posted @ 2007-03-06 14:44 BoyLee 阅读(5956) 评论(13)  编辑 收藏 网摘

  回复  引用  查看    
#1楼2007-07-20 09:22 | temptation      
nnd，鬼子就喜欢用 xxxgrid ......
要不就来些变态的报表

  回复  引用  查看    
#2楼[楼主]2007-07-20 12:39 | BoyLee      
@temptation
嗯.我都是 ActiveReports都弄过N个了
  回复  引用    
#3楼2007-09-16 20:02 | mghohoo[未注册用户]
<igtbl:UltraGridColumn BaseColumnName="ReporterName" HeaderText="记者名称" IsBound="True" DataType="System.String" Key="ReporterName">
<Header Caption="记者名称">
</Header>
</igtbl:UltraGridColumn>
请问一下这样为什么无法绑定？数据能正常查询的，绑定的是datatable，读取datatable也发觉没有问题。估计是前台有问题，但我暂时还不知道错在哪里。。。
谢谢
  回复  引用  查看    
#4楼[楼主]2007-09-17 10:43 | BoyLee      
@mghohoo
前台格式写错了吧.而且绑定的话,grid列和datatable列要一致.你自己检查一下看看.我现在手头机器没装这个
  回复  引用    
#5楼2007-09-17 12:53 | mghohoo[未注册用户]
@BoyLee
不能啊。。。我这样绑定的，是绑定databale的，列名也是ReporterName。

<igtbl:UltraGridColumn BaseColumnName="ReporterName" IsBound="True" DataType="System.String" Key="ReporterName">

还想请问一下，绑定是用BaseColumnName吧，那key的作用是？
  回复  引用    
#6楼2007-09-17 13:29 | mghohoo[未注册用户]
原来要用defaultview的，偶晕菜了。还是谢谢卡西莫多。
想问问，datareader似乎不行～
  回复  引用    
#7楼2007-09-17 13:35 | mghohoo[未注册用户]
晕了，连reader也可以了，问题还真复杂
  回复  引用  查看    
#8楼[楼主]2007-09-18 10:15 | BoyLee      
汗.搞定了就好.
里面东西是挺多的.我写这个其实也是记下来自己用.不可能全记得住.你可以把其他几个日志里的内容拷下来.我是在公司一个文档里整理出来的.
  回复  引用    
#9楼2007-09-22 20:13 | 皮皮鲁[未注册用户]
谢谢哦！

不过能不能弄成是中文的，看的好不舒服哦，呵呵，


  回复  引用  查看    
#10楼[楼主]2007-10-08 09:14 | BoyLee      
@皮皮鲁
貌似这玩意就日本用的多啊.
  回复  引用    
#11楼2008-09-10 09:04 | 阿辉[未注册用户]
兄弟，请问如何访问UltraWebGrid某行某列内dropdownlist控件的值阿（dropdownlist是预先在前台CellTemplate里定义好的模板列）