解决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代码
Dec 26 Javascript
js 实现菜单左右滚动显示示例介绍
Nov 21 Javascript
js使用ajax读博客rss示例
May 06 Javascript
使用javascript实现简单的选项卡切换
Jan 09 Javascript
js实现的简洁网页滑动tab菜单效果代码
Aug 24 Javascript
cocos2dx骨骼动画Armature源码剖析(三)
Sep 08 Javascript
利用CSS3在Angular中实现动画
Jan 15 Javascript
浅谈JavaScript异步编程
Jan 20 Javascript
angularjs定时任务的设置与清除示例
Jun 02 Javascript
JavaScript实现滑动导航栏效果
Aug 30 Javascript
微信小程序去除左上角返回键的实现方法
Mar 06 Javascript
js+canvas实现转盘效果(两个版本)
Sep 13 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函数的实现原理及性能分析(一)
2015/05/13 PHP
PHP依赖注入原理与用法分析
2018/08/21 PHP
使用PHP开发留言板功能
2019/11/19 PHP
setTimeout 不断吐食CPU的问题分析
2009/04/01 Javascript
jQuery EasyUI API 中文文档 - DataGrid数据表格
2011/11/17 Javascript
JS 拦截全局ajax请求实例解析
2016/11/29 Javascript
JS多文件上传的实例代码
2017/01/11 Javascript
jQuery快速高效制作网页交互特效
2017/02/24 Javascript
Vuex之理解Store的用法
2017/04/19 Javascript
Vue中使用vee-validate表单验证的方法
2018/05/09 Javascript
vue this.reload 方法 配置
2018/09/12 Javascript
angularjs通过过滤器返回超链接的方法
2018/10/26 Javascript
vue实现带复选框的树形菜单
2019/05/27 Javascript
vuex+axios+element-ui实现页面请求loading操作示例
2020/02/02 Javascript
Python使用Redis实现作业调度系统(超简单)
2016/03/22 Python
python字符串str和字节数组相互转化方法
2017/03/18 Python
CentOS中升级Python版本的方法详解
2017/07/10 Python
Django ManyToManyField 跨越中间表查询的方法
2018/12/18 Python
python标记语句块使用方法总结
2019/08/05 Python
python查看数据类型的方法
2019/10/12 Python
python 申请内存空间,用于创建多维数组的实例
2019/12/02 Python
Tensorflow加载Vgg预训练模型操作
2020/05/26 Python
django form和field具体方法和属性说明
2020/07/09 Python
详解如何修改jupyter notebook的默认目录和默认浏览器
2021/01/24 Python
编程实现去掉XML的重复结点
2014/05/28 面试题
中文专业毕业生自荐信
2013/10/28 职场文书
银行办理业务介绍信
2014/01/18 职场文书
yy婚礼司仪主持词
2014/03/14 职场文书
年度优秀员工获奖感言
2014/08/15 职场文书
教师作风建设剖析材料
2014/10/11 职场文书
关爱留守儿童捐款倡议书
2015/04/27 职场文书
《我要的是葫芦》教学反思
2016/02/18 职场文书
有趣的二维码:使用MyQR和qrcode来制作二维码
2021/05/10 Python
浅谈哪个Python库才最适合做数据可视化
2021/06/28 Python
Javascript webpack动态import
2022/04/19 Javascript
python 镜像环境搭建总结
2022/09/23 Python