解决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中confirm,alert,prompt函数区别分析
Jan 17 Javascript
基于JQuery实现的图片自动进行缩放和裁剪处理
Jan 31 Javascript
Angular用来控制元素的展示与否的原生指令介绍
Jan 07 Javascript
jQuery给动态添加的元素绑定事件的方法
Mar 09 Javascript
js实现prototype扩展的方法(字符串,日期,数组扩展)
Jan 14 Javascript
JavaScript修改作用域外变量的方法
Mar 25 Javascript
JavaScript中的继承之类继承
May 01 Javascript
javascript学习笔记_浅谈基础语法,类型,变量
Sep 19 Javascript
基于Datatables跳转到指定页的简单实例
Nov 09 Javascript
JS+HTML5实现获取手机验证码倒计时按钮
Aug 08 Javascript
微信小程序获取用户信息的两种方法wx.getUserInfo与open-data实例分析
May 03 Javascript
小程序实现多个选项卡切换
Jun 19 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代码 适用于登陆页面制作
2016/08/17 PHP
JavaScript 节点操作 以及DOMDocument属性和方法
2007/12/06 Javascript
用JavaScript调用WebService的示例
2008/04/07 Javascript
script的async属性以非阻塞的模式加载脚本
2013/01/15 Javascript
jquery获得页面元素的坐标值实现思路及代码
2013/04/15 Javascript
JS弹出层的显示与隐藏示例代码
2013/12/27 Javascript
微信小程序 引入es6 promise
2017/04/12 Javascript
vue.js父组件使用外部对象的方法示例
2017/04/25 Javascript
Vue2 监听属性改变watch的实例代码
2018/08/27 Javascript
jQuery实现的中英文切换功能示例
2019/01/11 jQuery
node.JS路径解析之PATH模块使用方法详解
2020/02/06 Javascript
Python深入学习之对象的属性
2014/08/31 Python
Python字符串特性及常用字符串方法的简单笔记
2016/01/04 Python
Python黑帽编程 3.4 跨越VLAN详解
2016/09/28 Python
微信 用脚本查看是否被微信好友删除
2016/10/28 Python
python 计算文件的md5值实例
2017/01/13 Python
Python3实现的旋转矩阵图像算法示例
2019/04/03 Python
Python魔法方法功能与用法简介
2019/04/04 Python
python 公共方法汇总解析
2019/09/16 Python
Python数据存储之 h5py详解
2019/12/26 Python
python中Django文件上传方法详解
2020/08/05 Python
python如何使用腾讯云发送短信
2020/09/17 Python
python性能测试工具locust的使用
2020/12/28 Python
HTML5调用手机发短信和打电话功能
2020/04/29 HTML / CSS
印度尼西亚最完整和最大的在线药房网站:Farmaku.com
2019/11/23 全球购物
Jacques Lemans德国:奥地利钟表品牌
2019/12/26 全球购物
科室工作个人总结的自我评价
2013/10/29 职场文书
竞选班长的演讲稿
2014/04/24 职场文书
我的祖国演讲稿
2014/05/04 职场文书
党在我心中演讲稿
2014/09/02 职场文书
教师党员个人剖析材料
2014/09/29 职场文书
六五普法先进个人主要事迹材料
2015/11/03 职场文书
导游词之泰山玉皇顶
2019/12/23 职场文书
【海涛dota解说】一房久违的影魔魂守二连发
2022/04/01 DOTA
DSP接收机前端设想
2022/04/05 无线电
Windows Server 2019 安装DHCP服务及相关配置
2022/04/28 Servers