mbui.define(['tool'], function (exports) { let tool = mbui.tool; //html转义,防止XSS function escapeHtml(text) { var map = { '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }; return text.replace(/[&<>"']/g, function(m) { return map[m]; }); } var LoadData = function () { this.config = { elem: "#listBox", seachBar: "#listSearch", url: "", where: {}, limit: 10, scroll: 1, template: function (data) { return JSON.parse(data); } }; this.loaded = 0; this.page = 1; this.count = 0; this.total = 0; }; // 初始化 LoadData.prototype.init = function (options) { var that = this; $.extend(true, that.config, options); var elem = $(that.config.elem); elem.html('

暂无数据
努力加载中
—————— 底 ● 线 ——————
'); if(that.config.scroll==2){ //容器监听滚动事件 $('#root').scroll(function(){ if ($(this).scrollTop() + $('#root').height() >= $('#app').height()-10) { // 滚动到页面底部时加载更多数据 if (that.total < that.count && that.loaded == 0){ that.ajax(); } } }); } else{ // 页面监听滚动事件 $(window).scroll(function () { if ($(window).scrollTop() + $(window).height() >= $(document).height()-10) { // 滚动到页面底部时加载更多数据 if (that.total < that.count && that.loaded == 0){ that.ajax(); } } }); } //回车搜索 $(that.config.seachBar).on('keyup','[type="search"]',function(event){ if (event.keyCode === 13) { $(this).blur(); that.page=1; that.ajax(); } }) //清空时 $(that.config.seachBar).on('input','[type="search"]', function() { var val = $(this).val(); // 如果值为空,说明可能点击了 X 或者手动删除了 if (val === '') { $(this).blur(); that.page=1; that.ajax(); } }); //点击搜索重置按钮 $(that.config.seachBar).on('click','.search-reset',function(){ $(that.config.seachBar).find('input').val(''); that.page=1; that.ajax(); }) that.ajax(); }; LoadData.prototype.reload = function () { var that = this; that.page=1; that.ajax(); }; LoadData.prototype.ajax = function () { var that = this; var elem = $(that.config.elem),seachBar = $(that.config.seachBar),map = {page:that.page,limit:that.config.limit}; var keys = seachBar.find('.search-key'); keys.each(function(){ let key=$(this).attr('name'); let val=$(this).val(); if(val!=''){ map[key]=val; } }); var maps = $.extend({}, that.config.where, map); // 发送请求获取数据 $.ajax({ url: that.config.url, type: 'GET', data: maps, beforeSend: function () { // 显示加载按钮 that.loaded = 1; elem.find('.load-data-loading').show(); elem.find('.load-data-end').hide(); }, success: function (res) { if(res.count === 'undefined'){ that.count=res.data.length; that.total=res.data.length; } else{ that.count=res.count; that.total+=res.data.length; } if(that.page==1){ elem.find('.load-data-container').html(''); } if(that.count>=that.total && that.count>0){ elem.find('.load-data-end').show(); } elem.find('.load-data-none').addClass('load-data-'+that.count); if (res.data.length > 0) { that.page++; $.each(res.data, function (index, item) { // 转义JSON对象中的字符串值,防止XSS for (var key in item) { if (typeof item[key] === 'string') { item[key] = escapeHtml(item[key]); } } // 创建列表项并添加到列表中 var listItem = that.config.template(item); elem.find('.load-data-container').append(listItem); }); } }, complete: function () { that.loaded = 0; elem.find('.load-data-loading').hide(); } }); } // 导出loadData模块 exports('loadData', function (options) { var loadData = new LoadData(); loadData.init(options); return loadData; }); });