Fit项目分页组件的编写
来源:互联网 发布:易金通软件客服电话 编辑:程序博客网 时间:2024/06/01 08:14
项目中涉及列表显示的地方都会用到分页控件,为了能更好地与当前网站的样式匹配,这次要自己实现一个。
所以选择了模板中提供的分页样式,基于模板改造以能够动态生成:
一 控件的行为规则
a) 可设置显示几个页码(默认5个,只能是奇数)
如果当前页显示5个,则默认前后各有两个,比如当前页是5,显示页码为“3 45 6 7
如果当前页在最前面,比如为1,显示页码为:12 3 4 5
同样当前页在最后面,比如为9,显示页码为:5 6 7 89
如果总页数少于5,比如只有3页,则页码全部显示:1 2 3
b) 关于跳转首页(<<)、尾页(>>)、上一页(<)、下一页(>)
如果当前页是第一页,首页和上一页禁用
如果当前页是最后一页,尾页和下一页禁用
c) 当前页的样式要区别于其它页码
二 代码编写
a) 分页组件类、属性、常量
PAGE_COUNT为默认显示的页码数量,这里为了便于测试设置成了2;静态属性分别为当前页、总页数、数据总条数,但刚刚发现TotalPage、TotalCount实际上是冗余的,两者可以互相计算得出,这要尽早重构。
b) 局部变量
根据目前的实现,需要这么一坨局部变量。startPage、endPage限定了显示页码的范围。将跳转链接放在了hrefStr,以后其它列表需要使用这个工具类时,可把hrefStr改造成属性。最后的以Attr和Href结尾的变量用于设置4个跳转按钮的禁用属性和超链接。
c) 核心方法
核心的方法如下,主要实现“一 控件的行为规则”中a) 所描述的规则。
d) 设置属性与Href的方法,实现了“一 控件的行为规则”中b) 所描述的规则,需要注意的坑是,<a> 标签需要禁用时,为其加上”disabled”=”true”是不管用的,这样做只是在样式上起作用。所以这儿采用的方法是通过设置href=”#”来阻止跳转(但会回到页面顶部),鼠标以上去的红圈样式使用Inspinia模板的class=”disabled”样式,这便是设置firstPageAttr等标签为”disabled”的用途
e) 返回html的方法
f) 分页组件的使用
在前端页面中,使用razor语法,Html元素的输出要用@Html.Raw()方法,另外因为相关的变量都是静态的,每次使用完要记得调用Reset重置状态。
这样自己的分页组件就实现了,原本就知道这个小小的控件不好写,经过很多次单元测试、集成测试,费了不少时间终于能够使用了。
- Fit项目分页组件的编写
- vue分页组件编写
- 面板组件-Fit布局
- Fit项目图片上传和云存储的调通
- yii2的分页组件
- WEB项目总结-完全分页组件
- WEB项目总结-完全分页组件
- fit
- 通用的ajax分页编写
- 简单的分页页码编写
- jsp分页组件的使用
- 基于SmartGwt的分页组件
- jquery 写的分页组件
- yii分页组件的使用
- yii分页组件的使用
- 不用组件的简单分页
- 基于velocity的分页组件
- 分页组件的使用-jqPaginator
- [vim] 复制与粘贴
- 为什么跳转找不到WEB-INF下的jsp文件报404
- rsyslog打印会丢失log的问题
- 第一章:JavaScript设计模式--面向对象之封装
- Java 异常的初识
- Fit项目分页组件的编写
- Android创建对话框的两种方式
- Python re模块的正则表达式
- Ubuntu16.04 安装流程 -1 系统软件(201705)
- lec2 图像分类的方法
- [机器学习入门] 李宏毅机器学习笔记-10 (Tips for Deep Learning;深度学习小贴士)
- ubuntu16.04 安装cuda8.0 遇到的显卡驱动问题
- 三四、vue中slot是什么东西?
- RMI java 远程调用