解决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实现分割提取页面所需内容
May 09 Javascript
javascript实现仿银行密码输入框效果的代码
Dec 13 Javascript
javascript 学习之旅 (3)
Feb 05 Javascript
jQuery中:empty选择器用法实例
Dec 30 Javascript
微信小程序 Button 组件详解及简单实例
Jan 10 Javascript
JQuery判断正整数整理小结
Aug 21 jQuery
ES6中javascript实现函数绑定及类的事件绑定功能详解
Nov 08 Javascript
详解Vue中数组和对象更改后视图不刷新的问题
Sep 21 Javascript
vue单页面在微信下只能分享落地页的解决方案
Apr 15 Javascript
jQuery 实现DOM元素拖拽交换位置的实例代码
Jul 14 jQuery
何时/使用 Vue3 render 函数的教程详解
Jul 25 Javascript
vue实现简易计算器功能
Jan 20 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
PHP获取网页标题的3种实现方法代码实例
2014/04/11 PHP
php循环table实现一行两列显示的方法
2015/06/04 PHP
[原创]ThinkPHP中SHOW_RUN_TIME不能正常显示运行时间的解决方法
2015/10/10 PHP
PHP数据的提交与过滤基本操作实例详解
2016/11/11 PHP
使用PHP连接数据库_实现用户数据的增删改查的整体操作示例
2017/09/01 PHP
PHP基于堆栈实现的高级计算器功能示例
2017/09/15 PHP
实例讲解PHP表单
2020/06/10 PHP
关于JavaScript作用域你想知道的一切
2016/02/04 Javascript
JS实现的样式切换功能tableCSS实例
2016/12/30 Javascript
Vue.js之slot深度复制详解
2017/03/10 Javascript
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
2017/09/12 jQuery
parabola.js抛物线与加入购物车效果的示例代码
2017/10/25 Javascript
js获取浏览器地址(获取第1个斜杠后的内容)
2019/09/03 Javascript
使用layui+ajax实现简单的菜单权限管理及排序的方法
2019/09/10 Javascript
Vue router传递参数并解决刷新页面参数丢失问题
2020/12/02 Vue.js
python计算文本文件行数的方法
2015/07/06 Python
Python的Tornado框架实现图片上传及图片大小修改功能
2016/06/30 Python
python实现京东秒杀功能
2018/07/30 Python
Pycharm 实现下一个文件引用另外一个文件的方法
2019/01/17 Python
python获取地震信息 微信实时推送
2019/06/18 Python
linux中如何使用python3获取ip地址
2019/07/15 Python
django 邮件发送模块smtp使用详解
2019/07/22 Python
python+openCV调用摄像头拍摄和处理图片的实现
2019/08/06 Python
python kafka 多线程消费者&amp;手动提交实例
2019/12/21 Python
CSS3中Color的一些特性介绍
2012/05/27 HTML / CSS
详解CSS3的box-shadow属性制作边框阴影效果的方法
2016/05/10 HTML / CSS
德国最大的拼图在线商店:Puzzle.de
2016/12/17 全球购物
大学生个人事迹材料
2014/01/21 职场文书
五四青年节演讲稿
2014/05/26 职场文书
金融保险专业求职信
2014/09/03 职场文书
内勤岗位职责
2015/02/10 职场文书
2015教师年度考核评语
2015/03/25 职场文书
消防演习通知
2015/04/25 职场文书
2015年机关党建工作总结
2015/05/22 职场文书
堂吉诃德读书笔记
2015/06/30 职场文书
goland 清除所有的默认设置操作
2021/04/28 Golang