解决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 相关文章推荐
ExtJS 2.0 实用简明教程之布局概述
Apr 29 Javascript
firefox下对ajax的onreadystatechange的支持情况分析
Dec 14 Javascript
jquery ajax学习笔记2 使用XMLHttpRequest对象的responseXML
Oct 16 Javascript
Jquery 表单验证类介绍与实例
Jun 09 Javascript
js复制到剪切板的实例方法
Jun 28 Javascript
JS的document.all函数使用示例
Dec 30 Javascript
在JavaScript中构建ArrayList示例代码
Sep 17 Javascript
纯JS实现旋转图片3D展示效果
Apr 12 Javascript
JS选项卡动态替换banner图片路径的方法
May 11 Javascript
js实现类似菜单风格的TAB选项卡效果代码
Aug 28 Javascript
JS实现网页标题栏显示当前时间和日期的完整代码
Nov 02 Javascript
VSCode 配置uni-app的方法
Jul 11 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&amp;mysql(一)
2006/10/09 PHP
出现“不能执行已释放的Script代码”错误的原因及解决办法
2007/08/29 Javascript
js tab 选项卡
2009/04/26 Javascript
文本框输入时 实现自动提示(像百度、google一样)
2012/04/05 Javascript
Javascript级联下拉菜单以及AJAX数据验证核心代码
2013/05/10 Javascript
js网页实时倒计时精确到秒级
2014/02/10 Javascript
JS根据变量保存方法名并执行方法示例
2014/04/04 Javascript
javascript的document.referrer浏览器支持、失效情况总结
2014/07/18 Javascript
jQuery实现hover合成事件的方法
2015/08/06 Javascript
基于JavaScript实现图片点击弹出窗口而不是保存
2016/02/06 Javascript
AngularJS基础 ng-mouseover 指令简单示例
2016/08/02 Javascript
js判断请求的url是否可访问,支持跨域判断的实现方法
2016/09/17 Javascript
一个可复用的vue分页组件
2017/05/15 Javascript
微信小程序返回多级页面的实现方法
2017/10/27 Javascript
详解vue-cli项目中用json-sever搭建mock服务器
2017/11/02 Javascript
微信小程序实现动态设置页面标题的方法【附源码下载】
2017/11/29 Javascript
基于vue-cli配置lib-flexible + rem实现移动端自适应
2017/12/26 Javascript
vue.js实现的经典计算器/科学计算器功能示例
2018/07/11 Javascript
微信小程序实现之手势锁功能实例代码
2018/07/19 Javascript
JS实现求字符串中出现最多次数的字符和次数示例
2019/07/05 Javascript
小程序实现分类页
2019/07/12 Javascript
详解Vue-cli3.X使用px2rem遇到的问题
2019/08/09 Javascript
微信小程序登陆注册功能的实现代码
2019/12/10 Javascript
JavaScript检测浏览器是否支持CSS变量代码实例
2020/04/03 Javascript
pandas.dataframe按行索引表达式选取方法
2018/10/30 Python
django ModelForm修改显示缩略图 imagefield类型的实例
2019/07/28 Python
使用Python的networkx绘制精美网络图教程
2019/11/21 Python
python字典的值可以修改吗
2020/06/29 Python
波兰补充商店:Muscle Power
2018/10/29 全球购物
旅游管理专业个人求职信范文
2013/12/24 职场文书
公司寄语大全
2014/04/10 职场文书
网络技术专业求职信
2014/05/02 职场文书
酒店温馨提示语
2015/07/14 职场文书
mysql查询的控制语句图文详解
2021/04/11 MySQL
python3实现常见的排序算法(示例代码)
2021/07/04 Python
HTML中的表格元素介绍
2022/02/28 HTML / CSS