DevExpress.Web.ASPxGridView

DevExpress.Web.ASPxGridView概述

说实话，对于这种控件类的使用和学习最快的入门 方式就是边看官方示例，边整理编程文档，此后基本上就可以脱离示例，看文档就可以编程了。此系列文档是ASPxGridView的编程有效参考，前前后后 整理了很多回了，给有需要的人使用。

ASPxGridView 概述

功能概述

DevExpress 公司提供的优秀的 aspnet 网格控件
丰富的内置样式
内建的 Ajax 操作
提供客户端 API
内置的排序，分页，分组，过滤功能，无需另外编码
支持多种现场编辑模式： inline， EditForm, EditFormAndDisplayRow, PopupEditForm
可定制模板，支持卡片视图、主从表视图

简单示例

（注意：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）

<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;