更改ligerui源码实现分页样式修改
修改后样式:
第一步:实现功能.
更改源码部分ligerui.all.js文件
读源代码,发现ligerui底部工具条是这样实现的(ps:注释部分为源码)
_render: function () {
var g = this, p = this.options;
g.grid = $(g.element);
g.grid.addClass("l-panel");
var gridhtmlarr = [];
gridhtmlarr.push(" <div class='l-panel-header'><span class='l-panel-header-text'></span></div>");
gridhtmlarr.push(" <div class='l-grid-loading'></div>");
gridhtmlarr.push(" <div class='l-panel-topbar' style='display:none'><div class='l-panel-topbarinner'></div></div><div class='l-clear'></div>");
gridhtmlarr.push(" <div class='l-panel-bwarp'>");
gridhtmlarr.push(" <div class='l-panel-body'>");
gridhtmlarr.push(" <div class='l-grid'>");
gridhtmlarr.push(" <div class='l-grid-dragging-line'></div>");
gridhtmlarr.push(" <div class='l-grid-popup'><table cellpadding='0' cellspacing='0'><tbody></tbody></table></div>"); gridhtmlarr.push(" <div class='l-grid1'>");
gridhtmlarr.push(" <div class='l-grid-header l-grid-header1'>");
gridhtmlarr.push(" <div class='l-grid-header-inner'><table class='l-grid-header-table' cellpadding='0' cellspacing='0'><tbody></tbody></table></div>");
gridhtmlarr.push(" </div>");
gridhtmlarr.push(" <div class='l-grid-body l-grid-body1'>");
gridhtmlarr.push(" </div>");
gridhtmlarr.push(" </div>"); gridhtmlarr.push(" <div class='l-grid2'>");
gridhtmlarr.push(" <div class='l-grid-header l-grid-header2'>");
gridhtmlarr.push(" <div class='l-grid-header-inner'><table class='l-grid-header-table' cellpadding='0' cellspacing='0'><tbody></tbody></table></div>");
gridhtmlarr.push(" </div>");
gridhtmlarr.push(" <div class='l-grid-body l-grid-body2 l-scroll'>");
gridhtmlarr.push(" </div>");
gridhtmlarr.push(" </div>"); gridhtmlarr.push(" </div>");
gridhtmlarr.push(" </div>");
gridhtmlarr.push(" </div>");
/**
* 根据样式需求更改分页工具栏样式
* 修改生成的分页工具条
*/
//注释掉ligerUI原来的代码
//gridhtmlarr.push(" <div class='l-panel-bar'>");
//gridhtmlarr.push(" <div class='l-panel-bbar-inner'>");
//gridhtmlarr.push(" <div class='l-bar-group l-bar-message'><span class='l-bar-text'></span></div>");
//gridhtmlarr.push(" <div class='l-bar-group l-bar-selectpagesize'></div>");
//gridhtmlarr.push(" <div class='l-bar-separator'></div>");
//gridhtmlarr.push(" <div class='l-bar-group'>");
//gridhtmlarr.push(" <div class='l-bar-button l-bar-btnfirst'><span></span></div>");
//gridhtmlarr.push(" <div class='l-bar-button l-bar-btnprev'><span></span></div>");
//gridhtmlarr.push(" </div>");
//gridhtmlarr.push(" <div class='l-bar-separator'></div>");
//gridhtmlarr.push(" <div class='l-bar-group'><span class='pcontrol'> <input type='text' size='4' value='1' style='width:20px' maxlength='3' /> / <span></span></span></div>");
//gridhtmlarr.push(" <div class='l-bar-separator'></div>");
//gridhtmlarr.push(" <div class='l-bar-group'>");
//gridhtmlarr.push(" <div class='l-bar-button l-bar-btnnext'><span></span></div>");
//gridhtmlarr.push(" <div class='l-bar-button l-bar-btnlast'><span></span></div>");
//gridhtmlarr.push(" </div>");
//gridhtmlarr.push(" <div class='l-bar-separator'></div>");
//gridhtmlarr.push(" <div class='l-bar-group'>");
//gridhtmlarr.push(" <div class='l-bar-button l-bar-btnload'><span></span></div>");
//gridhtmlarr.push(" </div>");
//gridhtmlarr.push(" <div class='l-bar-separator'></div>");
//gridhtmlarr.push(" <div class='l-clear'></div>");
//gridhtmlarr.push(" </div>");
//gridhtmlarr.push(" </div>");
这样一来实现就很简单了只要重写注释部分源码并增加生成控件和执行点击事件的逻辑即可
重写后的部分代码1:
gridhtmlarr.push(" <div class='l-panel-bar'>");
gridhtmlarr.push(" <div class='l-panel-bbar-inner'>");
gridhtmlarr.push(" <div class='l-bar-group'><span class='pcontrol'>当前第<span id='currentPage'></span> / <span id='allPage'></span>页</span></div>");
gridhtmlarr.push(" <div class='l-bar-group'>");
gridhtmlarr.push(" <div class='pageControl'>");
gridhtmlarr.push(" <div class='l-bar-group'>");
gridhtmlarr.push(" <div class='l-bar-btnprev'><span>上一页</span></div>");
gridhtmlarr.push(" </div>");
gridhtmlarr.push(" <div class='l-bar-group'>");
gridhtmlarr.push(" <div class='pagebtns'></div>");
gridhtmlarr.push(" </div>");
gridhtmlarr.push(" <div class='l-bar-group'>");
gridhtmlarr.push(" <div class='l-bar-btnnext'><span>下一页</span></div>");
gridhtmlarr.push(" </div>");
gridhtmlarr.push(" </div>");
gridhtmlarr.push(" </div>");
gridhtmlarr.push(" <div class='l-bar-group'>");
gridhtmlarr.push(" <span class='gopagebox'><span class='gopageboxspan'>到</span><input id='skippage' type='text' size='4'/><span class='gopageboxspan'>页</span></span>");
gridhtmlarr.push(" </div>");
gridhtmlarr.push(" <div class='l-bar-group'>");
gridhtmlarr.push(" <div class='pskip'><input id='ligerbtn' type='button' size='4' value='确定'/></div>");
gridhtmlarr.push(" </div>");
gridhtmlarr.push(" <div class='l-clear'></div>");
gridhtmlarr.push(" </div>");
gridhtmlarr.push(" </div>");
第二步:添加方法:(这一部分代码实现了具体的点击按钮逻辑)
/**
* 根据样式需求更改分页工具栏样式
* 增加_generPageHtml方法
* _generPageHtml方法重新生成分页工具条样式并注册点击事件
*/
_generPageHtml: function () {
var g = this, p = this.options;
if (g.loading) return true;
if (p.dataAction != "local" && g.isDataChanged && !confirm(p.isContinueByDataChanged))
return false;
//分页处理准备
var pno = parseInt(p.newPage);
p.pageCount = parseInt($("#allPage", g.toolbar).html());
var length = p.pageCount;
$('.pagebtns').empty();
//分页处理
var dot = '<span class="spanDot">...</span>';
if (length <= 8) {
for (var i = 1; i <= length; i++) {
if (pno == i) {
$('.pagebtns').append('<a class="aAll curr" id="a' + i + '">' + i + '</a>');
}else {
$('.pagebtns').append('<a class="aAll" id="a' + i + '">' + i + '</a>');
}
}
} else {
if (pno <= 5) {
for (var i = 1; i <= 7; i++) {
if (pno == i) {
$('.pagebtns').append('<a class="aAll curr" id="a' + i + '">' + i + '</a>');
}
else {
$('.pagebtns').append('<a class="aAll" id="a' + i + '">' + i + '</a>');
}
}
$('.pagebtns').append(dot);
} else {
$('.pagebtns').append('<a class="aAll" id="a1">1</a>');
$('.pagebtns').append('<a class="aAll" id="a2">2</a>');
$('.pagebtns').append(dot);
var begin = pno - 2;
var end = pno + 2;
if (end > length) {
end = length;
begin = end - 4;
if (pno - begin < 2) {
begin = begin - 1;
}
} else if (end + 1 == length) {
end = length;
}
for (var i = begin; i <= end; i++) {
if (pno == i) {
$('.pagebtns').append('<a class="aAll curr" id="a' + i + '">' + i + '</a>');
} else {
$('.pagebtns').append('<a class="aAll" id="a' + i + '">' + i + '</a>');
}
}
if (end != length) {
$('.pagebtns').append(dot);
$('.pagebtns').append('<a class="aAll" id="a' + length + '">' + length + '</a>');
}
}
}
//注册点击事件
$('.aAll').click(function (e) {
var gotoPage = e.currentTarget.innerText;
if (gotoPage) {
g.changePage('a',gotoPage);
}
});
},
其次是根据更改代码一来改动其他方法中的选择器名称,太杂乱,就不一一展示.
接下来是何时调用添加的方法_generPageHtml(创建分页工具条),通过源码阅读,与调试demo,让方法在类库中自动调用是最好的方式,不用在类库的调用中增加额外的工作量.
在调用类库中的_buildPager方法(创建分页)时调用该方法.
注意点:
usePager属性(是否使用分页)的判断
使用本地数据需要调用 Grid的reRender方法
源码及source:链接:http://pan.baidu.com/s/1pKH0EBT 密码:4bvx
但根据调研和使用,发现此种分页方式适合页数固定的项目(类似于购物网站),但不适用于后台管理系统,因为后台管理系统数据量可能很大,导致翻页和动态跳动,样式不佳
更改ligerui源码实现分页样式修改的更多相关文章
- 帝国cms 列表页分页样式修改美化【2】
上一篇(帝国cms 列表页分页样式修改美化[1])中我们已经对分页说了一个大概,下面我们就自己动手弄一个分页把: 第一步:进入帝国cms后台,点击系统设置->系统参数设置->信息设置:里面 ...
- springMVC源码分析--动态样式ThemeResolver(二)
在上一篇博客springMVC源码分析--动态样式ThemeResolver(一)中我们介绍了多样式ThemeResolver的使用方法,接下来我们对源码进行简单的分析一下. ThemeResolve ...
- 通过更改scrapy源码进行spider分发实现一个综合爬虫
最近我正写一个项目,项目的需求如下一,要爬取大约100种几百个网页的类容,并且这些网页的爬取频率不一样,有些一天爬取一次,有些一周爬取一次,二,网页爬取内容有变化,也就是说要爬取的内容会根据需求进行改 ...
- thinkphp5.1中使用Bootstrap4分页样式修改
1.找到thinkphp下的Boorstrap的源码 \thinkphp\library\think\paginator\driver\Bootstrap.php 2丶直接修改源码 <?php ...
- highchart导出功能的介绍更改exporting源码
本案利用highchar作为前端,展示数据的图形效果,结合spring+springmvc来完成数据图片的导出. jsp引入文件: <script src="${pageContext ...
- 帝国cms 列表页分页样式修改美化【1】
[1]自己修改帝国cms默认的分页样式(css),这样做的好处是你不用去改动帝国的核心文件,方便以后升级. [2]自己动手去修改帝国的分页(php+css),帝国的分页在e>class>下 ...
- 帝国cms分页样式修改文件-注意事项
帝国cms分页样式主要有:内容页分页样式.列表页分页样式以及默认搜索模板使用的搜索样式等几种. 要改这些样式其实也很简单,在网站目录中找到相应的.css文件修改empages属性就行了,但是这样比较麻 ...
- 记一次修改框架源码的经历,修改redux使得redux 可以一次处理多个action,并且只发出一次订阅消息
redux是一个数据状态管理的js框架,redux把行为抽象成一个对象,把状态抽象成一个很大的数据结构,每次用户或者其他什么方式需要改变页面都可以理解成对数据状态的改变,根据出发这次改变的不同从而有各 ...
- 帝国cms 7.5版列表页分页样式修改笔记
最近在用帝国改版我的个人博客站点,这个也是我第一次尝试用帝国来做博客,之前用过wordpress,每用一个新的程序,都会有些新的收获,也会学到一些新的东西. 在改用帝国之前,我也在网上大概了解了一下, ...
随机推荐
- 【大数据project师之路】Hadoop——MapReduce概述
一.概述. MapReduce是一种可用于数据处理的编程模型.Hadoop能够执行由各种语言编写的MapReuce程序.MapReduce分为Map部分和Reduce部分. 二.MapReduce的机 ...
- 矩阵经典题目七:Warcraft III 守望者的烦恼(矩阵加速递推)
https://www.vijos.org/p/1067 非常easy推出递推式f[n] = f[n-1]+f[n-2]+......+f[n-k]. 构造矩阵的方法:构造一个k*k的矩阵.当中右上角 ...
- Linux中的mysql.redis
1,Linux上的mysql MariaDB数据库管理系统是MySQL的一个分支,主要由开源社区在维护,采用GPL授权许可. 开发这个分支的原因之一是:甲骨文公司收购了MySQL后,有将MySQL闭源 ...
- 普通用户无法登陆SSH问题
Linux正常情况下普通用户是可以登陆SSH的,除非系统管理员作了修改,如果没有修改的情况无法登陆可以尝试以下方法解决: 步骤/方法 1 查看 /etc/ssh/sshd_config文件 发现 ro ...
- Android应用基础学习记录
01_前言 前言,了解了Android的情况.这里也介绍一下本文.本文是记录学习Android应用程序开发过程,视频中使用的Android2.2版本号,我以4.2版本号为基础,找出当中的差异并记录下来 ...
- (1)数据库和MySql初步认识
一,数据的保存: 数据可以通过很多方式进行保存,不用的保存方式对于所保存的数据的影响各有不同. 1,数据保存在内存中:读写速度很快:但是随着程序的关闭数据会丢失,而且内存容量相对小,价格昂贵 2,数据 ...
- 基于TINY4412的Andorid开发-------简单的LED灯控制【转】
本文转载自:http://www.cnblogs.com/pengdonglin137/p/3857724.html 基于TINY4412的Andorid开发-------简单的LED灯控制 阅读 ...
- caioj1522: [NOIP提高组2005]过河
状态压缩的经典题. 按照一般做法,DP一维时间O(n),显然跑不过.考虑到石子较少,实际上有很长一段是一定可以跳到的,设两个石头分别在i点和j点,跳跃的路程为S到T.那么从i点可以跳到i+S到i+T. ...
- 【183】VMware + CentOS 安装教程等
目录: VMware 虚拟机安装 虚拟机上安装 CentOS VMware Tools 安装 为程序增加环境变量 其他 1. VMware 虚拟机安装 ※ 参考:VMware 虚拟机安装使用教程( ...
- 2-3 Windows下一站式开发环境anaconda搭建
D:\Users\ZHONGZHENHUA\Anaconda3\Scripts\activate.bat https://www.geforce.com/hardware/notebook-gpus/ ...