解决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 相关文章推荐
javascript跨域刷新实现代码
Jan 01 Javascript
JavaScript学习笔记之内置对象
Jan 22 Javascript
js实现简单的可切换选项卡效果
Apr 10 Javascript
jQuery插件multiScroll实现全屏鼠标滚动切换页面特效
Apr 12 Javascript
如何获取元素的最终background-color
Feb 06 Javascript
vue2.0 和 animate.css的结合使用
Dec 12 Javascript
详解vue.js下引入百度地图jsApi的两种方法
Jul 27 Javascript
vue项目上传Github预览的实现示例
Nov 06 Javascript
React精髓!一篇全概括小结(急速)
May 23 Javascript
深入浅出vue图片路径的实现
Sep 04 Javascript
vue + elementUI实现省市县三级联动的方法示例
Oct 29 Javascript
vue使用vant中的checkbox实现全选功能
Nov 17 Vue.js
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
Terran魔法科技
2020/03/14 星际争霸
如何正确理解PHP的错误信息
2006/10/09 PHP
PHP利用REFERER根居访问来地址进行页面跳转
2013/09/28 PHP
四个常见html网页乱码问题及解决办法
2015/09/08 PHP
php删除一个路径下的所有文件夹和文件的方法
2018/02/07 PHP
Laravel 数据库加密及数据库表前缀配置方法
2019/10/10 PHP
Open and Print a Word Document
2007/06/15 Javascript
详细介绍8款超实用JavaScript框架
2013/10/25 Javascript
js实现顶部可折叠的菜单工具栏效果实例
2015/05/09 Javascript
javascript 显示全局变量与隐式全局变量的区别
2017/02/09 Javascript
nodejs+express实现文件上传下载管理网站
2017/03/15 NodeJs
利用纯JS实现像素逐渐显示的方法示例
2017/08/14 Javascript
详解Vuex中mapState的具体用法
2017/09/28 Javascript
vue 简单自动补全的输入框的示例
2018/03/12 Javascript
angular4笔记系列之内置指令小结
2018/11/09 Javascript
详解Vue.js在页面加载时执行某个方法
2018/11/20 Javascript
Nuxt.js 数据双向绑定的实现
2019/02/17 Javascript
微信小程序实现用table显示数据库反馈的多条数据功能示例
2019/05/07 Javascript
jquery中attr、prop、data区别与用法分析
2019/09/25 jQuery
Python中的jquery PyQuery库使用小结
2014/05/13 Python
python实现的简单FTP上传下载文件实例
2015/06/30 Python
Python MySQL数据库连接池组件pymysqlpool详解
2017/07/07 Python
Django处理文件上传File Uploads的实例
2018/05/28 Python
Python推导式简单示例【列表推导式、字典推导式与集合推导式】
2018/12/04 Python
python实现三次样条插值
2018/12/17 Python
关于Python3 类方法、静态方法新解
2019/08/30 Python
python基于gevent实现并发下载器代码实例
2019/11/01 Python
python输出数学符号实例
2020/05/11 Python
Booking.com西班牙:全球酒店预订
2018/03/30 全球购物
我有一个char * 型指针正巧指向一些int 型变量, 我想跳过它们。 为什么如下的代码((int *)p)++; 不行?
2013/05/09 面试题
大学生家政服务项目创业计划书
2014/01/30 职场文书
物流创业计划书
2014/02/01 职场文书
开学典礼策划方案
2014/05/28 职场文书
导游词之山东八大关
2019/12/18 职场文书
Redis做数据持久化的解决方案及底层原理
2021/07/15 Redis
讲解MySQL增删改操作
2022/05/06 MySQL