转载请注明出处: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" : 分页控件位置