解决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之网页换肤实现代码
Apr 30 Javascript
js获取时间(本周、本季度、本月..)
Nov 22 Javascript
改变状态栏文字的js代码
Jun 13 Javascript
仿百度联盟对联广告实现代码
Aug 30 Javascript
深入浅出分析javaScript中this用法
May 09 Javascript
JavaScript基本的输出和嵌入式写法教程
Oct 20 Javascript
JavaScript关于提高网站性能的几点建议(一)
Jul 24 Javascript
从零学习node.js之模块规范(一)
Feb 21 Javascript
JavaScript实现的原生态Tab标签页功能【兼容IE6】
Sep 18 Javascript
axios进阶实践之利用最优雅的方式写ajax请求
Dec 20 Javascript
JQuery模拟实现网页中自定义鼠标右键菜单功能
Nov 14 jQuery
在Koa.js中实现文件上传的接口功能
Oct 08 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
上海地方志办公室-上海电子仪表工业志
2021/03/04 无线电
php结合飞信 免费天气预报短信
2009/05/07 PHP
PHP使用mysql_fetch_row查询获得数据行列表的方法
2015/03/18 PHP
PHP在同一域名下两个不同的项目做独立登录机制详解
2017/09/22 PHP
php ActiveMQ的安装与使用方法图文教程
2020/02/23 PHP
JavaScript 面向对象的之私有成员和公开成员
2010/05/04 Javascript
js中日期的加减法
2015/05/06 Javascript
jquery实现不包含当前项的选择器实例
2015/06/25 Javascript
浏览器复制插件zeroclipboard使用指南
2016/03/26 Javascript
nodejs搭建本地服务器并访问文件的方法
2017/03/03 NodeJs
Vue2.0父组件与子组件之间的事件发射与接收实例代码
2017/09/19 Javascript
Vue.js 利用v-for中的index值实现隔行变色
2018/08/01 Javascript
原生js实现form表单序列化的方法
2018/08/02 Javascript
js实现同一个页面,多个enter事件绑定的示例
2018/10/10 Javascript
JS实现的图片选择顺序切换和循环切换功能示例【测试可用】
2018/12/28 Javascript
详解Vue源码中一些util函数
2019/04/24 Javascript
Vue侦测相关api的实现方法
2019/05/22 Javascript
vue实现树形结构样式和功能的实例代码
2019/10/15 Javascript
NodeJS模块Buffer原理及使用方法解析
2020/11/11 NodeJs
[55:44]完美世界DOTA2联赛决赛 FTD vs Phoenix 第二场 11.08
2020/11/11 DOTA
python基于multiprocessing的多进程创建方法
2015/06/04 Python
python 寻找list中最大元素对应的索引方法
2018/06/28 Python
python3 json数据格式的转换(dumps/loads的使用、dict to str/str to dict、json字符串/字典的相互转换)
2019/04/01 Python
我们为什么要减少Python中循环的使用
2019/07/10 Python
OpenCV 边缘检测
2019/07/10 Python
tensorflow:指定gpu 限制使用量百分比,设置最小使用量的实现
2020/02/06 Python
pyecharts调整图例与各板块的位置间距实例
2020/05/16 Python
Python 生成短8位唯一id实战教程
2021/01/13 Python
python定义具名元组实例操作
2021/02/28 Python
html5 canvas实现跟随鼠标旋转的箭头
2016/03/11 HTML / CSS
旅游与酒店管理的自我评价分享
2013/11/03 职场文书
自我鉴定写作要点
2014/01/17 职场文书
企业领导班子四风对照检查材料
2014/09/27 职场文书
小学教师党员承诺书
2015/04/27 职场文书
仅用一句SQL更新整张表的涨跌幅、涨跌率的解决方案
2021/05/06 MySQL
vue实现登陆页面开发实践
2022/05/30 Vue.js