解决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 相关文章推荐
stream.js 一个很小、完全独立的Javascript类库
Oct 28 Javascript
动态加载iframe时get请求传递中文参数乱码解决方法
May 07 Javascript
在JS数组特定索引处指定位置插入元素
Jul 27 Javascript
JavaScript实现的双向跨域插件分享
Jan 31 Javascript
web前端开发JQuery常用实例代码片段(50个)
Aug 28 Javascript
js调出上下文菜单的实例
Dec 17 Javascript
jquery mobile 实现自定义confirm确认框效果的简单实例
Jun 17 Javascript
用AngularJS来实现监察表单按钮的禁用效果
Nov 02 Javascript
JavaScript静态作用域和动态作用域实例详解
Jun 17 Javascript
在vue+element ui框架里实现lodash的debounce防抖
Nov 13 Javascript
微信小程序表单验证WxValidate的使用
Nov 27 Javascript
json解析大全 双引号、键值对不在一起的情况
Dec 06 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 eval函数用法 PHP中eval()函数小技巧
2012/10/31 PHP
百度站点地图(百度sitemap)生成方法分享
2014/01/09 PHP
php中使用session_set_save_handler()函数把session保存到MySQL数据库实例
2014/11/06 PHP
php类中的$this,static,final,const,self这几个关键字使用方法
2015/12/14 PHP
46 个非常有用的 PHP 代码片段
2016/02/16 PHP
PHP与Web页面的交互示例详解二
2020/08/04 PHP
js 父窗口控制子窗口的行为-打开,关闭,重定位,回复
2010/04/20 Javascript
JS操作数据库的实例代码
2013/10/17 Javascript
JS实现两个大数(整数)相乘
2014/04/28 Javascript
jquery实现网页的页面平滑滚动效果代码
2015/11/02 Javascript
AngularJS基础 ng-dblclick 指令用法
2016/08/01 Javascript
jQuery+正则+文本框只能输入数字的实现方法
2016/10/07 Javascript
AngularJS过滤器filter用法分析
2016/12/11 Javascript
JS数字千分位格式化实现方法总结
2016/12/16 Javascript
webpack学习笔记之代码分割和按需加载的实例详解
2017/07/20 Javascript
js中document.write和document.writeln的区别
2018/03/11 Javascript
React.js绑定this的5种方法(小结)
2018/06/05 Javascript
vue-cli中使用高德地图的方法示例
2019/03/28 Javascript
微信小程序实现下拉框功能
2019/07/16 Javascript
JavaScript实现HSL拾色器
2020/05/21 Javascript
Python自动连接ssh的方法
2015/03/07 Python
pandas将DataFrame的列变成行索引的方法
2018/04/10 Python
利用numpy和pandas处理csv文件中的时间方法
2018/04/19 Python
python实现统计文本中单词出现的频率详解
2019/05/20 Python
python3.7简单的爬虫实例详解
2019/07/08 Python
Python中turtle库的使用实例
2019/09/09 Python
美国老牌主机服务商:iPage
2016/07/22 全球购物
Spongelle官网:美国的创意护肤洗护品牌
2019/05/15 全球购物
毕业大学生自荐信
2014/06/17 职场文书
公司门卫工作职责
2014/06/28 职场文书
个人总结与自我评价
2014/09/18 职场文书
四风批评与自我批评范文
2014/10/14 职场文书
学校师德师风整改措施
2014/10/27 职场文书
运动会通讯稿200字
2015/07/20 职场文书
2016年度先进班组事迹材料
2016/03/01 职场文书
python某漫画app逆向
2021/03/31 Python