也来谈谈DataPager控件如何自定义样式
2011-01-13 09:43
344 查看
在做asp.net开发的时候我很少用到分页控件一般都是自己写的,但是最近为了偷懒就用了ListView+DataPager的形式,ListView真的是一个非常强大的控件,但是我在用DataPager控件的时候犯难了,不知如何才能设置他的样式,网上也很难找到有关于DataPager控件自定义样式的文章,经过研究,才征服了这个控件,为了方便自己记忆,也为了给大家参考参考,于是我抽空写了下,没什么技术含量。高手可以飘过。下面是MSDN对DataPager控件的解释。
-------------------------------------------------------------------------------------------------------------------------------------
DataPager控件是什么?
为使用户能够翻阅 ListView 控件中或实现 IPageableItemContainer 接口的控件中的数据,可以使用 DataPager 控件。DataPager 控件可以在 LayoutTemplate 模板内部,也可以在 ListView 控件之外的网页上。如果 DataPager 控件不在 ListView 控件中,您必须将 PagedControlID 属性设置为 ListView 控件的 ID。
DataPager 控件支持内置的分页用户界面 (UI)。您可以使用 NumericPagerField 对象,它使用户能够按页码选择一个数据页。也可以使用 NextPreviousPagerField 对象。通过它,用户在浏览数据时,可以一次前翻或后翻一个数据页,也可以跳到数据的第一页或最后一页。数据页的大小通过 DataPager 控件的 PageSize 属性设置。可以在一个 DataPager 控件中使用一个或多个页导航字段对象。
也可以使用 TemplatePagerField 对象创建自定义分页用户界面。在 TemplatePagerField 模板中, 您可以使用 Container 属性引用 DataPager 控件。此属性让您能够访问到 DataPager 控件的属性。这些属性包括起始行索引、页面大小和当前绑定到 ListView 控件的总行数。
--------------------------------------------------------------------------------------------------------------------------------------
附带的CSS
对比后大家可以发现我把首页和尾页的ButtonType="Button"修改成了ButtonType="Link"--这样修改其实就是为了把按钮修改成链接
把数字导航 <asp:NumericPagerField />修改成了<asp:NumericPagerField ButtonCount="5" CurrentPageLabelCssClass="current" />
CurrentPageLabelCssClass属性其实就是当前页的时候,当前页的class属性。没有这个属性的时候页面生成的html代码可能是<span>1<span>
有了这个属性后如果第一页是当前页生成的html代码会变成<span class="current">1<span>
DataPager控件可以在里面添加自定义内容的,但是这个功能很隐蔽。IDE貌似不能智能感应出来。大家可能已经发现了。就是添加下面的代码
还有虽然DataPager控件不带有class属性,但是我们可以自己添加该属性不会有什么影响的。了解了这些,我相信大家结合CSS样式就能写出很多个性
的样式了。
-------------------------------------------------------------------------------------------------------------------------------------
DataPager控件是什么?
为使用户能够翻阅 ListView 控件中或实现 IPageableItemContainer 接口的控件中的数据,可以使用 DataPager 控件。DataPager 控件可以在 LayoutTemplate 模板内部,也可以在 ListView 控件之外的网页上。如果 DataPager 控件不在 ListView 控件中,您必须将 PagedControlID 属性设置为 ListView 控件的 ID。
DataPager 控件支持内置的分页用户界面 (UI)。您可以使用 NumericPagerField 对象,它使用户能够按页码选择一个数据页。也可以使用 NextPreviousPagerField 对象。通过它,用户在浏览数据时,可以一次前翻或后翻一个数据页,也可以跳到数据的第一页或最后一页。数据页的大小通过 DataPager 控件的 PageSize 属性设置。可以在一个 DataPager 控件中使用一个或多个页导航字段对象。
也可以使用 TemplatePagerField 对象创建自定义分页用户界面。在 TemplatePagerField 模板中, 您可以使用 Container 属性引用 DataPager 控件。此属性让您能够访问到 DataPager 控件的属性。这些属性包括起始行索引、页面大小和当前绑定到 ListView 控件的总行数。
--------------------------------------------------------------------------------------------------------------------------------------
附带的CSS
.pager { display:block; padding: 5px 0; margin: 10px 0 10px 0; } .pager a, .pager span { border: 1px solid #E6E7E1; line-height: 20px; margin-right: 5px; padding: 0 6px; color: #0046D5; } .pager a:hover { text-decoration: none; border-color: #0046D5; } .pager .current { background-color: #0046D5; border-color: #0046D5; color: #fff; font-weight: bold; } .pager .total, .pager .total strong { color: Gray; padding: 0 3px; }
对比后大家可以发现我把首页和尾页的ButtonType="Button"修改成了ButtonType="Link"--这样修改其实就是为了把按钮修改成链接
把数字导航 <asp:NumericPagerField />修改成了<asp:NumericPagerField ButtonCount="5" CurrentPageLabelCssClass="current" />
CurrentPageLabelCssClass属性其实就是当前页的时候,当前页的class属性。没有这个属性的时候页面生成的html代码可能是<span>1<span>
有了这个属性后如果第一页是当前页生成的html代码会变成<span class="current">1<span>
DataPager控件可以在里面添加自定义内容的,但是这个功能很隐蔽。IDE貌似不能智能感应出来。大家可能已经发现了。就是添加下面的代码
<asp:TemplatePagerField> <PagerTemplate> 自定义内容 </PagerTemplate> </asp:TemplatePagerField>
还有虽然DataPager控件不带有class属性,但是我们可以自己添加该属性不会有什么影响的。了解了这些,我相信大家结合CSS样式就能写出很多个性
的样式了。
相关文章推荐
- 如何使用在SL中使用Datapager分页控件
- Flex中如何用backgroundDisabledColor样式,自定义TextInput控件在无效状态下填充颜色
- 论如何在手机端web前端实现自定义原生控件的样式
- [网络收集]用户自定义控件中如何引入样式文件
- WPF 自定义分页控件DataPager.xaml
- WPF如何自定义TabControl控件样式示例详解
- Flex中如何通过设置fontFamily样式在ComboBox控件中使用自定义嵌入字体的例子
- 如何自定义ToggleSwitch控件样式(转)
- Flex中如何通过strokeWidth, strokeColor和shadowColor样式,创建一个自定义风格的HRule或VRule
- 批量使用字体样式:自定义字体控件
- 如何自定义checkbox的样式
- 如何使用资源和样式调整控件外观
- 如何在Web用户控件中引用样式表中的样式
- 关于自定义CEdit控件的样式
- CYQ.Data 轻量数据访问层(七) 自定义数据表实现绑定常用的数据控件(上)
- ASP.NET使用ListView数据绑定控件和DataPager实现数据分页显示(二)
- Android之如何自定义样式和主题
- Spring-Data-JPA 自定义查询方法底层如何处理
- 如何在fragment中获取自定义view的控件id
- 自定义input type=file 样式 美化input type=file 改变input type=file控件“丑陋面貌”