解决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 相关文章推荐
判断脚本加载是否完成的方法
May 26 Javascript
JavaScript 原型继承之构造函数继承
Aug 26 Javascript
IE、FF、Chrome浏览器中的JS差异介绍
Aug 13 Javascript
javaScript如何处理从java后台返回的list
Apr 24 Javascript
使用jQuery加载html页面到指定的div实现方法
Jul 13 Javascript
jQuery实现字符串全部替换的方法
Dec 12 Javascript
Es6 写的文件import 起来解决方案详解
Dec 13 Javascript
jQuery如何跳转到另一个网页 就这么简单
Dec 28 Javascript
微信小程序WebSocket实现聊天对话功能
Jul 06 Javascript
vue2.0项目集成Cesium的实现方法
Jul 30 Javascript
微信小程序的授权实现过程解析
Aug 02 Javascript
vue路由切换时取消之前的所有请求操作
Sep 01 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
discuz安全提问算法
2007/06/06 PHP
php adodb介绍
2009/03/19 PHP
php+mysql查询优化简单实例
2015/01/13 PHP
10个php函数实用却不常见
2015/10/13 PHP
PHP数学运算函数大汇总(经典值得收藏)
2016/04/01 PHP
PHP小偷程序的设计与实现方法详解
2016/10/15 PHP
PHP实现使用DOM将XML数据存入数组的方法示例
2017/09/27 PHP
Laravel5.1 框架Request请求操作常见用法实例分析
2020/01/04 PHP
用JavaScript计算在UTF-8下存储字符串占用字节数
2013/08/08 Javascript
jQuery动态显示和隐藏datagrid中的某一列的方法
2013/12/11 Javascript
jquery设置按钮停顿3秒不可用
2014/03/07 Javascript
Javascript writable特性介绍
2015/02/27 Javascript
jQuery构造函数init参数分析
2015/05/13 Javascript
vue之nextTick全面解析
2017/05/17 Javascript
JS实现经典的中国地区三级联动下拉菜单功能实例【测试可用】
2017/06/06 Javascript
微信小程序 http请求的session管理
2017/06/07 Javascript
vue.js移动端app实战1:初始配置详解
2017/07/24 Javascript
vue 中的 render 函数作用详解
2020/02/28 Javascript
基于js实现判断浏览器类型代码实例
2020/07/17 Javascript
浅谈对yield的初步理解
2017/05/29 Python
Python的mysql数据库的更新如何实现
2017/07/31 Python
python PyTorch参数初始化和Finetune
2018/02/11 Python
Python针对给定列表中元素进行翻转操作的方法分析
2018/04/27 Python
Django自定义模板过滤器和标签的实现方法
2019/08/21 Python
Python中base64与xml取值结合问题
2019/12/22 Python
pycharm 实现本地写代码,服务器运行的操作
2020/06/08 Python
CSS3之多背景background使用示例
2013/10/18 HTML / CSS
如何查找网页漏洞
2016/06/22 面试题
领导干部培训感言
2014/01/23 职场文书
巾帼志愿者活动方案
2014/08/17 职场文书
工作时间调整通知
2015/04/24 职场文书
幼儿园大班教育随笔
2015/08/14 职场文书
python爬虫之爬取笔趣阁小说
2021/04/22 Python
Python网络编程之ZeroMQ知识总结
2021/04/25 Python
Python中的turtle画箭头,矩形,五角星
2022/03/16 Python
详解MySQL的主键查询为什么这么快
2022/04/03 MySQL