简单实用的商品购物和添加购物车界面设计
当前位置： >
> 简单实用的商品购物和添加购物车界面设计
这是一款简单实用的商品购物和添加购物车界面设计方案。用户可以在商品购物界面中预览各种型号、颜色、尺寸的商品。然后通过点击添加到购物车按钮就可以将该商品添加到购物车中，操作简单直观。
浏览器兼容性
这是一款使用和制作的简单实用的商品购物和添加购物车界面设计方案。用户可以在商品购物界面中预览各种型号、颜色、尺寸的商品。然后通过点击添加到购物车按钮就可以将该商品添加到购物车中，操作简单直观。
在传统的购物网站中，用户在商品展示界面看中了一件商品之后，点击这件商品的缩略图，然后可以键入到对应水平的子页面中。在这个子页面中，用户可以选择查看一些商品的属性，然后把商品添加到购物车中。但是在这个购物车界面设计中，用户可以直接在购物界面查看商品的属性，并直接将商品添加到购物车中，简化了用户的操作，大大提升了用户的体验度。
通过在商品预览图界面添加“快速添加到购物车”按钮，可以减少用户的操作步骤，提升用户体验，增加转化率。
该购物界面的HTML结构使用一个无序列表来制作。每一个无序列表项中又包含一个无序列表，由于制作商品的图片画廊。div.cd-customization是包含商品的属性和“添加到购物车”按钮的面板。div.cd-item-info是商品的名称和价格。
&ul class="cd-gallery"&
&div class="cd-single-item"&
&a href="#0"&
&ul class="cd-slider-wrapper"&
&li class="selected"&&img src="img/thumb-1.jpg" alt="Preview image"&&/li&
&li&&img src="img/thumb-2.jpg" alt="Preview image"&&/li&
&!-- other product images here --&
&div class="cd-customization"&
&div class="color" data-type="select"&
&li class="color-1 active"&color-1&/li&
&li class="color-2"&color-2&/li&
&!-- other product colors here --&
&div class="size" data-type="select"&
&li class="small active"&Small&/li&
&li class="medium"&Medium&/li&
&!-- other product sizes here --&
&button class="add-to-cart"&
&em&Add to Cart&/em&
&svg x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32"&
&path stroke-dasharray="19.79 19.79" stroke-dashoffset="19.79" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" d="M9,17l3.9,3.9c0.1,0.1,0.2,0.1,0.3,0L23,11"/&
&/div& &!-- .cd-customization --&
&button class="cd-customization-trigger"&Customize&/button&
&/div& &!-- .cd-single-item --&
&div class="cd-item-info"&
&b&&a href="#0"&Product Name&/a&&/b&
&em&$9.99&/em&
&/div& &!-- cd-item-info --&
&!-- other list items here --&
&/ul& &!-- cd-gallery --&
对于商品的图片画廊，默认情况下，列表项使用绝对定位，并被移动到它的父元素.cd-gallery之外，因此它们是不可见的。它们使用了两个class：.selected用于添加到列表项的第一项，使其可见，.move-left，图片向左移动，使其不可见。
.cd-slider-wrapper {
.cd-slider-wrapper li {
visibility:
/* by default, move the product image to the right*/
transform: translateX(100%);
transition: transform 0.3s 0s, visibility 0s 0.3s;
.cd-slider-wrapper li.selected {
/* this is the visible product image */
visibility:
z-index: 1;
transform: translateX(0);
transition: transform 0.3s 0s, visibility 0s 0s;
.cd-slider-wrapper li.move-left {
/* move the product image to the left */
transform: translateX(-100%);
.cd-customization元素在用户用鼠标滑过商品缩略图时才被显示出来。它使用绝对定位并放置在父元素.cd-single-item的下面。
为了创建自定义选项（商品的颜色和尺寸），这里使用了不同的&ul&元素，它们都被包裹在div[data-type="select"]元素中。&ul&元素使用绝对定位，并相对于他们的父元素居中。它们的父元素div[data-type="select"]有固定的高度（34px）以及overflow:hidden属性。无序列表中的每一个列表项的高度都和div[data-type="select"]相同，因此默认情况下，只有被选择的项是可见的。
当用户点击了某个自定义选项时，div[data-type="select"]的overflow属性被设置为可见，这样整个&ul&元素都被显示出来。
.cd-customization {
bottom: 0;
width: 100%;
visibility:
opacity: 0;
.no-touch .cd-single-item:hover .cd-customization {
/* product customization visible */
pointer-events:
visibility:
opacity: 1;
.cd-customization .color, .cd-customization .size {
height: 34
.cd-customization .color ul, .cd-customization .size ul {
display: inline-
left: 50%;
transform: translateX(-50%) translateY(-50%);
width: 100%;
.cd-customization .color.is-open, .cd-customization .size.is-open {
/* color/size list open - make ul element visible */
为了确保被选择的&li&元素一直可见，插件中通过创建.selected-n class对&ul&元素中的列表项进行了重新排列。例如：当第3个列表项被选择的时候，.selected-3会被添加到div[data-type="select"]中。
.cd-customization .color.selected-3 ul li:first-of-type,
.cd-customization .size.selected-3 ul li:first-of-type {
/* third option selected in the ul.color/ul.size list */
transform: translateY(0);
.cd-customization .color.selected-3 ul li:nth-of-type(2),
.cd-customization .size.selected-3 ul li:nth-of-type(2) {
transform: translateY(100%);
.cd-customization .color.selected-3 ul li:nth-of-type(3),
.cd-customization .size.selected-3 ul li:nth-of-type(3) {
transform: translateY(-100%);
“添加到购物车”按钮.add-to-cart由一个&em&元素（按钮上的文本）和一个（check图标）组成。默认情况下，图标是不可见的。
当商品被添加到购物车的时候，.add-to-cart按钮被添加了.is-added class：此时&em&元素被隐藏（移动到左边），SVG图标被移动回中间，然后开始绘制动画。
.cd-customization .add-to-cart em {
/* this is the button text message */
width: 100%;
height: 100%;
.cd-customization .add-to-cart svg {
/* this is the check icon */
left: 50%;
width: 100%;
/* move the icon on the right - outside the button */
transform: translateX(50%) translateY(-50%);
.cd-customization .add-to-cart.is-added em {
/* product added to the cart - hide text message on the left with no transition*/
transform: translateX(-100%);
.cd-customization .add-to-cart.is-added svg {
/* product added to the cart - move the svg back inside the button */
transform: translateX(-50%) translateY(-50%);
SVG图标的绘制动画使用的是stroke-dasharray和stroke-dashoffset属性。如果你对SVG感兴趣，可以点击这里查看关于。
&svg x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32"&
&path stroke-dasharray="19.79 19.79" stroke-dashoffset="19.79" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" d="M9,17l3.9,3.9c0.1,0.1,0.2,0.1,0.3,0L23,11"/&
javascript代码请参考下载文件。
本文版权属于jQuery之家，转载请注明出处：
您已经顶过了哦！购物网站 - 触屏版 - 阿里云
项目demo地址github源码地址首页前言这篇文章是总结自己写项目时的思路,遇到的问题,和学到的东西,本文只截取一部分来讲,源码已奉上,觉得项目还行的点个赞吧,谢谢一、搭建环境安装vue-clinpminstall-gvue-cli创建webpack项目vueinitwebpackvoguecdvogue安装依赖npminstall安装vue-routernpminstallvue-router--save-dev安装vuexnpminstallvuex--save-dev
大家几乎都有在网上购物的经验,有的网站会有一个商品放大镜功能,就是把鼠标移到图片上的时候,旁边会有另外一张大的图片展示,等同于放大镜效果,那这样的效果怎样实现的呢,我把代码发给大家,请大家参考。&!DOCTYPEhtml&&htmllang=&en&&&head&&metacharset=&UTF-8&&&title&放大镜&/title&&style&
介绍前端的css框架用了bootstrap,以及bootstrap的JS组件,以及很好用的angular(angular大法好),项目一共包含了7个静态界面,静态界面的数据展示都使用了angularJS,后端是基于java的spring,容器为tomcat,项目代码分享到百度云盘,这个项目的优势是,所有的显示都是在前端完成,数据交互也是通过ajax完成,没有频繁的页面跳转;先上两张商城的主图:图一:、图2:该页面可以完成商品的评价,添加商品,商品的搜索等功能,界面JSP代码:
单页面网页内容较多,页面长度较大,需要方便快速的在页面的不同位置进行定位,所以浮动菜单逐渐流行了起来,如下图男装、女装、美妆等。这种菜单功能分为两部分:1、点击菜单项,网页滚动到对应位置,可简单通过锚点实现;2、滚动页面的时候,菜单项的选中状态要跟着改变,这就需要监听网页的滚动事件并通过一点计算来实现了;计算scrollTop和各个div的offsetTop的大小关系,判断现在网页显示的位置在什么地方,再根据计算的结果给对应的菜单项添加样式。比如第二个div的offset()
本周其实没有学多少东西,老师带着写了两个不完整的项目,第一个是新闻综合管理系统,另一个是类似与淘宝样式的购物网站,新闻综合管理系统包括了用户的登录,新闻列表的查询,新闻列表的排序和分页等。购物网站则包含了验证码,对象状态保持的应用。mvc3的初步应用,其中还包括jquery,异步提交等,可以算是比较综合的了,其中的怎样建立两个数据表的关系是一个重点。解决方案是在model层中,按照外键表建立一个实体类,并把被参照的主键表声明成该实体类的一个字段,通过字段来调用主键表里的成员从
部分购物网站用这个功能放购物车或商品分类导航,使产品页面很长的时候,侧边栏能始终固定发挥它应有的作用,有的网站用这个功能来边栏的广告。jQuery代码:varrollSet=$('#Roll');//检查对象,#sidebar-tab是要随滚动条固定的ID,可根据需要更改varoffset=rollSet.offset();$(window).scroll(function(){&//检查对象的顶部是否在游览器可见的范围内&varscrollTop=$(w
目前,主要的购物网站都采用了这种加载方式。今天在一个网友的站里发现一个图片延迟加载的插件,很好用,在这里介绍一下。先介绍一下图片延迟加载原理。我们需要先将图片的真实地址保存在一个自定义的属性中(属性名任你发挥吧,这里我用的是lazy-src),而图片的src属性中用一个占位图片来替代,这个占位图片当然是越小越好,它基本上只干活、不露面。&imgsrc=&images/placeholder.png&lazy-src=&images/real
&!DOCTYPEhtmlPUBLIC&-//W3C//DTDHTML4.01Transitional//EN&&http://www.w3.org/TR/html4/loose.dtd&&&html&&&&&head&&&&&&&&&metahttp-equiv=&Content-Ty
单页面网页内容较多,页面长度较大,需要方便快速的在页面的不同位置进行定位,所以浮动菜单逐渐流行了起来,如下图男装、女装、美妆等。这种菜单功能分为两部分:1、点击菜单项,网页滚动到对应位置,可简单通过锚点实现;2、滚动页面的时候,菜单项的选中状态要跟着改变,这就需要监听网页的滚动事件并通过一点计算来实现了;计算scrollTop和各个div的offsetTop的大小关系,判断现在网页显示的位置在什么地方,再根据计算的结果给对应的菜单项添加样式。比如第二个div的offset()
本周其实没有学多少东西,老师带着写了两个不完整的项目,第一个是新闻综合管理系统,另一个是类似与淘宝样式的购物网站,新闻综合管理系统包括了用户的登录,新闻列表的查询,新闻列表的排序和分页等。购物网站则包含了验证码,对象状态保持的应用。mvc3的初步应用,其中还包括jquery,异步提交等,可以算是比较综合的了,其中的怎样建立两个数据表的关系是一个重点。解决方案是在model层中,按照外键表建立一个实体类,并把被参照的主键表声明成该实体类的一个字段,通过字段来调用主键表里的成员从
部分购物网站用这个功能放购物车或商品分类导航,使产品页面很长的时候,侧边栏能始终固定发挥它应有的作用,有的网站用这个功能来边栏的广告。jQuery代码:varrollSet=$('#Roll');//检查对象,#sidebar-tab是要随滚动条固定的ID,可根据需要更改varoffset=rollSet.offset();$(window).scroll(function(){&//检查对象的顶部是否在游览器可见的范围内&varscrollTop=$(w
目前,主要的购物网站都采用了这种加载方式。今天在一个网友的站里发现一个图片延迟加载的插件,很好用,在这里介绍一下。先介绍一下图片延迟加载原理。我们需要先将图片的真实地址保存在一个自定义的属性中(属性名任你发挥吧,这里我用的是lazy-src),而图片的src属性中用一个占位图片来替代,这个占位图片当然是越小越好,它基本上只干活、不露面。&imgsrc=&images/placeholder.png&lazy-src=&images/real
&!DOCTYPEhtmlPUBLIC&-//W3C//DTDHTML4.01Transitional//EN&&http://www.w3.org/TR/html4/loose.dtd&&&html&&&&&head&&&&&&&&&metahttp-equiv=&Content-Ty
@2017 Ailiyun Allright reserver在联机应用程序中，分页和排序是在显示数据时极为常用的两项功能。例如，当我们在一家网络书店搜索 ASP.NET 书籍时，也许会有上百本相关书籍，但是罗列搜索结果的报表仅在每页显示十条匹配的记录。而且，这些搜索结果还可以根据标题、价格、页数、作者姓名和其它条件进行排序。在前面的23 篇教程中，我们已经学习了如何构建各式各样的报表，包括允许添加、编辑和删除数据的界面。但我们还没有学习如何对数据进行排序，并且仅在研究 DetailsView 和 FormView 控件时看到了分页的示例。
在本教程中，我们将了解怎样向报表添加排序和分页功能，这两项功能的实现仅通过选中几个复选框就可以完成。然而，这种简单的实现方式也有其弊端& 排序界面存在不尽如人意之处，分页例程的设计并不适用于对规模庞大的结果集进行有效地分页。在后续教程中，我们将会探讨如何克服这些自带的分页和排序解决方案的局限性。
步骤1 ：添加分页和排序教程网页
在开始本教程之前，我们首先要添加本教程和后面三篇教程需要使用的ASP.NET 页面。首先，在项目中创建一个名为 PagingAndSorting 的新文件夹。然后，为该文件夹添加以下五个 ASP.NET 页面，并将这些页面的母版页配置为 Site.master ：
Default.aspx
SimplePagingSorting.aspx
EfficientPaging.aspx
SortParameter.aspx
CustomSortingUI.aspx
图1&：创建 PagingAndSorting 文件夹，添加 ASP.NET 教程页面
然后，打开 Default.aspx 页面，并将 UserControls 文件夹中的 SectionLevelTutorialListing.ascx 用户控件拖放到设计界面。我们在&&教程中创建的这个用户控件会遍历站点地图，并在当前区域以列表的形式显示相关教程。
图2&：向 Default.aspx 添加 SectionLevelTutorialListing.ascx 用户控件
要让项目符号列表显示我们将要创建的分页和排序教程，我们需要将这些教程添加到站点地图中。打开 Web.sitemap 文件，将以下标记添加到 &Editing, Inserting, and Deleting& 站点地图节点标记之后：
&siteMapNode&title="Paging&and&Sorting"&url="~/PagingAndSorting/Default.aspx"&&&&&description="Samples&of&Reports&that&Provide&Paging&and&Sorting&Capabilities"&&&&&&&siteMapNode&url="~/PagingAndSorting/SimplePagingSorting.aspx"&&&&&&&&&title="Simple&Paging&&&Sorting&Examples"&&&&&&&&&description="Examines&how&to&add&simple&paging&and&sorting&support."&/&&&&&&&siteMapNode&url="~/PagingAndSorting/EfficientPaging.aspx"&&&&&&&&&title="Efficiently&Paging&Through&Large&Result&Sets"&&&&&&&&&description="Learn&how&to&efficiently&page&through&large&result&sets."&/&&&&&&&siteMapNode&url="~/PagingAndSorting/SortParameter.aspx"&&&&&&&&&title="Sorting&Data&at&the&BLL&or&DAL"&&&&&&&&&description="Illustrates&how&to&perform&sorting&logic&in&the&Business&Logic&&&&&&&&&Layer&or&Data&Access&Layer."&/&&&&&&&siteMapNode&url="~/PagingAndSorting/CustomSortingUI.aspx"&&&&&&&&&title="Customizing&the&Sorting&User&Interface"&&&&&&&&&description="Learn&how&to&customize&and&improve&the&sorting&user&interface."&/&&&/siteMapNode&
图3&：更新站点地图，使其包含新的 ASP.NET 页面
步骤2 ：在GridView 中显示产品信息
在真正实现分页和排序功能之前，我们首先创建一个不具备排序和分页功能的标准GridView ，其中显示产品信息。这项任务我们已经做过很多次了，因此我们应当非常熟悉以下步骤。首先，打开 SimplePagingSorting.aspx 页面，将一个 GridView 控件从 Toolbox 拖放到 Designer ，并将其 ID 属性设置为 Products 。然后，新建一个 ObjectDataSource 控件，该控件使用ProductsBLL&类的 GetProducts() 方法来返回所有产品信息。
图4&：使用 GetProducts() 方法获取所有产品的信息
由于该报表为只读报表，因此不需要将 ObjectDataSource 的 Insert() 、Update() 或 Delete() 方法映射到相应的 ProductsBLL 方法；因此，在 UPDATE 、INSERT 和 DELETE 选项卡中，从下拉列表中选择 (None) 。
图5&：在 UPDATE 、INSERT 和 DELETE 选项卡中，从下拉列表中选择 (None) 选项
然后，定制 GridView 的字段，使其只显示产品的名称、供应商、类别、价格和 断货 状态。此外，我们可随意进行任何字段级的格式更改，例如调整 HeaderText 属性,或将价格格式化为一种货币形式。在进行完这些更改之后， GridView 的声明标记应如下所示：
&asp:GridView&ID="Products"&runat="server"&AutoGenerateColumns="False"&&&&&DataKeyNames="ProductID"&DataSourceID="ObjectDataSource1"&&&&&EnableViewState="False"&&&&&&&Columns&&&&&&&&&&&asp:BoundField&DataField="ProductName"&HeaderText="Product"&&&&&&&&&&&&&SortExpression="ProductName"&/&&&&&&&&&&&asp:BoundField&DataField="CategoryName"&HeaderText="Category"&&&&&&&&&&&&&ReadOnly="True"&SortExpression="CategoryName"&/&&&&&&&&&&&asp:BoundField&DataField="SupplierName"&HeaderText="Supplier"&&&&&&&&&&&&&ReadOnly="True"&SortExpression="SupplierName"&/&&&&&&&&&&&asp:BoundField&DataField="UnitPrice"&HeaderText="Price"&&&&&&&&&&&&&SortExpression="UnitPrice"&DataFormatString="{0:C}"&&&&&&&&&&&&&HtmlEncode="False"&/&&&&&&&&&&&asp:CheckBoxField&DataField="Discontinued"&HeaderText="Discontinued"&&&&&&&&&&&&&SortExpression="Discontinued"&/&&&&&&&/Columns&&&/asp:GridView&
图6 显示了通过浏览器查看的效果。注意：该页面在一个屏幕上罗列出所有产品的信息，显示每个产品的名称、类别、供应商、价格和断货状态。
图6&：此处列出了所有产品
步骤3 ：添加分页支持
在一个屏幕中列出所有&的产品会导致用户阅读数据时发生信息过载。为使结果更便于管理，我们可以将数据分割为小一些的数据页面，让用户在某一时间仅对一个页面上的数据进行分析。只需选中 GridView 智能标记中的 Enable Paging 复选框（此操作将 GridView 的&&设置为真）即可实现。
图7 ：选中 Enable Paging 复选框来添加分页支持
启用分页功能后会限制每页显示记录的数目，并在 GridView 中添加了分页界面。如图 7 所示，默认的分页界面是一系列页码，允许用户迅速地从一个页面导航到另一个页面。分页界面看起来应当比较熟悉，我们在前面的教程中为 DetailsView 和 FormView 控件添加分页支持时曾经见过该界面。
DetailsView 和 FormView 控件在每页都只显示一条记录。但是，GridView 可通过&&来确定每页显示的记录数（该属性的默认值为 10 ）。
GridView 、DetailsView 和 FormView 的分页界面可使用如下属性进行定制 ：
PagerStyle － 指出分页界面的样式信息，可指定 BackColor 、ForeColor 、CssClass 和 HorizontalAlign 等设置。
PagerSettings － 包含大量可定制分页界面功能的属性 ；PageButtonCount 指示分页界面上显示的数字页码的最大数量（默认值为 10）；&指出分页界面的操作形式，可设置为：
NextPrevious & 显示&下一页& 和 &上一页& 按钮，让用户逐页前进或回退。
NextPreviousFirstLast & 除了&下一页& 和 &上一页& 按钮之外，还提供 &第一页& 和&最后一页& 按钮，让用户可以快速进入第一页或最后一页。
Numeric & 显示一系列页数，让用户直接点击数字进入相应的页面。
NumericFirstLast & 除了页数按钮外，还提供&第一页& 和&最后一页& 按钮，让用户可以快速进入第一页或最后一页；当分页界面上的所有页码都不能覆盖显示范围时，&第一页& 和&最后一页& 按钮才会显示。
此外，GridView 、DetailsView 和 FormView 都提供 PageIndex 和 PageCount 属性，分别指示当前呈现的页面和页面总数。PageIndex 属性从 0 开始编号，这意味着我们在浏览首页时，PageIndex 为0 。而 PageCount 从 1 开始记数，这意味着 PageIndex 的取值范围是 0 到 PageCount - 1 之间。
让我们花点时间来改进一下 GridView 分页界面的默认外观。为分页界面添加右对齐属性，并将背景颜色设置为浅灰色。我们不希望直接通过 GridView 的 PagerStyle 属性来设置这些属性，而是在 Styles.css 中创建一个名为 PagerRowStyle 的 CSS 类，然后通过 Theme 文件为 PagerStyle 的 CssClass 属性赋值。首先打开 Styles.css ，添加以下 CSS 类的定义：
.PagerRowStyle { text-align: }
然后，在 App_Themes 文件夹中，打开 DataWebControls 文件夹下的 GridView.skin 文件。正如我们在母版页与网站导航&教程中所述，Skin 文件可用于指定一个 Web 控件的默认属性值。因此，我们将 PagerStyle 的 CssClass 属性设置为 PagerRowStyle 。同样，让我们使用 NumericFirstLast 分页界面配置分页界面最多显示五个页码按钮。
&asp:GridView&runat="server"&CssClass="DataWebControlStyle"&&&&&&AlternatingRowStyle&CssClass="AlternatingRowStyle"&/&&&&&&RowStyle&CssClass="RowStyle"&/&&&&&&HeaderStyle&CssClass="HeaderStyle"&/&&&&&&FooterStyle&CssClass="FooterStyle"&/&&&&&&SelectedRowStyle&CssClass="SelectedRowStyle"&/&&&&&&PagerStyle&CssClass="PagerRowStyle"&/&&&&&&PagerSettings&Mode="NumericFirstLast"&PageButtonCount="5"&/&&&/asp:GridView&
分页用户体验
我们选中了 GridView 的 Enable Paging 复选框，并通过 GridView.skin 文件进行了 PagerStyle 和 PagerSettings 的配置，之后，我们通过浏览器访问该网页。图 8 显示了该网页在浏览器中的呈现。注意，每页仅显示十条记录，分页界面指示我们当前浏览的是第一个页面。
图8 ：启用分页功能后，每次只显示部分数据
当用户单击分页界面的页码时，页面回传并且加载，显示所请求页面的记录。图 9 显示了选择查看最后一页数据时的效果。注意，该页只有一条记录；这是因为总记录数为 81 条，因此生成 8 个每页具有 10 条记录的页面和 1 个具有 1 条记录的页面。
图9&：单击页码按钮会引发页面回传并显示一组相应的记录
分页的服务器端工作流
当终端用户单击分页界面上的按钮时，页面回传，以下服务器端工作流开始运行 ：
GridView （或 DetailsView 、FormView）的PageIndexChanging 事件触发。
ObjectDataSource 再次从 BLL 请求所有数据；GridView 的 PageIndex 和 PageSize 属性值用来确定从 BLL 返回的哪些记录将在 GridView 中显示。
GridView 的 PageIndexChanged 事件触发。
在步骤 2 中，ObjectDataSource 再次从其数据源请求所有数据。这种风格的分页通常被称为&默认分页，因为这是将 AllowPaging 属性设定为真后即应用的默认分页行为。应用默认的分页功能时，数据 Web 控件会单纯地为每个页面获取所有记录，但只有部分记录会呈现在发送给浏览器的 HTML 中。除非 BLL 或 ObjectDataSource 对数据库的数据进行缓存，否则对于大数据量的 结果集 或拥有大量并发用户的 web 应用程序，默认的分页功能无法有效运行。
在下一个教程中，我们将学习如何实现自定义分页。通过自定义分页，我们可以指示 ObjectDataSource 精确地获取用户请求页面所需的记录。可想而知，对于大数据量的结果集，自定义分页可以显著提升分页效率。
注意：&默认的分页方式不适合对大数据量的结果集或具有大量并发用户的网站进行分页。但要实现自定义分页需要进行很多更改和操作，不像默认分页方式那样仅需选中一个复选框。因此，默认分页对于小规模、低访问量的网站或数据量较小的系统是个理想的选择，因为它的实现确实非常简单、快捷。
例如，如果已知数据库中的产品数量不会超出100 ，那么自定义分页所带来的微小性能收益不足以抵消为实现它所付出的工作。但是，如果我们拥有成千上万种产品，&不&实现自定义分页将会极大地限制应用程序的可扩展性。
步骤4 ：自定义分页体验
数据 Web 控件提供了大量的属性来提升用户的分页体验。例如， PageCount 属性指示总页面数，而 PageIndex 属性指示当前访问的页面，我们可通过设置该属性快速切换到指定的页面。为演示如何应用这些属性来提升用户的分页体验，我们在页面上添加一个 Label Web 控件（用于提示当前访问的页面）和一个 DropDownLis 控件（允许用户快速跳转到任意指定的页面）。
首先，在页面上添加一个Label Web 控件，将其 ID 属性设置为 PagingInformation ，并清空其 Text 属性。然后，为 GridView 的 DataBound 事件创建事件处理程序，并添加以下代码：
protected&void&Products_DataBound(object&sender,&EventArgs&e)&{&&&&&PagingInformation.Text&=&string.Format("You&are&viewing&page&{0}&of&{1}...",&&&&&&&&&Products.PageIndex&+&1,&Products.PageCount);&}
事件处理程序将 PagingInformation Label 的 Text 属性赋值为一条消息，该消息提示用户当前访问的页面（Products.PageIndex + 1）（加 1 是因为 Products.PageIndex 属性值由 0 开始计数）和总页数（Products.PageCount ）。选择在 DataBound 事件处理程序中对 Label 的 Text 属性赋值，而不是在 PageIndexChanged 事件处理程序中赋值的原因在于：DataBound 事件在每次将数据绑定到 GridView 时都会触发，而 PageIndexChanged 事件处理程序仅在页面索引发生改变时触发。当 GridView 最初与第一页的数据绑定时，PageIndexChanging 事件不会触发（而 DataBound 事件会触发）。
此时，用户会看到一条消息，提示当前访问的是哪个页面，以及页面的总数是多少。
图10&：显示当前页码和总页数
除了 Label 控件，我们再来添加一个 DropDownList 控件，该控件在 GridView 中列出页码，并选定当前查看的页面。其用意在于：仅通过从 DropDownList 中选择新的页面索引，用户就可以快速地从当前页面跳转到另一页面。首先，将 DropDownList 添加到 Designer ，将其 ID 属性设置为 PageList ，并在其智能标记中选中 Enable AutoPostBack 选项。
然后，返回至 DataBound 事件处理程序并添加如下代码：
//&Clear&out&all&of&the&items&in&the&DropDownList&PageList.Items.Clear();&&//&Add&a&ListItem&for&each&page&for&(int&i&=&0;&i&&&Products.PageC&i++)&{&&&&&//&Add&the&new&ListItem&&&&&ListItem&pageListItem&=&new&ListItem(string.Concat("Page&",&i&+&1),&i.ToString());&&&&&PageList.Items.Add(pageListItem);&&&&&&//&select&the&current&item,&if&needed&&&&&if&(i&==&Products.PageIndex)&&&&&&&&&pageListItem.Selected&=&&}
这段代码首先清除了 PageList DropDownList 的列表项。这个操作看起来有些多余，因为用户不会预料到页数的改变。但是同时在使用该系统的其他用户可能会对 Products 表进行记录的添加或删除操作。这些插入或删除操作能改变数据的页数。
然后，我们需要重新生成页数，默认情况下，选择与当前 GridView PageIndex 相对应的值。我们使用一个从 0 到 PageCount & 1 的循环来实现：在每次循环中，新增一个 ListItem ，当循环索引与 GridView 的 PageIndex 属性相同时，则设置其 Selected 属性为真。
最后，我们需要为 DropDownList 的 SelectedIndexChanged 事件创建事件处理程序，每次用户从列表中选择一个不同的选项时，该事件处理程序都会触发。要创建该事件处理程序，在 Designer 中双击 DropDownList ，而后添加以下代码：
protected&void&PageList_SelectedIndexChanged(object&sender,&EventArgs&e)&{&&&&&//&Jump&to&the&specified&page&&&&&Products.PageIndex&=&Convert.ToInt32(PageList.SelectedValue);&}
如图 11 所示，只改变 GridView 的 PageIndex 属性，就可以将数据重新绑定到 GridView 。在 GridView 的 DataBound 事件处理程序中，选择相应的 DropDownList ListItem 。
图11&：在下拉列表项中选择 "Page 6" ，则系统自动切换至第 6 页
步骤5 ：添加双向排序支持
添加双向排序支持与添加分页支持一样简单：仅需在 GridView 的智能标记中选中 Enable Sorting 选项（该操作将 GridView 的&设为真 ）。这样，每个 GridView 字段的标题都显示为 LinkButtons ，单击后引发一次回传，所单击的列的所有数据会以升序排序。再次单击同一标题的 LinkButton ，该列的数据以降序重新排序。
注意：如果使用的是自定义的数据访问层而不是Typed DataSet ，则在 GridView 的智能标记上不会有 Enable Sorting 选项。只有绑定到特定数据源（本身支持排序）的 GridViews 才会提供该复选框。 Typed DataSet 提供现成的排序支持，因为 ADO.NET DataTable 提供了一种排序方法，在调用该方法时，系统会应用指定的标准对 DataTable 的 DataRows 排序。
如果数据访问层返回的对象不支持排序，则需要配置 ObjectDataSource 将排序信息传递到业务逻辑层，然后由业务逻辑层或数据访问层对数据排序。我们会在后面的教程中讨论如何在业务逻辑层和数据访问层对数据排序。
排序的 LinkButtons 以 HTML 超级链接的形式呈现，它的当前颜色（未访问过的链接为蓝色，访问过的链接为深红色）与标题行的背景颜色冲突。让我们设置所有标题行中的链接在访问过和未访问的情况下都为白色。将以下代码添加到 Styles.css 类中，即可实现上述设置：
.HeaderStyle a, .HeaderStyle a:visited { color: W }
此语法指出：在显示使用 HeaderStyle 类的元素中的超级链接时，使用白色文本。
添加完这段 CSS 代码后，使用浏览器访问该页面时的屏幕应当与图12 类似。图 12 显示了单击 Price 字段的标题链接后的效果。
图12&： 结果根据 UnitPrice 以 升序排列
研究排序工作流
所有 GridView 字段：BoundField 、CheckBoxField 、TemplateField 等等都有 SortExpression 属性来指示特定的表达式，单击某字段的排序标题链接后，该字段的数据会应用上述表达式进行排序。GridView 也有一个 SortExpression 属性。当单击排序标题 LinkButton 后， GridView 将该字段的 SortExpression 值分配给 SortExpression 属性。然后，从 ObjectDataSource 重新读取数据并根据 GridView 的 SortExpression 属性排序。下面列出了一个终端用户在 GridView 中对数据排序的一系列步骤：
GridView 的&触发。
设置 GridView 的&为特定字段 （ 该字段的排序标题 LinkButton 被单击 ） 的 SortExpression 。
ObjectDataSource 重新从 BLL 获取所有数据，然后根据 GridView 的 SortExpression 对数据排序。
将 GridView 的 PageIndex 属性重新设置为 0 ， 这意味着 ， 排序后将首页数据返回给用户 （ 假定实现了分页支持 ） 。
GridView 的&触发。
同默认分页类似，默认排序选项也将从 BLL 重新获取所有&的记录。如果在未分页或使用默认分页的情况下应用排序，则无法弥补性能损失（缓存数据库数据的情况除外）。但是，我们将在后续教程中发现，应用自定义分页时对数据进行高效排序是可行的。
在通过 GridView 智能标记中的下拉列表将ObjectDataSource 绑定到 GridView 时，每个 GridView 字段自动将其 SortExpression 属性分配给 ProductsRow 类中数据字段的名称。例如，ProductName BoundField 的 SortExpression 被设置为 ProductName ，声明标记如下所示：
&asp:BoundField DataField="ProductName" HeaderText="Product" SortExpression="ProductName" /&
我们可以通过清空一个字段的 SortExpression 属性（ 赋值为空字符串 ）来禁止对它排序。为证明这一点，不妨假设我们不希望让客户根据价格来对我们的产品进行排序。那么，我们可以通过声明标记或通过 Fields 对话框（可在 GridView 的智能标记中单击 Edit Columns 链接来访问该对话框）清除 UnitPrice BoundField 的 SortExpression 属性。
图13&：结果根据 UnitPrice 以升序排列
一旦删除了 UnitPrice BoundField 的 SortExpression 属性，标题不再以链接方式（而是以文本方式）呈现，这样用户就无法根据价格进行排序了。
图14&：删除 SortExpression 属性后，用户无法再根据价格对产品进行排序
通过编码实现 GridView 排序
通过使用 GridView 的&&，我们还可以编码方式实现对 GridView 内容的排序。只需传入排序所依据的 SortExpression 值和&&（升序或降序），GridView 的数据就被重新排序。
假设我们担心客户仅购买价格最低的产品，因此希望禁止根据 UnitPrice 排序。然而，由于我们想鼓励客户购买最昂贵的产品，所以又希望他们能够根据价格对产品排序，但只能从价格最高到最低进行排序。
要实现上述要求，我们向页面添加一个 Button Web 控件，将其 ID 属性设置为 SortPriceDescending ，Text 属性设置为 &Sort by Price& 。然后，在 Designer 中双击 Button 控件，为该控件的 Click 事件创建事件处理程序。将以下代码添加到事件处理程序中：
protected&void&SortPriceDescending_Click(object&sender,&EventArgs&e)&{&&&&&//&Sort&by&UnitPrice&in&descending&order&&&&&Products.Sort("UnitPrice",&SortDirection.Descending);&}
单击该按钮，返回到第一页，该页中的产品根据价格从最高到最低排序（参见图 15 ）。
图15&：单击按钮后，产品从价格最高到最低排序
在本教程中，我们了解了怎样实现默认的分页和排序功能，两个功能都仅需选中一个复选框来实现！当一个用户对数据进行排序或分页时，工作流程如以下所示：
数据 Web 控件的 pre-level 事件触发（PageIndexChanging 或 Sorting ） 。
ObjectDataSource 重新获取所有数据
数据 Web 控件的 post-level 事件触发（PageIndexChanged 或 Sorted ） 。
尽管基本的分页和排序功能可以轻松实现，但是要利用更高效的自定义分页或进一步提升分页或排序界面，我们则需要付出更多努力。后面的教程将会继续探讨相关主题。
快乐编程！
阅读(...) 评论() &