DevExpress ASP.NET 使用经验谈(6)-ASPxGridView通过属性配置界面展现

上一节中,我们通过简单的配置,通过ASPxGridView控件的使用,完成了对数据库表的CRUD操作。

这样的界面展现,功能是达到了,但是操作体验上,还是有所欠缺的。

图一 默认生成的列表界面

图二 默认编辑界面

接下来,我们通过以下几步简单的设置,使界面操作更美观,更符合实际需求。

第一步,我们将显示为文字操作的Edit,New,Delete修改为图片,通过属性 ButtonType="Image" 来实现。

 <dx:GridViewCommandColumn VisibleIndex="0" ButtonType="Image">
       <EditButton Visible="true">
                  <Image ToolTip="编辑" Url="Assets/images/edit.png"></Image>
        </EditButton>
        <NewButton Visible="true">
                  <Image ToolTip="新增" Url="Assets/images/new.png"></Image>
        </NewButton>
         <UpdateButton Visible="true">
                  <Image ToolTip="保存" Url="Assets/images/save.gif"></Image>
         </UpdateButton>
          <CancelButton Visible="true">
                  <Image ToolTip="取消" Url="Assets/images/cancel.gif"></Image>
          </CancelButton>
</dx:GridViewCommandColumn>

第二步,我们将显示列表头文字换成中文显示,通过属性 Caption="中文字段名" 来实现,

通过Column的Visible属性,设置列的显示或隐藏,通过EditFormSettings的Visible设置编辑

状态下该字段的显示或隐藏,通过VisibleIndex来设置显示位置顺序。

  <dx:GridViewDataTextColumn FieldName="UserName" VisibleIndex="2" Caption="用户姓名" Visible="false">
         <EditFormSettings VisibleIndex="2" Visible="True" Caption="用户姓名" />
</dx:GridViewDataTextColumn>

第三步,配置扩展的属性。

SettingsBehavior

AllowSelectSingleRowOnly:设置单行的选择

AllowSelectByRowClick:通过单击选择行

AllowFocusedRow:允许行获得焦点

ConfirmDelete:是否弹出删除确认框

SettingsEditing

EditFormColumnCount:配置编辑界面每行所点列数

Settings

ShowFooter:是否显示脚

SettingsText

EmptyDataRow:空记录时的显示文字

ConfirmDelete:删除确认文字

SettingsPager

Mode:设置分页模式,ShowPager

PageSize:设置每页显示数

<SettingsBehavior ConfirmDelete="true" AllowFocusedRow="true" AllowSelectSingleRowOnly="true" AllowSelectByRowClick="true" />
<SettingsEditing EditFormColumnCount="2" />
<Settings ShowFooter="True" />
<SettingsText EmptyDataRow="无记录" ConfirmDelete="确定删除吗?" />
<SettingsPager Mode="ShowPager" PageSize="3" />

最终修改完成的代码如下:

<dx:ASPxGridView ID="ASPxGridView1" runat="server" AutoGenerateColumns="False" DataSourceID="XpoDataSource1" KeyFieldName="UserID" Theme="Aqua">
                <Columns>
                    <dx:GridViewCommandColumn VisibleIndex="0" ButtonType="Image">
                        <EditButton Visible="true">
                            <Image ToolTip="编辑" Url="Assets/images/edit.png"></Image>
                        </EditButton>
                        <NewButton Visible="true">
                            <Image ToolTip="新增" Url="Assets/images/new.png"></Image>
                        </NewButton>
                        <UpdateButton Visible="true">
                            <Image ToolTip="保存" Url="Assets/images/save.gif"></Image>
                        </UpdateButton>
                        <CancelButton Visible="true">
                            <Image ToolTip="取消" Url="Assets/images/cancel.gif"></Image>
                        </CancelButton>
                    </dx:GridViewCommandColumn>
                    <dx:GridViewDataTextColumn FieldName="UserID" ReadOnly="True" VisibleIndex="1" Visible="false">
                    </dx:GridViewDataTextColumn>
                    <dx:GridViewDataTextColumn FieldName="UserName" VisibleIndex="2" Caption="用户姓名" Visible="false">
                        <EditFormSettings VisibleIndex="2" Visible="True" Caption="用户姓名" />
                    </dx:GridViewDataTextColumn>
                    <dx:GridViewDataTextColumn FieldName="FirstName" VisibleIndex="3" Caption="名" Width="80px">
                        <EditFormSettings VisibleIndex="3" Visible="True" Caption="名" />
                        <CellStyle HorizontalAlign="Center" />
                        <HeaderStyle HorizontalAlign="Center" />
                    </dx:GridViewDataTextColumn>
                    <dx:GridViewDataTextColumn FieldName="LastName" VisibleIndex="4" Caption="姓" Width="80px">
                        <EditFormSettings VisibleIndex="4" Visible="True" Caption="姓" />
                        <CellStyle HorizontalAlign="Center" />
                        <HeaderStyle HorizontalAlign="Center" />
                    </dx:GridViewDataTextColumn>
                    <dx:GridViewDataTextColumn FieldName="MiddleName" VisibleIndex="5" Caption="教名" Width="100px">
                        <EditFormSettings VisibleIndex="5" Visible="False" Caption="教名" />
                        <CellStyle HorizontalAlign="Center" />
                        <HeaderStyle HorizontalAlign="Center" />
                    </dx:GridViewDataTextColumn>
                    <dx:GridViewDataTextColumn FieldName="EmailID" VisibleIndex="6" Caption="邮箱" Width="200px">
                        <EditFormSettings VisibleIndex="6" Visible="True" Caption="邮箱" ColumnSpan="2" />
                    </dx:GridViewDataTextColumn>
                </Columns>
                <SettingsBehavior ConfirmDelete="true" AllowFocusedRow="true" AllowSelectSingleRowOnly="true" AllowSelectByRowClick="true" />
                <SettingsEditing EditFormColumnCount="2" />
                <Settings ShowFooter="True" />
                <SettingsText EmptyDataRow="无记录" ConfirmDelete="确定删除吗?" />
                <SettingsPager Mode="ShowPager" PageSize="3" />
 </dx:ASPxGridView>

界面最终效果如下:

图三 经过美化的列表界面

图四 经过美化的编辑界面

通过上面几步的配置,完成了对界面的初步优化,灵活的显示隐藏控制,使得界面更符合我们实际

操作的需求。

完整代码下载地址:http://pan.baidu.com/s/1B6eHw

时间: 11-30

DevExpress ASP.NET 使用经验谈(6)-ASPxGridView通过属性配置界面展现的相关文章

DevExpress ASP.NET 使用经验谈(1)-XPO模型的创建

原文:DevExpress ASP.NET 使用经验谈(1)-XPO模型的创建 这个系列通过一些简单例子循序渐进,介绍DevExpress ASP.NET控件的使用.先来介绍一下XPO的使用,安装的DevExpress版本为DXperienceUniversal-12.2.4,使用Visual Studio 2012+Sql Server2005. 什么是XPO? XPO 是 eXpress Persistent Objects的缩写,它是DevExpress公司推出的一个运行在.NETFram

DevExpress ASP.NET 使用经验谈(4)-CriteriaOperator的使用

原文:DevExpress ASP.NET 使用经验谈(4)-CriteriaOperator的使用 上一节中,我们已经介绍了,使用CriteriaOperator表达式,获取对象数据. CriteriaOperator criteria = CriteriaOperator.Parse("[UserID]='" + obj.UserID + "'"); Users objnew = session.FindObject<Users>(criteria)

DevExpress ASP.NET 使用经验谈(2)-XPO对象的使用(使用默认数据连接)

原文:DevExpress ASP.NET 使用经验谈(2)-XPO对象的使用(使用默认数据连接) 接下来,我们通过一个控制台应用程序,介绍XPO对象的保存操作. 图一 添加新项目 图二 选择项目类型为控制台应用程序 查看生成的Program.cs代码文件,代码如下: using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks;

DevExpress ASP.NET 使用经验谈(9)- Dev控件客户端事件 ClientSideEvents

上一节,已经介绍了ASPxGridView的自定义列和基本事件 ,本节接着将介绍Dev控件的客户端事件模型. 在上节示例基础上,我们增加一行菜单,使用Dev的ASPxMenu来实现,如下图所示. 图一 添加菜单的界面 增加菜单的代码如下: <dx:ASPxMenu ID="ASPxMenu1" runat="server" RenderMode="Lightweight" Width="100%" ItemAutoWid

DevExpress ASP.NET 使用经验谈(8)-ASPxGridView自定义列和基本事件

为演示本节示例,我们在原来Users表增加[性别Gender].[兴趣爱好Hobbies],[CreateTime创建时间],[ModifyTime]修改时间这4个字段, ALTER TABLE [dbo].[Users] add [Gender] varchar(10) NULL GO ALTER TABLE [dbo].[Users] add [Hobbies] varchar(50) NULL GO ALTER TABLE [dbo].[Users] add [CreateTime] da

DevExpress ASP.NET 使用经验谈(5)-通过ASPxGridView实现CRUD操作

这节,我们将通过使用DevExpress的ASPxGridView控件,实现对数据的CRUD操作. 首先,我们在解决方案中,添加一个网站: 图一 添加新网站 图二 添加DevExpress.Data.v12.2.dll,DevExpress.Xpo.v12.2.dll,以及XPOModel的引用 图三 从工具栏拖放ASPxGridView与XpoDataSource 图四 设置XpoDataSource的类型名称 TypeName,先选择控件,右键-属性(或点击右上角小箭头) 图五 点击Type

DevExpress ASP.NET 使用经验谈(2)-XPO对象的使用(Save操作)

接下来,我们通过一个控制台应用程序,介绍XPO对象的保存操作. 图一 添加新项目 图二 选择项目类型为控制台应用程序 查看生成的Program.cs代码文件,代码如下: using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; namespace DevConsole { class Program { static voi

DevExpress Asp.net ASPxTreeList的基本使用之一

DevExpress Asp.net ASPxTreeList的基本使用之一 目录(?)[+] 本文来自CSDN博客转载请标明出处httpblogcsdnnetwServicesarchive200907254378771aspx DevExpress Aspnet ASPxTreeList的基本使用之一 本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/wServices/archive/2009/07/25/4378771.aspx DevExpress Asp

【DevExpress v17.2新功能预告】DevExpress ASP.NET Scheduler新的自适应功能

自适应Web设计可以帮助您解决各种尺寸的屏幕问题,网站的自适应网页设计可帮助您解决用户使用不同大小屏幕显示数据的问题. 在v17.2中,我们最大化了ASP.NET Scheduler的视图和可视化元素,以适应其父容器的宽度.以下ASP.NET Scheduler元素现在支持自适应布局: Agenda View Agenda View现在完全自适应.以下的Agenda View元素将自动调整为当前客户端宽度: "Date Header" column "Appointment