/** * Paging 组件 * @description 基于laytpl 、laypage、layer 封装的组件 * @author Van zheng_jinfan@126.com * @link http://m.zhengjinfan.cn * @license MIT * @version 1.0.1 */ layui.define(['layer', 'laypage', 'laytpl'], function(exports) { "use strict"; var $ = layui.jquery, layer = parent.layui.layer === undefined ? layui.layer : parent.layui.layer, laytpl = layui.laytpl; var Paging = function() { this.config = { url: undefined, //数据远程地址 type: 'POST', //数据的获取方式 get or post elem: undefined, //内容容器 params: {}, //获取数据时传递的额外参数 openWait: false, //加载数据时是否显示等待框 tempElem: undefined, //模板容器 tempType: 0, paged: true, pageConfig: { //参数应该为object类型 elem: undefined, pageSize: 15 //分页大小 }, success: undefined, //type:function fail: undefined, //type:function complate: undefined, //type:function serverError: function(xhr, status, error) { //ajax的服务错误 throwError("错误提示: " + xhr.status + " " + xhr.statusText); } }; }; /** * 版本号 */ Paging.prototype.v = '1.0.2'; /** * 设置 * @param {Object} options */ Paging.prototype.set = function(options) { var that = this; $.extend(true, that.config, options); return that; }; /** * 初始化 * @param {Object} options */ Paging.prototype.init = function(options) { var that = this; $.extend(true, that.config, options); var _config = that.config; if(_config.url === undefined) { throwError('Paging Error:请配置远程URL!'); } if(_config.elem === undefined) { throwError('Paging Error:请配置参数elem!'); } if($(_config.elem).length === 0) { throwError('Paging Error:找不到配置的容器elem!'); } if(_config.tempType === 0) { if(_config.tempElem === undefined) { throwError('Paging Error:请配置参数tempElem!'); } if($(_config.tempElem).length === 0) { throwError('Paging Error:找不到配置的容器tempElem!'); } } if(_config.paged) { var _pageConfig = _config.pageConfig; if(_pageConfig.elem === undefined) { throwError('Paging Error:请配置参数pageConfig.elem!'); } } if(_config.type.toUpperCase() !== 'GET' && _config.type.toUpperCase() !== 'POST') { throwError('Paging Error:type参数配置出错,只支持GET或都POST'); } that.get({ pageIndex: 1, pageSize: _config.pageConfig.pageSize }); return that; }; /** * 获取数据 * @param {Object} options */ Paging.prototype.get = function(options) { var that = this; var _config = that.config; var loadIndex = undefined; if(_config.openWait) { loadIndex = layer.load(2); } //默认参数 var df = { pageIndex: 1, pageSize: _config.pageConfig.pageSize }; $.extend(true, _config.params, df, options); $.ajax({ type: _config.type, url: _config.url, data: _config.params, dataType: 'json', success: function(result, status, xhr) { if(result.code === 0) { //获取模板 var tpl = _config.tempType === 0 ? $(_config.tempElem).html(): _config.tempElem; //渲染数据 laytpl(tpl).render(result, function(html) { $(_config.elem).html(html); }); if(_config.paged) { if(result.count === null || result.count === 0) { throwError('Paging Error:请返回数据总数!'); return; } var _pageConfig = _config.pageConfig; var pageSize = _pageConfig.pageSize; var pages = result.count % pageSize == 0 ? (result.count / pageSize) : (result.count / pageSize + 1); var defaults = { cont: $(_pageConfig.elem), curr: _config.params.pageIndex, pages: pages, jump: function(obj, first) { //得到了当前页,用于向服务端请求对应数据 var curr = obj.curr; if(!first) { that.get({ pageIndex: curr, pageSize: pageSize }); } } }; $.extend(defaults, _pageConfig); //参数合并 layui.laypage(defaults); } if(_config.success) { _config.success(); //渲染成功 } } else { if(_config.fail) { _config.fail(result.msg); //获取数据失败 } } if(_config.complate) { _config.complate(); //渲染完成 } if(loadIndex !== undefined) layer.close(loadIndex); //关闭等待层 }, error: function(xhr, status, error) { if(loadIndex !== undefined) layer.close(loadIndex); //关闭等待层 _config.serverError(xhr, status, error); //服务器错误 } }); }; /** * 抛出一个异常错误信息 * @param {String} msg */ function throwError(msg) { throw new Error(msg); }; var paging = new Paging(); exports('paging', function(options) { return paging.set(options); }); });