DevExpress ASPxGridView 使用文档一：概述

转载请注明出处：http://surfsky.cnblogs.com/

前言

    说实话，对于这种控件类的使用，我并不喜欢使用或者编写教程之类的文章，一来本来就很简单，二来实在没有这种时间。就我的经验而言，控件类学习最快的入门方式就是边看官方示例，边整理编程文档，此后基本上就可以脱离示例，看文档就可以编程了。此系列文档是ASPxGridView的编程有效参考，前前后后整理了很多回了，给有需要的人使用：）

---------------------------------------------------------
-- ASPxGridView 概述
---------------------------------------------------------

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

 

资源
    官方主页： http://www.devexpress.com/
    论坛：

 

简单示例
    （注意：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;