解决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 下拉多选框lovcombo
May 19 Javascript
javaScript中的this示例学习详解及工作原理
Jan 13 Javascript
Lab.js初次使用笔记
Feb 28 Javascript
jQuery插件echarts实现的单折线图效果示例【附demo源码下载】
Mar 04 Javascript
js实现图片懒加载效果
Jul 17 Javascript
微信小程序实现给嵌套template模板传递数据的方式总结
Dec 18 Javascript
vue全局组件与局部组件使用方法详解
Mar 29 Javascript
vue-cli2 构建速度优化的实现方法
Jan 08 Javascript
详解vue的数据劫持以及操作数组的坑
Apr 18 Javascript
vue实现滑动切换效果(仅在手机模式下可用)
Jun 29 Javascript
js实现右键弹出自定义菜单
Sep 08 Javascript
Bootstrap FileInput实现图片上传功能
Jan 28 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
一个图形显示IP的PHP程序代码
2007/10/19 PHP
php生成txt文件标题及内容的方法
2014/01/16 PHP
使用PHPMailer实现邮件发送代码分享
2014/10/23 PHP
PHP中通过trigger_error触发PHP错误示例
2015/06/23 PHP
PHP自定义错误用法示例
2016/09/28 PHP
php实现博客,论坛图片防盗链的方法
2016/10/15 PHP
PHP实现的日历功能示例
2018/09/01 PHP
jquery 指南/入门基础
2007/11/30 Javascript
利用javascript/jquery对上传文件格式过滤的方法
2009/07/25 Javascript
JS 时间显示效果代码
2009/08/23 Javascript
javascript对数组的常用操作代码 数组方法总汇
2011/01/27 Javascript
JavaScript操作XML 使用百度RSS作为新闻源示例
2012/02/17 Javascript
原生Js页面滚动延迟加载图片实现原理及过程
2013/06/24 Javascript
可兼容IE的获取及设置cookie的jquery.cookie函数方法
2013/09/02 Javascript
JavaScript获得表单target属性的方法
2015/04/02 Javascript
JS时间特效最常用的三款
2015/08/19 Javascript
js中用cssText设置css样式的简单方法
2016/09/19 Javascript
JavaScript实现二分查找实例代码
2017/02/22 Javascript
详解nodejs实现本地上传图片并预览功能(express4.0+)
2017/06/28 NodeJs
深入理解ES6 Promise 扩展always方法
2017/09/26 Javascript
详解在vue-test-utils中mock全局对象
2018/11/07 Javascript
layui checkbox默认选中,获取选中值,清空所有选中项的例子
2019/09/02 Javascript
Pytorch 实现权重初始化
2019/12/31 Python
Python实现遗传算法(二进制编码)求函数最优值方式
2020/02/11 Python
django orm模块中的 is_delete用法
2020/05/20 Python
Pandas的Apply函数具体使用
2020/07/21 Python
Python如何执行精确的浮点数运算
2020/07/31 Python
UGG澳洲官网:UGG Australia
2018/04/26 全球购物
计算机科学系职业生涯规划书
2014/03/08 职场文书
党的群众路线教育实践方案
2014/05/11 职场文书
幼儿园门卫岗位职责范本
2014/07/02 职场文书
小学雷锋月活动总结
2014/07/03 职场文书
公民授权委托书范本
2014/09/17 职场文书
监察建议书
2015/02/04 职场文书
基于Python和openCV实现图像的全景拼接详细步骤
2021/10/05 Python
python中的random模块和相关函数详解
2022/04/22 Python