說實(shí)話，對于這種控件類的使用和學(xué)習(xí)最快的入門 方式就是邊看官方示例，邊整理編程文檔，此后基本上就可以脫離示例，看文檔就可以編程了。此系列文檔是ASPxGridView的編程有效參考，前前后后 整理了很多回了，給有需要的人使用。

ASPxGridView 概述

功能概述

• DevExpress 公司提供的優(yōu)秀的 aspnet 網(wǎng)格控件
• 豐富的內(nèi)置樣式
• 內(nèi)建的 Ajax 操作
• 提供客戶端 API
• 內(nèi)置的排序，分頁，分組，過濾功能，無需另外編碼
• 支持多種現(xiàn)場編輯模式： inline， EditForm, EditFormAndDisplayRow, PopupEditForm
• 可定制模板，支持卡片視圖、主從表視圖

簡單示例

（注意：FieldName 是區(qū)分大小寫的）
   

 <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控件都處于不同的命名空間，使用起來很不方便。
        經(jīng)過這樣處理后，統(tǒng)一了DevExpress web 控件的標(biāo)簽前綴，方便多了，如：
            <dx:ASPxGridView    runat="server" ...>
            <dx:ASPxPageControl runat="server" ...>
            <dx:ASPxMenu        runat="server" ...>

（2）在CS 文件加上這幾個(gè)using，有效減少頁面代碼

using DevExpress.Web.Data;
using DevExpress.Web.ASPxEditors;
using DevExpress.Web.ASPxGridView;

（3）常用的主題設(shè)置

<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= "無數(shù)據(jù)" 
PopupEditFormCaption= "編輯" 
ConfirmDelete= "確定刪除？" 
/ >
<SettingsPager PageSize="30" >
<Summary AllPagesText="頁: {0} / {1} ({2}行)" />
</SettingsPager>
</dx:ASPxGridView>

（4）ASPxGridView 的屬性設(shè)置方式比較獨(dú)特

既可以傳統(tǒng)的層層嵌套，如：

<dx:GridViewDataMemoColumn>
<EditFormSettings ColumnSpan="2" />
<PropertiesMemoEdit Rows="4" />
</dx:GridViewDataMemoColumn>

也可以簡化為“組合屬性名”（姑且這樣稱呼吧）的方式：

<dx:GridViewDataMemoColumn PropertiesMemoEdit-Rows="4" EditFormSettings-ColumnSpan="2"  />

好處是可以一行擺平，壞處是這些組合屬性名的名稱很長很長很長...
說實(shí)話，個(gè)人認(rèn)為
ASPxGridView 屬性設(shè)計(jì)得還是蠻嚴(yán)謹(jǐn)?shù)模鋵傩詫訉忧短祝x明確。
（而另外一個(gè)類似的產(chǎn)品，Infragistic公司的UltraGrid 屬性設(shè)計(jì)則是完全失控了）
如果是winform倒無所謂，全部在cs代碼中設(shè)置了，但作為aspnet控件的話寫出來的層次就會(huì)很冗長
故我考慮這是devexpress公司為aspnet控件設(shè)計(jì)出來的一種折衷方案，允許以組合屬性的方式來設(shè)置。
實(shí)際使用情況呢，有時(shí)候我覺得很方便，有時(shí)候覺得還是很冗長，看情況用吧。

幾個(gè)常用屬性

IsEditing         : 是否處于編輯狀態(tài)
IsNewRowEditing   : 是否是新建行的編輯狀態(tài)

幾個(gè)常用方法

    獲取單元格的值
        decimal change = (decimal)grid.GetRowValues(e.VisibleIndex, "Change");
    獲取模板中的控件
        Label label = grid.FindRowCellTemplateControl(e.VisibleIndex, null, "changePercent") as Label;

設(shè)置(settings)

概述設(shè)置（Settings）

                                <Settings 
        GridLines= "Vertical"            : 網(wǎng)格樣式 Vertical, Both, None
        ShowGroupPanel= "True"           : 分組面板
        ShowFooter= "True"               : 腳注面板
        ShowFilterRow= "True"            : 過濾器行
        ShowHeaderFilterButton= "true"   : 表頭過濾按鈕
        ShowGroupFooter= "VisibleAlways" : 分組腳注面板 Hidden | VisibleIfExpand | VisibleAlways
        ShowPreview= "true"              : 預(yù)覽面板
        ShowVerticalScrollBar= "True"    : 垂直滾動(dòng)條
        VerticalScrollableHeight= "250"  : 垂直滾動(dòng)條
        / >

行為設(shè)置（SettingsBehavior）

    <SettingsBehavior 
        AllowDragDrop= "False"           : 允許托拽
        ColumnResizeMode= "Control"      : 列寬度調(diào)整模式
        AllowFocusedRow= "True"          : 鼠標(biāo)點(diǎn)擊選擇行
        / >

分頁（SettingsPager）

    <SettingsPager 
        PageSize= "30"                   : 分頁大小
        Mode= "ShowAllRecords"           : 展示模式
        SEOFriendly= "Enabled"           : Search engine friendly
        Position= "TopAndBottom"         : 分頁控件位置
        >
        <Summary AllPagesText="頁: {0} / {1} ({2}行)" />
    </SettingsPager>

文本設(shè)置（SettingsText）

    <SettingsText
        Title= "標(biāo)題"
        EmptyDataRow= "無數(shù)據(jù)" 
        PopupEditFormCaption= "編輯" 
        ConfirmDelete= "確定刪除？" 
        / >

Loading 面板設(shè)置（SettingsLoadingPanel）

<SettingsLoadingPanel Mode="ShowOnStatusBar" />

編輯視圖設(shè)置（SettingsEditing）

<SettingsEditing 
PopupEditFormWidth = "600px" 
NewItemRowPosition = "Bottom"
Mode = "PopupEditForm"
/ >

編輯模式 SettingsEditing.Mode
EditForm               : 當(dāng)前行轉(zhuǎn)化為表單，嵌入在行中
EditFormAndDisplayRow  : 同EditForm，但保留當(dāng)前行
Inline                 : 在當(dāng)前行現(xiàn)場編輯
PopupEditForm          : 彈出窗口編輯

樣式 & 格式

集中式樣式

<Styles>
<Header HorizontalAlign="Center" />      : 標(biāo)題居中對齊
<AlternatingRow Enabled="true"/>         : 交錯(cuò)行效果
<CommandColumn Paddings-Padding="1" />   : 
</Styles>

列樣式

    <dxwgv:GridViewDataTextColumn FieldName="Total" UnboundType="Decimal">
        <FooterCellStyle ForeColor="Brown"/>
    </dxwgv:GridViewDataTextColumn>

數(shù)字日期格式

    金額:

        <dxwgv:GridViewDataTextColumn FieldName="UnitPrice" >
            <PropertiesTextEdit DisplayFormatString="c" />
        </dxwgv:GridViewDataTextColumn>

    時(shí)間 :
 

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

分組 & 匯總 & 排序

間隔分組：將時(shí)間日期字段按個(gè)性分組，如年、月、日、周、季度、上周、下周.....

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

雜

排序

      默認(rèn)就是支持點(diǎn)擊標(biāo)題排序的，不過注意Page_Load中不能用 IsPostBack，如：
        protected void Page_Load(object sender, EventArgs e)
        {
            grid.DataSource = ....;
            grid.DataBind();
        }
        ASPxGridView 在每次請求來的時(shí)候先綁定，然后再根據(jù)排序或分頁請求，過濾數(shù)據(jù)后展示給用戶
        當(dāng)然，你也可以像 GridView 那樣在服務(wù)器端自己寫排序或者分頁代碼.

指定列的排序順序

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

導(dǎo)出文件

<dxwgv:ASPxGridViewExporter ID="gvExporter" runat="server" GridViewID="gv" />
    this.gridExporter.WritePdfToResponse();
    this.gridExporter.WriteXlsToResponse();
    this.gridExporter.WriteRtfToResponse();
    this.gridExporter.WriteCsvToResponse();

服務(wù)器端雜代碼

grid.BeginUpdate();
grid.ClearSort();
grid.GroupBy((GridViewDataColumn)grid.Columns[ "Country"]);
grid.EndUpdate();
grid.ExpandAll();
grid.FindRowCellTemplateControl(e.VisibleIndex, null, "changePercent") as Label;

（慧都控件網(wǎng)版權(quán)所有，轉(zhuǎn)載請注明出處，否則追究法律責(zé)任）