From 2cd5c1a2545af5fc18903b626122b4194adebad1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B4=A4=E5=BF=83?= <3277200+sentsim@users.noreply.github.com> Date: Thu, 19 Oct 2023 13:34:06 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=20laypage=20=E4=BB=A3?= =?UTF-8?q?=E7=A0=81=E4=B9=A6=E5=86=99=E8=A7=84=E8=8C=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/modules/laypage.js | 175 ++++++++++++++++++++++------------------- 1 file changed, 94 insertions(+), 81 deletions(-) diff --git a/src/modules/laypage.js b/src/modules/laypage.js index c0d44d9e..8a86e117 100644 --- a/src/modules/laypage.js +++ b/src/modules/laypage.js @@ -5,22 +5,23 @@ layui.define(function(exports){ "use strict"; - var doc = document - ,id = 'getElementById' - ,tag = 'getElementsByTagName' + var doc = document; + var id = 'getElementById'; + 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; that.config = options || {}; that.config.index = ++laypage.index; that.render(true); }; - //判断传入的容器类型 + // 判断传入的容器类型 Class.prototype.type = function(){ var config = this.config; if(typeof config.elem === 'object'){ @@ -54,7 +55,7 @@ layui.define(function(exports){ // 默认条数 config.limit = Number(config.limit) || 10; - //总页数 + // 总页数 config.pages = Math.ceil(config.count/config.limit) || 1; // 当前页不能超过总页数 @@ -64,73 +65,73 @@ layui.define(function(exports){ config.curr = 1; } - //连续分页个数不能低于 0 且不能大于总页数 + // 连续分页个数不能低于 0 且不能大于总页数 if(groups < 0){ groups = 1; } else if (groups > config.pages){ groups = config.pages; } - config.prev = 'prev' in config ? config.prev : '上一页'; //上一页文本 - config.next = 'next' in config ? config.next : '下一页'; //下一页文本 + config.prev = 'prev' in config ? config.prev : '上一页'; // 上一页文本 + config.next = 'next' in config ? config.next : '下一页'; // 下一页文本 - //计算当前组 + // 计算当前组 var index = config.pages > groups ? Math.ceil( (config.curr + (groups > 1 ? 1 : 0)) / (groups > 0 ? groups : 1) ) - : 1 + : 1; - //视图片段 - ,views = { - //上一页 + // 视图片段 + var views = { + // 上一页 prev: function(){ return config.prev ? ''+ config.prev +'' : ''; - }() + }(), - //页码 - ,page: function(){ + // 页码 + page: function(){ var pager = []; - //数据量为0时，不输出页码 + // 数据量为0时，不输出页码 if(config.count < 1){ return ''; } - //首页 + // 首页 if(index > 1 && config.first !== false && groups !== 0){ pager.push(''+ (config.first || 1) +''); } - //计算当前页码组的起始页 - var halve = Math.floor((groups-1)/2) //页码数等分 - ,start = index > 1 ? config.curr - halve : 1 - ,end = index > 1 ? (function(){ + // 计算当前页码组的起始页 + var halve = Math.floor((groups-1)/2) // 页码数等分 + var start = index > 1 ? config.curr - halve : 1; + var end = index > 1 ? (function(){ var max = config.curr + (groups - halve - 1); return max > config.pages ? config.pages : max; }()) : groups; - //防止最后一组出现“不规定”的连续页码数 + // 防止最后一组出现“不规定”的连续页码数 if(end - start < groups - 1){ start = end - groups + 1; } - //输出左分割符 + // 输出左分割符 if(config.first !== false && start > 2){ pager.push('…') } - //输出连续页码 + // 输出连续页码 for(; start <= end; start++){ if(start === config.curr){ - //当前页 + // 当前页 pager.push(''+ start +''); } else { pager.push(''+ start +''); } } - //输出输出右分隔符 & 末页 + // 输出输出右分隔符 & 末页 if(config.pages > groups && config.pages > end && config.last !== false){ if(end + 1 < config.pages){ pager.push('…'); @@ -141,20 +142,20 @@ layui.define(function(exports){ } return pager.join(''); - }() + }(), - //下一页 - ,next: function(){ + // 下一页 + next: function(){ return config.next ? ''+ config.next +'' : ''; - }() + }(), - //数据总数 - ,count: '共 '+ config.count +' 条' + // 数据总数 + count: '共 '+ config.count +' 条', - //每页条数 - ,limit: function(){ + // 每页条数 + limit: function(){ var options = [''; - }() + }(), - //刷新当前页 - ,refresh: ['' - ,'' - ,''].join('') + // 刷新当前页 + refresh: [ + '', + '', + '' + ].join(''), - //跳页区域 - ,skip: function(){ - return ['到第' - ,'' - ,'页' - ,''].join(''); + // 跳页区域 + skip: function(){ + return [ + '到第', + '', + '页', + '' + ].join(''); }() }; return ['
' - ,function(){ + ) : 'default') +'" id="layui-laypage-'+ config.index +'">', + function(){ var plate = []; layui.each(config.layout, function(index, item){ if(views[item]){ @@ -191,20 +196,21 @@ layui.define(function(exports){ } }); return plate.join(''); - }() - ,'
'].join(''); + }(), + ''].join(''); }; - //跳页的回调 + // 跳页的回调 Class.prototype.jump = function(elem, isskip){ if(!elem) return; - var that = this - ,config = that.config - ,childs = elem.children - ,btn = elem[tag]('button')[0] - ,input = elem[tag]('input')[0] - ,select = elem[tag]('select')[0] - ,skip = function(){ + + var that = this; + var config = that.config; + var childs = elem.children; + var btn = elem[tag]('button')[0]; + var input = elem[tag]('input')[0]; + var select = elem[tag]('select')[0]; + var skip = function(){ var curr = Number(input.value.replace(/\s|\D/g, '')); if(curr){ config.curr = curr; @@ -214,7 +220,7 @@ layui.define(function(exports){ if(isskip) return skip(); - //页码 + // 页码 for(var i = 0, len = childs.length; i < len; i++){ if(childs[i].nodeName.toLowerCase() === 'a'){ laypage.on(childs[i], 'click', function(){ @@ -226,7 +232,7 @@ layui.define(function(exports){ } } - //条数 + // 条数 if(select){ laypage.on(select, 'change', function(){ var value = this.value; @@ -238,7 +244,7 @@ layui.define(function(exports){ }); } - //确定 + // 确定 if(btn){ laypage.on(btn, 'click', function(){ skip(); @@ -246,15 +252,22 @@ layui.define(function(exports){ } }; - //输入页数字控制 + // 输入页数字控制 Class.prototype.skip = function(elem){ if(!elem) return; - var that = this, input = elem[tag]('input')[0]; + + var that = this; + var input = elem[tag]('input')[0]; + if(!input) return; + + // 键盘事件 laypage.on(input, 'keyup', function(e){ - var value = this.value - ,keyCode = e.keyCode; + var value = this.value; + var keyCode = e.keyCode; + if(/^(37|38|39|40)$/.test(keyCode)) return; + if(/\D/.test(value)){ this.value = value.replace(/\D/, ''); } @@ -264,12 +277,12 @@ layui.define(function(exports){ }); }; - //渲染分页 + // 渲染分页 Class.prototype.render = function(load){ - var that = this - ,config = that.config - ,type = that.type() - ,view = that.view(); + var that = this; + var config = that.config; + var type = that.type(); + var view = that.view(); if(type === 2){ config.elem && (config.elem.innerHTML = view); @@ -293,16 +306,16 @@ layui.define(function(exports){ that.skip(elem); }; - //外部接口 + // 外部接口 var laypage = { - //分页渲染 + // 分页渲染 render: function(options){ var o = new Class(options); return o.index; - } - ,index: layui.laypage ? (layui.laypage.index + 10000) : 0 - ,on: function(elem, even, fn){ - elem.attachEvent ? elem.attachEvent('on'+ even, function(e){ //for ie + }, + index: layui.laypage ? (layui.laypage.index + 10000) : 0, + on: function(elem, even, fn){ + elem.attachEvent ? elem.attachEvent('on'+ even, function(e){ // for ie e.target = e.srcElement; fn.call(elem, e); }) : elem.addEventListener(even, fn, false); @@ -311,4 +324,4 @@ layui.define(function(exports){ } exports(MOD_NAME, laypage); -}); \ No newline at end of file +});