解决layui中table异步数据请求不支持自定义返回数据格式的问题
作者:拾光时间:2026-10-22 17:12:11浏览:122
本文介绍如何在layui-v2.3.0版本中解决table组件异步数据请求不支持自定义返回数据格式的问题。通过修改table.js源码中的pullData方法,引入responseHandler回调,实现在建立table时自定义处理后端返回的数据结构,从而满足特定业务需求。
问题背景与版本说明
当前使用的框架版本为layui-v2.3.0。
具体的修改方案如下:
源码修改步骤
首先,需要找到并打开layui框架目录下的table.js源文件。
在table.js源码中,定位到Class.prototype.pullData方法的定义内部。
//获得数据
Class.prototype.pullData = function(curr, loadIndex){
var that = this
,options = that.config
,request = options.request
,response = options.response
,sort = function(){
if(typeof options.initSort === 'object'){
that.sort(options.initSort.field, options.initSort.type);
}
};
that.startTime = new Date().getTime(); //渲染开始时间
if(options.url){ //Ajax请求
var params = {};
params[request.pageName] = curr;
params[request.limitName] = options.limit;
//参数
var data = $.extend(params, options.where);
if(options.contentType && options.contentType.indexOf("application/json") == 0){ //提交 json 格式
data = JSON.stringify(data);
}
$.ajax({
type: options.method || 'get'
,url: options.url
,contentType: options.contentType
,data: data
,dataType: 'json'
,headers: options.headers || {}
,success: function(res){
// 加入这部分!!!
// 临时解决layui的table组件中response选项不支持多层级获取接口数据的方法
// ----------------开始---------------------
if (typeof options.responseHandler == "function") {
res = options.responseHandler(res);
}
// ----------------结束---------------------
if(res[response.statusName] != response.statusCode){
that.renderForm();
that.layMain.html('<div class="'+ NONE +'">'+ (res[response.msgName] || '返回的数据状态异常') +'</div>');
} else {
that.renderData(res, curr, res[response.countName]), sort();
options.time = (new Date().getTime() - that.startTime) + ' ms'; //耗时(接口请求+视图渲染)
}
loadIndex && layer.close(loadIndex);
typeof options.done === 'function' && options.done(res, curr, res[response.countName]);
}
,error: function(e, m){
that.layMain.html('<div class="'+ NONE +'">数据接口请求异常</div>');
that.renderForm();
loadIndex && layer.close(loadIndex);
}
});
} else if(options.data && options.data.constructor === Array){ //已知数据
var res = {}
,startLimit = curr*options.limit - options.limit
res[response.dataName] = options.data.concat().splice(startLimit, options.limit);
res[response.countName] = options.data.length;
that.renderData(res, curr, options.data.length), sort();
typeof options.done === 'function' && options.done(res, curr, res[response.countName]);
}
};
核心代码实现
修改后的核心逻辑如下所示:
配置使用方式
在初始化建立table实例的时候,
需要加入responseHandler配置项。
responseHandler: function (res) {
// 可进行数据操作
return {
"count": res.data.count,
"data": res.data.companyList,
"code": res.code == 200 ? 0 : -1 //code值为200表示成功
};
},
以上便是解决layui中table异步数据请求不支持自定义返回数据格式问题的完整方案,希望能为读者提供参考,并欢迎大家继续支持本站。
作者最新文章
JS处理含Emoji或中文的字符串转数组乱码问题
2026-11-05 16:12:28
JS怎么使用展开运算符合并对象
2026-11-05 14:42:18
ES6+环境下判断JS对象为空的简洁写法
2026-11-05 12:12:23
怎么通过replacer函数自定义JS中JSON的格式化输出
2026-11-05 11:19:44
JS正则表达式基础:字面量与RegExp构造函数的区别及常用元字符
2026-11-05 11:16:58
