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

  • 相关阅读:
    【完结】php+MySQL实战案例【九】总结及源码分享
    php+MySQL实战案例【八】用户注册
    php+MySQL实战案例【七】数据编辑、删除
    php+MySQL实战案例【六】数据分页查询
    php+MySQL实战案例【五】新增用户
    php+MySQL实战案例【四】管理员登录
    php+MySQL实战案例【三】数据表设计
    php+MySQL实战案例【二】php数据库辅助类
    5700清空所有配置的方法
    华为设备默认console密码
  • 原文地址:https://www.cnblogs.com/surfsky/p/1798904.html
Copyright © 2020-2023  润新知