解决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之函数直接量(function(){})()
Jun 29 Javascript
基于jquery的仿百度的鼠标移入图片抖动效果
Sep 17 Javascript
window.ActiveXObject使用说明
Nov 08 Javascript
js弹出的对话窗口永远保持居中显示
Dec 15 Javascript
js获取鼠标点击的位置实现思路及代码
May 09 Javascript
兼容主流浏览器的JS复制内容到剪贴板
Dec 12 Javascript
三个js循环的关键字示例(for与while)
Feb 16 Javascript
js以及jquery实现手风琴效果
Apr 17 Javascript
JS+HTML5实现图片在线预览功能
Jul 22 Javascript
JS获取字符对应的ASCII码实例
Sep 10 Javascript
JavaScript创建对象的常用方式总结
Aug 10 Javascript
JS插入排序简单理解与实现方法分析
Nov 25 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多层数组与对象的转换实例代码
2013/08/05 PHP
PHP array_key_exists检查键名或索引是否存在于数组中的实现方法
2016/06/13 PHP
CodeIgniter框架实现的整合Smarty引擎DEMO示例
2019/03/28 PHP
Laravel5.5+ 使用API Resources快速输出自定义JSON方法详解
2020/04/06 PHP
JavaScript 判断浏览器类型及版本
2009/02/21 Javascript
jQuery右键菜单contextMenu使用实例
2011/09/28 Javascript
国外大牛IE版本检测!现在IE都到9了,IE检测代码
2012/01/04 Javascript
javascript动态加载三
2012/08/22 Javascript
推荐 21 款优秀的高性能 Node.js 开发框架
2014/08/18 Javascript
jquery中one()方法的用法实例
2015/01/16 Javascript
基于jQuery实现在线选座之高铁版
2015/08/24 Javascript
javascript学习笔记整理(概述、变量、数据类型简介)
2015/10/25 Javascript
BootStrap注意事项小结(五)表单
2017/03/10 Javascript
create-react-app构建项目慢的解决方法
2018/03/14 Javascript
vue-cli项目中使用公用的提示弹层tips或加载loading组件实例详解
2018/05/28 Javascript
微信端调取相册和摄像头功能,实现图片上传,并上传到服务器
2019/05/16 Javascript
一篇文章带你浅入webpack的DLL优化打包
2020/02/20 Javascript
详解在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入)
2020/07/11 Javascript
[55:42]VG vs VGJ.T 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
图文详解WinPE下安装Python
2016/05/17 Python
Python 模拟员工信息数据库操作的实例
2017/10/23 Python
Django 跨域请求处理的示例代码
2018/05/02 Python
Python 图像处理: 生成二维高斯分布蒙版的实例
2019/07/04 Python
Django框架视图函数设计示例
2019/07/29 Python
python实现3D地图可视化
2020/03/25 Python
Python爬虫JSON及JSONPath运行原理详解
2020/06/04 Python
Django后端按照日期查询的方法教程
2021/02/28 Python
美国领先的户外服装与装备用品店:Moosejaw
2016/08/25 全球购物
会计专业应届生自荐信
2014/06/28 职场文书
基层党建工作汇报材料
2014/08/15 职场文书
完整版商业计划书
2014/09/15 职场文书
员工教育培训协议书
2014/09/27 职场文书
2014年酒店前台工作总结
2014/11/14 职场文书
2015初中政治教学工作总结
2015/07/21 职场文书
详解mysql三值逻辑与NULL
2021/05/19 MySQL
pytorch DataLoader的num_workers参数与设置大小详解
2021/05/28 Python