1)拖个UltraWebGrid到界面上,然后后台进行数据绑定我就不说了,大家有自己的方式。
2)套用一种格式 右击UltraWebGrid,选择Quick Design,然后在弹出窗口中挑选自己喜欢的模板(这跟MS的DataGrid差不多了): 记住要点击:Apply Preset才能生效的。 3)定义分页属性 UltraWebGrid的分页方式很多,我们展开DisplayLayout-> Pager属性,如图: 设置AllowPaging=True; //这样就可以看到分页了 我们采用QuickPages的StyleMode,设置QuickPages=4,这是说明,界面上显示为“当前面的前后四个分页数”。 然后设置我们的Pattern,这个模板就是用来自定义显示效果的,在这个Partern中,提供了一些欲定义的域: 我想,大家一看英文就知道什么意思了吧。 为了实现效果图中的样式,我定义为: <table width=100%> <tr> <td align=left> 页码:[currentpageindex]/[pagecount] 每页:[pagesize] </td> <td align=right> [default] <td> </tr> </table> [default]最好一定要啊。它是随着不同的分页模式显示不同的方式。 [page:1:第一页]:象这样的话,分页数的1分变成“第一页”的字样,我还没有发现此功能怎么使用比较好。 在这里最让我失望的就是没有RecordCount记录数,我想要实现这个,得用后台的代码自动添加了。 好了,方法就是这么简单,你想定义成什么样,就定义成什么样吧。 4)分页代码实现: 分页的代码是非常简单的,给UltraWebGrid添加PageIndexChange事件: private void UltraWebGrid2_PageIndexChanged(object sender, Infragistics.WebUI.UltraWebGrid.PageEventArgs e) { this.UltraWebGrid2.DisplayLayout.Pager.CurrentPageIndex=e.NewPageIndex; this.UltraWebGrid2.DataBind(); } 好了,一切都好了。当然,你完全可做的更漂亮一些。 |
个人提供测试代码(主要部分),比较简单:
前台代码:
-- <igtbl:UltraWebGrid id="UltraWebGrid1" style="Z-INDEX: 101; LEFT: 216px; POSITION: absolute; TOP: 48px"
-- runat="server" Width="325px" Height="200px">
-- <DisplayLayout RowHeightDefault="20px" Version="4.00" BorderCollapseDefault="Separate" Name="UltraWebGrid1">
-- <AddNewBox>
-- <Style BorderWidth="1px" BorderStyle="Solid" BackColor="LightGray">
--
--<BorderDetails ColorTop="White" WidthLeft="1px" WidthTop="1px" ColorLeft="White">
--</BorderDetails>
--
-- </Style>
-- </AddNewBox>
-- <Pager QuickPages="3" AllowPaging="True">
-- <Style BorderWidth="1px" BorderStyle="Solid" BackColor="LightGray">
--
--<BorderDetails ColorTop="White" WidthLeft="1px" WidthTop="1px" ColorLeft="White">
--</BorderDetails>
--
-- </Style>
-- </Pager>
-- <HeaderStyleDefault BorderStyle="Solid" BackColor="LightGray">
-- <BorderDetails ColorTop="White" WidthLeft="1px" WidthTop="1px" ColorLeft="White"></BorderDetails>
-- </HeaderStyleDefault>
-- <FrameStyle Width="325px" BorderWidth="1px" Font-Size="8pt" Font-Names="Verdana" BorderStyle="Solid"
-- Height="200px"></FrameStyle>
-- <FooterStyleDefault BorderWidth="1px" BorderStyle="Solid" BackColor="LightGray">
-- <BorderDetails ColorTop="White" WidthLeft="1px" WidthTop="1px" ColorLeft="White"></BorderDetails>
-- </FooterStyleDefault>
-- <EditCellStyleDefault BorderWidth="0px" BorderStyle="None"></EditCellStyleDefault>
-- <RowStyleDefault BorderWidth="1px" BorderColor="Gray" BorderStyle="Solid">
-- <Padding Left="3px"></Padding>
-- <BorderDetails WidthLeft="0px" WidthTop="0px"></BorderDetails>
-- </RowStyleDefault>
-- </DisplayLayout>
-- <Bands>
-- <igtbl:UltraGridBand></igtbl:UltraGridBand>
-- </Bands>
-- </igtbl:UltraWebGrid>
后台代码:
private DataTable GetData()
{
DataTable dt = new DataTable();
dt.Columns.Add("URL",typeof(string));
dt.Columns.Add("Label",typeof(string));
DataColumn dc = dt.Columns.Add("OnSite",typeof(bool));
dc.DefaultValue = false;
for(int i=0;i<30;i++)
{
dt.Rows.Add(new object[] {"www.baidu.com","baidu1"+i.ToString()});
dt.Rows.Add(new object[] {"www.google.com","google"+i.ToString()});
}
return dt;
}
private void Page_Load(object sender, System.EventArgs e)
{
// 在此处放置用户代码以初始化页面
this.UltraWebGrid1.DataSource = this.GetData();
UltraWebGrid1.DataBind();
}
#region Web 窗体设计器生成的代码
override protected void OnInit(EventArgs e)
{
//
// CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。
//
InitializeComponent();
base.OnInit(e);
}
/// <summary>
/// 设计器支持所需的方法 - 不要使用代码编辑器修改
/// 此方法的内容。
/// </summary>
private void InitializeComponent()
{
this.UltraWebGrid1.PageIndexChanged += new Infragistics.WebUI.UltraWebGrid.PageIndexChangedEventHandler(this.UltraWebGrid1_PageIndexChanged);
this.Load += new System.EventHandler(this.Page_Load);
}
#endregion
private void UltraWebGrid1_PageIndexChanged(object sender, Infragistics.WebUI.UltraWebGrid.PageEventArgs e)
{
this.UltraWebGrid1.DisplayLayout.Pager.CurrentPageIndex=e.NewPageIndex;
this.UltraWebGrid1.DataBind();
}