解决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 相关文章推荐
JQuery Highcharts 动态生成图表的方法
Nov 15 Javascript
将字符串中由空格隔开的每个单词首字母大写
Apr 06 Javascript
jQuery在ul中显示某个li索引号的方法
Mar 17 Javascript
javascript数组去重的方法汇总
Apr 14 Javascript
jQuery实现有动画淡出效果的二级折叠菜单代码
Oct 17 Javascript
javascript匀速运动实现方法分析
Jan 08 Javascript
AngularJS控制器controller正确的通信的方法
Jan 25 Javascript
JS简单实现禁止访问某个页面的方法
Sep 13 Javascript
微信小程序 页面之间传参实例详解
Jan 13 Javascript
JS中的作用域链
Mar 01 Javascript
javascript帧动画(实例讲解)
Sep 02 Javascript
JS+HTML5 Canvas实现简单的写字板功能示例
Aug 30 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
CI框架入门示例之数据库取数据完整实现方法
2014/11/05 PHP
微信公众平台接口开发入门示例
2014/12/24 PHP
java微信开发之上传下载多媒体文件
2016/06/24 PHP
利用php-cli和任务计划实现刷新token功能的方法
2017/05/03 PHP
vmware linux系统安装最新的php7图解
2019/04/14 PHP
PHP读取Excel内的图片(phpspreadsheet和PHPExcel扩展库)
2019/11/19 PHP
jquery实现文本框数量加减功能的例子分享
2014/05/10 Javascript
Jquery实现仿腾讯微博发表广播
2014/11/17 Javascript
js中匿名函数的创建与调用方法分析
2014/12/19 Javascript
JS中捕获console.log()输出的方法
2015/04/16 Javascript
深入学习AngularJS中数据的双向绑定机制
2016/03/04 Javascript
jQuery图片轮播插件——前端开发必看
2016/05/31 Javascript
jQuery的each循环用法简单示例
2016/06/12 Javascript
AngularJs Injecting Services Into Controllers详解
2016/09/02 Javascript
原生Aajax 和jQuery Ajax 写法个人总结
2017/03/24 jQuery
关于Node.js的events.EventEmitter用法介绍
2017/04/01 Javascript
jquery 键盘事件的使用方法详解
2017/09/13 jQuery
在Vue项目中引入JQuery-ui插件的讲解
2019/01/27 jQuery
node.js中Buffer缓冲器的原理与使用方法分析
2019/11/23 Javascript
使用js和canvas实现时钟效果
2020/09/08 Javascript
[02:30]DOTA2英雄基础教程 暗影恶魔
2013/12/17 DOTA
python定时检查启动某个exe程序适合检测exe是否挂了
2013/01/21 Python
Python3基础之list列表实例解析
2014/08/13 Python
python查看模块,对象的函数方法
2018/10/16 Python
python3 实现一行输入,空格隔开的示例
2018/11/14 Python
python实现逐个读取txt字符并修改
2018/12/24 Python
python中hasattr()、getattr()、setattr()函数的使用
2019/08/16 Python
django自定义非主键自增字段类型详解(auto increment field)
2020/03/30 Python
canvas像素画板的实现代码
2018/11/21 HTML / CSS
是否有自动比较结构的方法
2015/06/03 面试题
住房抵押登记委托书
2014/09/27 职场文书
经典搞笑版检讨书
2015/02/19 职场文书
2015年初一班主任工作总结
2015/05/13 职场文书
爱国主题班会教案
2015/08/14 职场文书
《雪域豹影》读后感:父爱的伟大
2019/12/23 职场文书
JAVA 线程池(池化技术)的实现原理
2022/04/28 Java/Android