解决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 相关文章推荐
js格式化时间小结
Nov 03 Javascript
jQuery插件简单实现方法
Jul 18 Javascript
JS把内容动态插入到DIV的实现方法
Jul 19 Javascript
深入分析node.js的异步API和其局限性
Sep 05 Javascript
解析Vue2.0双向绑定实现原理
Feb 23 Javascript
详解webpack打包vue时提取css
May 26 Javascript
Vue实现active点击切换方法
Mar 16 Javascript
关于JavaScript中高阶函数的魅力详解
Sep 07 Javascript
Three.js实现3D机房效果
Dec 30 Javascript
新手入门js闭包学习过程解析
Oct 08 Javascript
vue 项目打包时样式及背景图片路径找不到的解决方式
Nov 12 Javascript
WebRTC记录音视频流(web技术分享)
Feb 24 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
Windows中安装Apache2和PHP4权威指南
2006/11/18 PHP
json的键名为数字时的调用方式(示例代码)
2013/11/15 PHP
php自定义分页类完整实例
2015/12/25 PHP
PHP实现带重试功能的curl连接示例
2016/07/28 PHP
php设计模式之装饰模式应用案例详解
2019/06/17 PHP
jquery下异步提交表单 异步跨域提交表单
2010/11/17 Javascript
基于Jquery的标签智能验证实现代码
2010/12/27 Javascript
appendChild() 或 insertBefore()使用与区别介绍
2013/10/11 Javascript
js实现按Ctrl+Enter发送效果
2014/09/18 Javascript
Underscore源码分析
2015/12/30 Javascript
很棒的js Tab选项卡切换效果
2016/08/30 Javascript
微信小程序 数据绑定及运算的简单实例
2017/09/20 Javascript
AngularJS 应用模块化的使用
2018/04/04 Javascript
vue基础之事件简写、事件对象、冒泡、默认行为、键盘事件实例分析
2019/03/11 Javascript
解决layui下拉框监听问题(监听不到值的变化)
2019/09/28 Javascript
Angular封装表单控件及思想总结
2019/12/11 Javascript
使用JavaScript计算前一天和后一天的思路详解
2019/12/20 Javascript
详解vuejs中执行npm run dev出现页面cannot GET/问题
2020/04/26 Javascript
JavaScript实现放大镜效果代码示例
2020/04/29 Javascript
three.js欧拉角和四元数的使用方法
2020/07/26 Javascript
python中print的不换行即时输出的快速解决方法
2016/07/20 Python
python实现发送邮件功能
2017/07/22 Python
《Python学习手册》学习总结
2018/01/17 Python
python存储16bit和32bit图像的实例
2018/12/05 Python
Python 按字典dict的键排序,并取出相应的键值放于list中的实例
2019/02/12 Python
python实现字符串加密 生成唯一固定长度字符串
2019/03/22 Python
Python 数据可视化pyecharts的使用详解
2019/06/26 Python
瑞士图书网站:Weltbild.ch
2019/09/17 全球购物
党员群众路线教育实践活动学习笔记
2014/11/05 职场文书
护士自荐信范文
2015/03/25 职场文书
商务司机岗位职责
2015/04/10 职场文书
公司2015年终工作总结
2015/05/26 职场文书
2015年食品安全宣传周活动总结
2015/07/09 职场文书
小学英语教师2015年度个人工作总结
2015/10/14 职场文书
创业计划书之网吧
2019/10/10 职场文书
详解Python中__new__方法的作用
2022/03/31 Python