解决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 相关文章推荐
会自动逐行上升的文本框
Jun 30 Javascript
用js查找法实现当前栏目的高亮显示的代码
Nov 24 Javascript
Prototype源码浅析 Number部分
Jan 16 Javascript
js自定义事件及事件交互原理概述(二)
Feb 01 Javascript
jquery实现简单易懂的图片展示小例子
Nov 21 Javascript
js获取鼠标点击的位置实现思路及代码
May 09 Javascript
基于jQuery实现的旋转彩圈实例
Jun 26 Javascript
学习JavaScript设计模式(代理模式)
Dec 03 Javascript
Vue实例简单方法介绍
Jan 20 Javascript
巧用canvas
Jan 21 Javascript
mint-ui 时间插件使用及获取选择值的方法
Feb 09 Javascript
Javascript执行上下文顺序的深入讲解
Nov 04 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
在WIN98下以apache模块方式安装php
2006/10/09 PHP
深入解析PHP 5.3.x 的strtotime() 时区设定 警告信息修复
2013/08/05 PHP
php实现购物车功能(下)
2016/01/05 PHP
PHP实现上传图片到数据库并显示输出的方法
2018/05/31 PHP
关于JAVASCRIPT urldecode URL解码的问题
2012/01/08 Javascript
DWZ table的原生分页浅谈
2013/03/01 Javascript
js replace替换所有匹配的字符串
2014/02/13 Javascript
生成二维码方法汇总
2014/12/26 Javascript
js实现发送验证码后的倒计时功能
2015/05/28 Javascript
纯JS代码实现气泡效果
2016/05/04 Javascript
深入浅析JavaScript中with语句的理解
2016/05/12 Javascript
easyui window refresh 刷新两次的解决方法(推荐)
2016/05/18 Javascript
jQuery设置和获取select、checkbox、radio的选中值方法
2017/01/01 Javascript
jQuery实现别踩白块儿网页版小游戏
2017/01/18 Javascript
input框中自动展示当前日期yyyy/mm/dd的实现方法
2017/07/06 Javascript
微信小程序实现3D轮播图效果(非swiper组件)
2019/09/21 Javascript
详解vue父子组件状态同步的最佳方式
2020/09/10 Javascript
vue中axios封装使用的完整教程
2021/03/03 Vue.js
[02:40]2014DOTA2 国际邀请赛中国区预选赛 四大豪门抵达华西村
2014/05/23 DOTA
[02:07]2017国际邀请赛中国区预选赛直邀战队前瞻
2017/06/23 DOTA
零基础写python爬虫之urllib2中的两个重要概念:Openers和Handlers
2014/11/05 Python
微信跳一跳python代码实现
2018/01/05 Python
python实现pdf转换成word/txt纯文本文件
2018/06/07 Python
numpy中矩阵合并的实例
2018/06/15 Python
Python中类的创建和实例化操作示例
2019/02/27 Python
详解在python操作数据库中游标的使用方法
2019/11/12 Python
python图形开发GUI库pyqt5的基本使用方法详解
2020/02/14 Python
MADE法国:提供原创设计师家具
2018/09/18 全球购物
金融专业个人求职信
2013/09/22 职场文书
司法建议书范文
2014/05/13 职场文书
六一儿童节活动总结
2014/08/27 职场文书
喝酒驾驶检讨书
2014/10/01 职场文书
餐厅感恩节活动策划方案
2014/10/11 职场文书
2014年骨干教师工作总结
2014/12/19 职场文书
2016年乡镇七一建党节活动总结
2016/04/05 职场文书
服务器间如何实现文件共享
2022/05/20 Servers