解决layui中table异步数据请求不支持自定义返回数据格式的问题


Posted in Javascript onAugust 19, 2018

使用版本 layui-v2.3.0

修改:

打开layui中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: function (res) {
 // 可进行数据操作
 return {
  "count": res.data.count,
  "data": res.data.companyList,
  "code": res.code == 200 ? 0 : -1 //code值为200表示成功
 };
},

以上这篇解决layui中table异步数据请求不支持自定义返回数据格式的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Prototype源码浅析 String部分(二)
Jan 16 Javascript
avalon js实现仿微博拖动图片排序
Aug 14 Javascript
图解JavaScript中的this关键字
May 28 Javascript
JavaScript编写简单的计算器
Nov 25 Javascript
React.js入门学习第一篇
Mar 30 Javascript
jQuery实现淡入淡出的模态框
Feb 09 Javascript
JS实现图片放大缩小的方法
Feb 15 Javascript
详解vue表单——小白速看
Apr 08 Javascript
JavaScript 点击触发复制功能实例详解
Nov 02 Javascript
React Hooks的深入理解与使用
Nov 12 Javascript
vue webpack重写cookie路径的方法
Jul 10 Javascript
vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作
Jul 22 Javascript
Vue常用指令详解分析
Aug 19 #Javascript
使用layui 渲染table数据表格的实例代码
Aug 19 #Javascript
layui获取选中行数据的实例讲解
Aug 19 #Javascript
Layui组件Table绑定行点击事件和获取行数据的方法
Aug 19 #Javascript
菊花转动的jquery加载动画效果
Aug 19 #jQuery
jQuery中常用动画效果函数知识点整理
Aug 19 #jQuery
jQuery UI实现动画效果代码分享
Aug 19 #jQuery
You might like
PHP开发文件系统实例讲解
2006/10/09 PHP
实用函数3
2007/11/08 PHP
PHP发送短信代码分享
2015/08/11 PHP
ThinkPHP框架表单验证操作方法
2017/07/19 PHP
Laravel使用RabbitMQ的方法示例
2019/06/18 PHP
PJ Blog修改-禁止复制的代码和方法
2006/10/25 Javascript
Firefox+FireBug使JQuery的学习更加轻松愉快
2010/01/01 Javascript
MooTools 页面滚动浮动层智能定位实现代码
2011/08/23 Javascript
JS中setInterval、setTimeout不能传递带参数的函数的解决方案
2013/04/28 Javascript
解析dom中的children对象数组元素firstChild,lastChild的使用
2013/07/10 Javascript
javascript编程异常处理实例小结
2015/11/30 Javascript
Underscore源码分析
2015/12/30 Javascript
Javascript highcharts 饼图显示数量和百分比实例代码
2016/12/06 Javascript
微信小程序学习(4)-系统配置app.json详解
2017/01/12 Javascript
JavaScript使用readAsDataUrl方法预览图片
2017/05/10 Javascript
微信小程序商品详情页的底部弹出框效果
2020/11/16 Javascript
vue动态改变背景图片demo分享
2018/09/13 Javascript
bootstrap table合并行数据并居中对齐效果
2018/10/17 Javascript
vue实现手机端省市区区域选择
2019/09/27 Javascript
vue把输入框的内容添加到页面的实例讲解
2019/11/11 Javascript
jenkins自动构建发布vue项目的方法步骤
2021/01/04 Vue.js
python 自动提交和抓取网页
2009/07/13 Python
在PyCharm中三步完成PyPy解释器的配置的方法
2018/10/29 Python
在unittest中使用 logging 模块记录测试数据的方法
2018/11/30 Python
Python 串口读写的实现方法
2019/06/12 Python
linux环境中没有网络怎么下载python
2019/07/07 Python
Python分析最近大火的网剧《隐秘的角落》
2020/07/02 Python
CSS3实现千变万化的文字阴影text-shadow效果设计
2016/04/26 HTML / CSS
编程用JAVA解析XML的方式
2013/07/07 面试题
大学生应聘推荐信范文
2013/11/19 职场文书
作弊检讨书1000字
2014/02/01 职场文书
军训 自我鉴定
2014/02/03 职场文书
公司节能减排方案
2014/05/16 职场文书
道路交通事故赔偿协议书
2014/10/24 职场文书
经理聘任证明
2015/03/02 职场文书
Django migrate报错的解决方案
2021/05/20 Python