解决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事件问题
Sep 05 Javascript
25个优雅的jQuery Tooltip插件推荐
May 25 Javascript
优化RequireJS项目的相关技巧总结
Jul 01 Javascript
JS运动相关知识点小结(附弹性运动示例)
Jan 08 Javascript
JavaScript事件详细讲解
Jun 27 Javascript
JS实现显示带倒影的图片横排居中放大展示特效实例【测试可用】
Aug 23 Javascript
EasyUI Combobox设置默认值 获取text的方法
Nov 28 Javascript
Vuejs 组件——props数据传递的实例代码
Mar 07 Javascript
JavaScript瀑布流布局实现代码
May 06 Javascript
JavaScript数据结构之双向链表和双向循环链表的实现
Nov 28 Javascript
node.js博客项目开发手记
Mar 16 Javascript
解决JS表单验证只有第一个IF起作用的问题
Dec 04 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中关于抽象(abstract)类和抽象方法的问题分析
2014/01/03 PHP
php图片缩放实现方法
2014/02/20 PHP
[原创]php正则删除img标签的方法示例
2017/05/27 PHP
php无限极分类实现方法分析
2019/07/04 PHP
JQUERY THICKBOX弹出层插件
2008/08/30 Javascript
jQuery下扩展插件和拓展函数的写法(匿名函数使用的典型例子)
2010/10/20 Javascript
javascript客户端遍历控件与获取父容器对象示例代码
2014/01/06 Javascript
模拟一个类似百度google的模糊搜索下拉列表
2014/04/15 Javascript
js实现div弹出层的方法
2014/11/20 Javascript
原生js的数组除重复简单实例
2016/05/24 Javascript
vue-router:嵌套路由的使用方法
2017/02/21 Javascript
详解Angular 4.x 动态创建组件
2017/04/25 Javascript
vuex学习之Actions的用法详解
2017/08/29 Javascript
浅析java线程中断的办法
2018/07/29 Javascript
javascript的this关键字详解
2019/05/20 Javascript
turn.js异步加载实现翻书效果
2019/07/25 Javascript
vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
2019/08/03 Javascript
layui table表格数据的新增,修改,删除,查询,双击获取行数据方式
2019/11/14 Javascript
Python编程实现数学运算求一元二次方程的实根算法示例
2017/04/02 Python
Python读取本地文件并解析网页元素的方法
2018/05/21 Python
pygame游戏之旅 python和pygame安装教程
2018/11/20 Python
Python基于聚类算法实现密度聚类(DBSCAN)计算【测试可用】
2018/12/26 Python
Django在admin后台集成TinyMCE富文本编辑器的例子
2019/08/09 Python
基于Python新建用户并产生随机密码过程解析
2019/10/08 Python
详解Python list和numpy array的存储和读取方法
2019/11/06 Python
Python使用ElementTree美化XML格式的操作
2020/03/06 Python
Python Matplotlib简易教程(小白教程)
2020/07/28 Python
Python本地及虚拟解释器配置过程解析
2020/10/13 Python
用CSS3写的模仿iPhone中的返回按钮
2015/04/04 HTML / CSS
Html5页面二次分享的实现
2018/07/30 HTML / CSS
加拿大户外探险购物网站:SAIL
2020/06/27 全球购物
支部鉴定材料
2014/06/02 职场文书
小班教师个人总结
2015/02/05 职场文书
酒店财务经理岗位职责
2015/04/08 职场文书
五一晚会主持词
2015/07/01 职场文书
2016年优秀团员事迹材料
2016/02/25 职场文书