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;
});
});