原创|其它|编辑:郝浩|2011-04-02 11:48:20.000|阅读 3250 次
概述:说实话,对于这种控件类的使用和学习最快的入门 方式就是边看官方示例,边整理编程文档,此后基本上就可以脱离示例,看文档就可以编程了。此系列文档是ASPxGridView的编程有效参考,前前后后 整理了很多回了,给有需要的人使用。
# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>
说实话,对于这种控件类的使用和学习最快的入门 方式就是边看官方示例,边整理编程文档,此后基本上就可以脱离示例,看文档就可以编程了。此系列文档是ASPxGridView的编程有效参考,前前后后 整理了很多回了,给有需要的人使用。
功能概述
简单示例
(注意:FieldName 是区分大小写的)
<dxwgv:ASPxGridView ID="grid" runat="server" Width="100%"> <Columns> <dxwgv:GridViewDataColumn FieldName="ContactName" /> <dxwgv:GridViewDataColumn FieldName="CompanyName" /> <dxwgv:GridViewDataColumn FieldName="City" /> <dxwgv:GridViewDataColumn FieldName="Region" /> <dxwgv:GridViewDataColumn FieldName="Country" /> </Columns> </dxwgv:ASPxGridView> grid.DataSource = dt; grid.DataBind();
小贴士
(1)在web.config里面做配置
<pages> <controls> ... <add tagPrefix="dx" namespace="DevExpress.Web.ASPxEditors" assembly="DevExpress.Web.ASPxEditors.v9.3, Version=9.3.4.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"/> <add tagPrefix="dx" namespace="DevExpress.Web.ASPxHtmlEditor" assembly="DevExpress.Web.ASPxHtmlEditor.v9.3, Version=9.3.4.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"/> <add tagPrefix="dx" namespace="DevExpress.Web.ASPxGridView" assembly="DevExpress.Web.ASPxGridView.v9.3, Version=9.3.4.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"/> <add tagPrefix="dx" namespace="DevExpress.Web.ASPxGridView.Export" assembly="DevExpress.Web.v9.3, Version=9.3.4.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"/> <add tagPrefix="dx" namespace="DevExpress.Web.ASPxPanel" assembly="DevExpress.Web.v9.3, Version=9.3.4.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"/> <add tagPrefix="dx" namespace="DevExpress.Web.ASPxDataView" assembly="DevExpress.Web.v9.3, Version=9.3.4.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"/> <add tagPrefix="dx" namespace="DevExpress.Web.ASPxMenu" assembly="DevExpress.Web.v9.3, Version=9.3.4.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"/> <add tagPrefix="dx" namespace="DevExpress.Web.ASPxPanel" assembly="DevExpress.Web.v9.3, Version=9.3.4.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"/> <add tagPrefix="dx" namespace="DevExpress.Web.ASPxRoundPanel" assembly="DevExpress.Web.v9.3, Version=9.3.4.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"/> <add tagPrefix="dx" namespace="DevExpress.Web.ASPxCallbackPanel" assembly="DevExpress.Web.v9.3, Version=9.3.4.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"/> <add tagPrefix="dx" namespace="DevExpress.Web.ASPxUploadControl" assembly="DevExpress.Web.v9.3, Version=9.3.4.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"/> <add tagPrefix="dx" namespace="DevExpress.Web.ASPxRatingControl" assembly="DevExpress.Web.v9.3, Version=9.3.4.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"/> <add tagPrefix="dx" namespace="DevExpress.Web.ASPxObjectContainer" assembly="DevExpress.Web.v9.3, Version=9.3.4.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"/> <add tagPrefix="dx" namespace="DevExpress.Web.ASPxTabControl" assembly="DevExpress.Web.v9.3, Version=9.3.4.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"/> <add tagPrefix="dx" namespace="DevExpress.Web.ASPxClasses" assembly="DevExpress.Web.v9.3, Version=9.3.4.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"/> </controls> </pages> DevExpress 的web控件都处于不同的命名空间,使用起来很不方便。 经过这样处理后,统一了DevExpress web 控件的标签前缀,方便多了,如: <dx:ASPxGridView runat="server" ...> <dx:ASPxPageControl runat="server" ...> <dx:ASPxMenu runat="server" ...>
(2)在CS 文件加上这几个using,有效减少页面代码
using DevExpress.Web.Data;
using DevExpress.Web.ASPxEditors;
using DevExpress.Web.ASPxGridView;
(3)常用的主题设置
<dx:ASPxGridView runat="server" > <Styles CssFilePath="~/App_Themes/Glass/{0}/styles.css" CssPostfix="Glass"> <AlternatingRow Enabled="True" /> <Header ImageSpacing="5px" SortingImageSpacing="5px" > <BackgroundImage ImageUrl="~/app_themes/glass/web/mItemHBack.gif" /> </Header> </Styles> <Images ImageFolder="~/App_Themes/Glass/{0}/"> <CollapsedButton Height="12px" Width="11px" /> <DetailCollapsedButton Height="9px" Width="9px" /> <PopupEditFormWindowClose Height="17px" Width="17px" /> </Images> <Settings ShowFilterBar="Auto" /> <SettingsBehavior ConfirmDelete="true" AllowFocusedRow="True" /> <SettingsEditing Mode= "PopupEditForm" PopupEditFormModal= "true" PopupEditFormHorizontalAlign= "WindowCenter" PopupEditFormVerticalAlign= "WindowCenter" PopupEditFormAllowResize= "true" / > <SettingsText EmptyDataRow= "无数据" PopupEditFormCaption= "编辑" ConfirmDelete= "确定删除?" / > <SettingsPager PageSize="30" > <Summary AllPagesText="页: {0} / {1} ({2}行)" /> </SettingsPager> </dx:ASPxGridView>
(4)ASPxGridView 的属性设置方式比较独特
既可以传统的层层嵌套,如:
<dx:GridViewDataMemoColumn> <EditFormSettings ColumnSpan="2" /> <PropertiesMemoEdit Rows="4" /> </dx:GridViewDataMemoColumn>
也可以简化为“组合属性名”(姑且这样称呼吧)的方式:
<dx:GridViewDataMemoColumn PropertiesMemoEdit-Rows="4" EditFormSettings-ColumnSpan="2" />
好处是可以一行摆平,坏处是这些组合属性名的名称很长很长很长...
说实话,个人认为
ASPxGridView 属性设计得还是蛮严谨的,其属性层层嵌套,含义明确。
(而另外一个类似的产品,Infragistic公司的UltraGrid 属性设计则是完全失控了)
如果是winform倒无所谓,全部在cs代码中设置了,但作为aspnet控件的话写出来的层次就会很冗长
故我考虑这是devexpress公司为aspnet控件设计出来的一种折衷方案,允许以组合属性的方式来设置。
实际使用情况呢,有时候我觉得很方便,有时候觉得还是很冗长,看情况用吧。
几个常用属性
IsEditing : 是否处于编辑状态
IsNewRowEditing : 是否是新建行的编辑状态
几个常用方法
获取单元格的值
decimal change = (decimal)grid.GetRowValues(e.VisibleIndex, "Change");
获取模板中的控件
Label label = grid.FindRowCellTemplateControl(e.VisibleIndex, null, "changePercent") as Label;
概述设置(Settings)
<Settings GridLines= "Vertical" : 网格样式 Vertical, Both, None ShowGroupPanel= "True" : 分组面板 ShowFooter= "True" : 脚注面板 ShowFilterRow= "True" : 过滤器行 ShowHeaderFilterButton= "true" : 表头过滤按钮 ShowGroupFooter= "VisibleAlways" : 分组脚注面板 Hidden | VisibleIfExpand | VisibleAlways ShowPreview= "true" : 预览面板 ShowVerticalScrollBar= "True" : 垂直滚动条 VerticalScrollableHeight= "250" : 垂直滚动条 / >
行为设置(SettingsBehavior)
<SettingsBehavior AllowDragDrop= "False" : 允许托拽 ColumnResizeMode= "Control" : 列宽度调整模式 AllowFocusedRow= "True" : 鼠标点击选择行 / >
分页(SettingsPager)
<SettingsPager PageSize= "30" : 分页大小 Mode= "ShowAllRecords" : 展示模式 SEOFriendly= "Enabled" : Search engine friendly Position= "TopAndBottom" : 分页控件位置 > <Summary AllPagesText="页: {0} / {1} ({2}行)" /> </SettingsPager>
文本设置(SettingsText)
<SettingsText Title= "标题" EmptyDataRow= "无数据" PopupEditFormCaption= "编辑" ConfirmDelete= "确定删除?" / >
Loading 面板设置(SettingsLoadingPanel)
<SettingsLoadingPanel Mode="ShowOnStatusBar" />
编辑视图设置(SettingsEditing)
<SettingsEditing PopupEditFormWidth = "600px" NewItemRowPosition = "Bottom" Mode = "PopupEditForm" / >
编辑模式 SettingsEditing.Mode
EditForm : 当前行转化为表单,嵌入在行中
EditFormAndDisplayRow : 同EditForm,但保留当前行
Inline : 在当前行现场编辑
PopupEditForm : 弹出窗口编辑
集中式样式
<Styles> <Header HorizontalAlign="Center" /> : 标题居中对齐 <AlternatingRow Enabled="true"/> : 交错行效果 <CommandColumn Paddings-Padding="1" /> : </Styles>
列样式
<dxwgv:GridViewDataTextColumn FieldName="Total" UnboundType="Decimal"> <FooterCellStyle ForeColor="Brown"/> </dxwgv:GridViewDataTextColumn>
数字日期格式
金额:
<dxwgv:GridViewDataTextColumn FieldName="UnitPrice" > <PropertiesTextEdit DisplayFormatString="c" /> </dxwgv:GridViewDataTextColumn>
时间 :
<dxwgv:GridViewDataDateColumn Caption="Time" FieldName="Time"> <PropertiesDateEdit DisplayFormatString="HH:mm:ss" /> <CellStyle HorizontalAlign="Right" /> </dxwgv:GridViewDataDateColumn>
图像
<Images ImageFolder="~/App_Themes/Glass/{0}/"> <CollapsedButton Height="12px" Width="11px" /> <DetailCollapsedButton Height="9px" Width="9px" /> <PopupEditFormWindowClose Height="17px" Width="17px" /> </Images>
间隔分组:将时间日期字段按个性分组,如年、月、日、周、季度、上周、下周.....
<dxwgv:GridViewDataDateColumn FieldName="OrderDate" VisibleIndex="3" GroupIndex="0"> <Settings GroupInterval="DateYear"/> </dxwgv:GridViewDataDateColumn>
汇总
<TotalSummary> <dxwgv:ASPxSummaryItem FieldName="CompanyName" SummaryType="Count"/> <dxwgv:ASPxSummaryItem FieldName="Total" SummaryType="Sum" DisplayFormat="c"/> <dxwgv:ASPxSummaryItem FieldName="Quantity" SummaryType="Min" /> <dxwgv:ASPxSummaryItem FieldName="Quantity" SummaryType="Average" /> <dxwgv:ASPxSummaryItem FieldName="Quantity" SummaryType="Max" /> </TotalSummary>
分组汇总
<GroupSummary> <dxwgv:ASPxSummaryItem FieldName="Country" SummaryType="Count" /> <dxwgv:ASPxSummaryItem FieldName="Quantity" SummaryType="Sum" /> <dxwgv:ASPxSummaryItem FieldName="Total" SummaryType="Sum" DisplayFormat="{0:c}"/> </GroupSummary>
排序
默认就是支持点击标题排序的,不过注意Page_Load中不能用 IsPostBack,如:
protected void Page_Load(object sender, EventArgs e)
{
grid.DataSource = ....;
grid.DataBind();
}
ASPxGridView 在每次请求来的时候先绑定,然后再根据排序或分页请求,过滤数据后展示给用户
当然,你也可以像 GridView 那样在服务器端自己写排序或者分页代码.
指定列的排序顺序
<dxwgv:GridViewDataColumn FieldName="ContactName" SortOrder="Ascending" />
用代码指定排序列集合
grid.GroupSummarySortInfo.Clear();
DevExpress.Data.ColumnSortOrder sortOrder = DevExpress.Data.ColumnSortOrder.Ascending; //Descending
grid.GroupSummarySortInfo.AddRange(new ASPxGroupSummarySortInfo( "Country", grid.GroupSummary["Total"], sortOrder));
导出文件
<dxwgv:ASPxGridViewExporter ID="gvExporter" runat="server" GridViewID="gv" /> this.gridExporter.WritePdfToResponse(); this.gridExporter.WriteXlsToResponse(); this.gridExporter.WriteRtfToResponse(); this.gridExporter.WriteCsvToResponse();
服务器端杂代码
grid.BeginUpdate();
grid.ClearSort();
grid.GroupBy((GridViewDataColumn)grid.Columns[ "Country"]);
grid.EndUpdate();
grid.ExpandAll();
grid.FindRowCellTemplateControl(e.VisibleIndex, null, "changePercent") as Label;
(慧都控件网版权所有,转载请注明出处,否则追究法律责任)
本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn
文章转载自:老高哥博客