github
/
layui
mirror of https://github.com/layui/layui
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

优化 laypage 代码书写规范

pull/1399/head
贤心 2023-10-19 13:34:06 +08:00
parent b0eafb5e92
commit 2cd5c1a254
1 changed files with 94 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

175
src/modules/laypage.js
View File

@ -5,22 +5,23 @@
layui.define(function(exports){ layui.define(function(exports){
"use strict"; "use strict";
var doc = document var doc = document;
,id = 'getElementById' var id = 'getElementById';
,tag = 'getElementsByTagName' var tag = 'getElementsByTagName';
//字符常量 // 字符常量
,MOD_NAME = 'laypage', DISABLED = 'layui-disabled' var MOD_NAME = 'laypage';
var DISABLED = 'layui-disabled';
//构造器 // 构造器
,Class = function(options){ var Class = function(options){
var that = this; var that = this;
that.config = options || {}; that.config = options || {};
that.config.index = ++laypage.index; that.config.index = ++laypage.index;
that.render(true); that.render(true);
}; };
//判断传入的容器类型 // 判断传入的容器类型
Class.prototype.type = function(){ Class.prototype.type = function(){
var config = this.config; var config = this.config;
if(typeof config.elem === 'object'){ if(typeof config.elem === 'object'){
@ -54,7 +55,7 @@ layui.define(function(exports){
// 默认条数 // 默认条数
config.limit = Number(config.limit) || 10; config.limit = Number(config.limit) || 10;
//总页数 // 总页数
config.pages = Math.ceil(config.count/config.limit) || 1; config.pages = Math.ceil(config.count/config.limit) || 1;
// 当前页不能超过总页数 // 当前页不能超过总页数
@ -64,73 +65,73 @@ layui.define(function(exports){
config.curr = 1; config.curr = 1;
} }
//连续分页个数不能低于 0 且不能大于总页数 // 连续分页个数不能低于 0 且不能大于总页数
if(groups < 0){ if(groups < 0){
groups = 1; groups = 1;
} else if (groups > config.pages){ } else if (groups > config.pages){
groups = config.pages; groups = config.pages;
} }
config.prev = 'prev' in config ? config.prev : '&#x4E0A;&#x4E00;&#x9875;'; //上一页文本 config.prev = 'prev' in config ? config.prev : '&#x4E0A;&#x4E00;&#x9875;'; // 上一页文本
config.next = 'next' in config ? config.next : '&#x4E0B;&#x4E00;&#x9875;'; //下一页文本 config.next = 'next' in config ? config.next : '&#x4E0B;&#x4E00;&#x9875;'; // 下一页文本
//计算当前组 // 计算当前组
var index = config.pages > groups var index = config.pages > groups
? Math.ceil( (config.curr + (groups > 1 ? 1 : 0)) / (groups > 0 ? groups : 1) ) ? Math.ceil( (config.curr + (groups > 1 ? 1 : 0)) / (groups > 0 ? groups : 1) )
: 1 : 1;
//视图片段 // 视图片段
,views = { var views = {
//上一页 // 上一页
prev: function(){ prev: function(){
return config.prev return config.prev
? '<a class="layui-laypage-prev'+ (config.curr == 1 ? (' ' + DISABLED) : '') +'" data-page="'+ (config.curr - 1) +'">'+ config.prev +'</a>' ? '<a class="layui-laypage-prev'+ (config.curr == 1 ? (' ' + DISABLED) : '') +'" data-page="'+ (config.curr - 1) +'">'+ config.prev +'</a>'
: ''; : '';
}() }(),
//页码 // 页码
,page: function(){ page: function(){
var pager = []; var pager = [];
//数据量为0时，不输出页码 // 数据量为0时，不输出页码
if(config.count < 1){ if(config.count < 1){
return ''; return '';
} }
//首页 // 首页
if(index > 1 && config.first !== false && groups !== 0){ if(index > 1 && config.first !== false && groups !== 0){
pager.push('<a class="layui-laypage-first" data-page="1" title="&#x9996;&#x9875;">'+ (config.first || 1) +'</a>'); pager.push('<a class="layui-laypage-first" data-page="1" title="&#x9996;&#x9875;">'+ (config.first || 1) +'</a>');
} }
//计算当前页码组的起始页 // 计算当前页码组的起始页
var halve = Math.floor((groups-1)/2) //页码数等分 var halve = Math.floor((groups-1)/2) // 页码数等分
,start = index > 1 ? config.curr - halve : 1 var start = index > 1 ? config.curr - halve : 1;
,end = index > 1 ? (function(){ var end = index > 1 ? (function(){
var max = config.curr + (groups - halve - 1); var max = config.curr + (groups - halve - 1);
return max > config.pages ? config.pages : max; return max > config.pages ? config.pages : max;
}()) : groups; }()) : groups;
//防止最后一组出现“不规定”的连续页码数 // 防止最后一组出现“不规定”的连续页码数
if(end - start < groups - 1){ if(end - start < groups - 1){
start = end - groups + 1; start = end - groups + 1;
} }
//输出左分割符 // 输出左分割符
if(config.first !== false && start > 2){ if(config.first !== false && start > 2){
pager.push('<span class="layui-laypage-spr">&#x2026;</span>') pager.push('<span class="layui-laypage-spr">&#x2026;</span>')
} }
//输出连续页码 // 输出连续页码
for(; start <= end; start++){ for(; start <= end; start++){
if(start === config.curr){ if(start === config.curr){
//当前页 // 当前页
pager.push('<span class="layui-laypage-curr"><em class="layui-laypage-em" '+ (/^#/.test(config.theme) ? 'style="background-color:'+ config.theme +';"' : '') +'></em><em>'+ start +'</em></span>'); pager.push('<span class="layui-laypage-curr"><em class="layui-laypage-em" '+ (/^#/.test(config.theme) ? 'style="background-color:'+ config.theme +';"' : '') +'></em><em>'+ start +'</em></span>');
} else { } else {
pager.push('<a data-page="'+ start +'">'+ start +'</a>'); pager.push('<a data-page="'+ start +'">'+ start +'</a>');
} }
} }
//输出输出右分隔符 & 末页 // 输出输出右分隔符 & 末页
if(config.pages > groups && config.pages > end && config.last !== false){ if(config.pages > groups && config.pages > end && config.last !== false){
if(end + 1 < config.pages){ if(end + 1 < config.pages){
pager.push('<span class="layui-laypage-spr">&#x2026;</span>'); pager.push('<span class="layui-laypage-spr">&#x2026;</span>');
@ -141,20 +142,20 @@ layui.define(function(exports){
} }
return pager.join(''); return pager.join('');
}() }(),
//下一页 // 下一页
,next: function(){ next: function(){
return config.next return config.next
? '<a class="layui-laypage-next'+ (config.curr == config.pages ? (' ' + DISABLED) : '') +'" data-page="'+ (config.curr + 1) +'">'+ config.next +'</a>' ? '<a class="layui-laypage-next'+ (config.curr == config.pages ? (' ' + DISABLED) : '') +'" data-page="'+ (config.curr + 1) +'">'+ config.next +'</a>'
: ''; : '';
}() }(),
//数据总数 // 数据总数
,count: '<span class="layui-laypage-count">共 '+ config.count +' 条</span>' count: '<span class="layui-laypage-count">共 '+ config.count +' 条</span>',
//每页条数 // 每页条数
,limit: function(){ limit: function(){
var options = ['<span class="layui-laypage-limits"><select lay-ignore>']; var options = ['<span class="layui-laypage-limits"><select lay-ignore>'];
layui.each(config.limits, function(index, item){ layui.each(config.limits, function(index, item){
options.push( options.push(
@ -164,26 +165,30 @@ layui.define(function(exports){
); );
}); });
return options.join('') +'</select></span>'; return options.join('') +'</select></span>';
}() }(),
//刷新当前页 // 刷新当前页
,refresh: ['<a data-page="'+ config.curr +'" class="layui-laypage-refresh">' refresh: [
,'<i class="layui-icon layui-icon-refresh"></i>' '<a data-page="'+ config.curr +'" class="layui-laypage-refresh">',
,'</a>'].join('') '<i class="layui-icon layui-icon-refresh"></i>',
'</a>'
].join(''),
//跳页区域 // 跳页区域
,skip: function(){ skip: function(){
return ['<span class="layui-laypage-skip">&#x5230;&#x7B2C;' return [
,'<input type="text" min="1" value="'+ config.curr +'" class="layui-input">' '<span class="layui-laypage-skip">&#x5230;&#x7B2C;',
,'&#x9875;<button type="button" class="layui-laypage-btn">&#x786e;&#x5b9a;</button>' '<input type="text" min="1" value="'+ config.curr +'" class="layui-input">',
,'</span>'].join(''); '&#x9875;<button type="button" class="layui-laypage-btn">&#x786e;&#x5b9a;</button>',
'</span>'
].join('');
}() }()
}; };
return ['<div class="layui-box layui-laypage layui-laypage-'+ (config.theme ? ( return ['<div class="layui-box layui-laypage layui-laypage-'+ (config.theme ? (
/^#/.test(config.theme) ? 'molv' : config.theme /^#/.test(config.theme) ? 'molv' : config.theme
) : 'default') +'" id="layui-laypage-'+ config.index +'">' ) : 'default') +'" id="layui-laypage-'+ config.index +'">',
,function(){ function(){
var plate = []; var plate = [];
layui.each(config.layout, function(index, item){ layui.each(config.layout, function(index, item){
if(views[item]){ if(views[item]){
@ -191,20 +196,21 @@ layui.define(function(exports){
} }
}); });
return plate.join(''); return plate.join('');
}() }(),
,'</div>'].join(''); '</div>'].join('');
}; };
//跳页的回调 // 跳页的回调
Class.prototype.jump = function(elem, isskip){ Class.prototype.jump = function(elem, isskip){
if(!elem) return; if(!elem) return;
var that = this
,config = that.config var that = this;
,childs = elem.children var config = that.config;
,btn = elem[tag]('button')[0] var childs = elem.children;
,input = elem[tag]('input')[0] var btn = elem[tag]('button')[0];
,select = elem[tag]('select')[0] var input = elem[tag]('input')[0];
,skip = function(){ var select = elem[tag]('select')[0];
var skip = function(){
var curr = Number(input.value.replace(/\s|\D/g, '')); var curr = Number(input.value.replace(/\s|\D/g, ''));
if(curr){ if(curr){
config.curr = curr; config.curr = curr;
@ -214,7 +220,7 @@ layui.define(function(exports){
if(isskip) return skip(); if(isskip) return skip();
//页码 // 页码
for(var i = 0, len = childs.length; i < len; i++){ for(var i = 0, len = childs.length; i < len; i++){
if(childs[i].nodeName.toLowerCase() === 'a'){ if(childs[i].nodeName.toLowerCase() === 'a'){
laypage.on(childs[i], 'click', function(){ laypage.on(childs[i], 'click', function(){
@ -226,7 +232,7 @@ layui.define(function(exports){
} }
} }
//条数 // 条数
if(select){ if(select){
laypage.on(select, 'change', function(){ laypage.on(select, 'change', function(){
var value = this.value; var value = this.value;
@ -238,7 +244,7 @@ layui.define(function(exports){
}); });
} }
//确定 // 确定
if(btn){ if(btn){
laypage.on(btn, 'click', function(){ laypage.on(btn, 'click', function(){
skip(); skip();
@ -246,15 +252,22 @@ layui.define(function(exports){
} }
}; };
//输入页数字控制 // 输入页数字控制
Class.prototype.skip = function(elem){ Class.prototype.skip = function(elem){
if(!elem) return; if(!elem) return;
var that = this, input = elem[tag]('input')[0];
var that = this;
var input = elem[tag]('input')[0];
if(!input) return; if(!input) return;
// 键盘事件
laypage.on(input, 'keyup', function(e){ laypage.on(input, 'keyup', function(e){
var value = this.value var value = this.value;
,keyCode = e.keyCode; var keyCode = e.keyCode;
if(/^(37|38|39|40)$/.test(keyCode)) return; if(/^(37|38|39|40)$/.test(keyCode)) return;
if(/\D/.test(value)){ if(/\D/.test(value)){
this.value = value.replace(/\D/, ''); this.value = value.replace(/\D/, '');
} }
@ -264,12 +277,12 @@ layui.define(function(exports){
}); });
}; };
//渲染分页 // 渲染分页
Class.prototype.render = function(load){ Class.prototype.render = function(load){
var that = this var that = this;
,config = that.config var config = that.config;
,type = that.type() var type = that.type();
,view = that.view(); var view = that.view();
if(type === 2){ if(type === 2){
config.elem && (config.elem.innerHTML = view); config.elem && (config.elem.innerHTML = view);
@ -293,16 +306,16 @@ layui.define(function(exports){
that.skip(elem); that.skip(elem);
}; };
//外部接口 // 外部接口
var laypage = { var laypage = {
//分页渲染 // 分页渲染
render: function(options){ render: function(options){
var o = new Class(options); var o = new Class(options);
return o.index; return o.index;
} },
,index: layui.laypage ? (layui.laypage.index + 10000) : 0 index: layui.laypage ? (layui.laypage.index + 10000) : 0,
,on: function(elem, even, fn){ on: function(elem, even, fn){
elem.attachEvent ? elem.attachEvent('on'+ even, function(e){ //for ie elem.attachEvent ? elem.attachEvent('on'+ even, function(e){ // for ie
e.target = e.srcElement; e.target = e.srcElement;
fn.call(elem, e); fn.call(elem, e);
}) : elem.addEventListener(even, fn, false); }) : elem.addEventListener(even, fn, false);
@ -311,4 +324,4 @@ layui.define(function(exports){
} }
exports(MOD_NAME, laypage); exports(MOD_NAME, laypage);
}); });