layui异步加载table表中某一列数据的例子


Posted in Javascript onSeptember 16, 2019

layui中table加载数据时 如果数据存放在不同数据表中 那样一个请求拼接每行表格数据 然后统一返回 太慢

//页面加载时请求 另一张表的数据
 var slotGroup;
  admin.req({
    url: '请求地址'
    , method: 'POST'
    , dataType: "json"
    , async: false
    , success: function (res) {
      slotGroup = res.data;
      console.log(slotGroup)
    }
  });

  table.render({
    elem: '#LAY-ad_pass-list'
    ,url: '请求地址' //模拟接口
    ,cols: [[
      {field: 'id', title: 'ID', sort: true}
      ,{field: 'pass_name', title: '通道名称'}
      ,{field: 'pass_code', title: '通道code'}
//注意::此处使用function 返回此列需要展示的数据
      ,{field: 'remark', title: '描述',templet: function (d) {
        return getRemark(d.id)
      } }
      ,{field: 'adState', title: '状态'}
      ,{field: 'updateTime', title: '时间'}
      ,{title: '操作',width: 200, align: 'center', fixed: 'right', toolbar: '#table-forum-list'}
    ]]
    ,page: false
    , text: {
      none: '暂无相关数据'
    }
    , done: function(res, curr, count){
      // console.log(res);
    }
  });

//遍历展示一开始的数据
  function getRemark(v) {
    var showGroup = '';
    if (v == null || v == undefined) return showGroup;
    if (slotGroup != null && slotGroup != undefined) {
      for (var i = 0; i < slotGroup.length; i++) {
        if ( parseInt(slotGroup[i].id)== parseInt(v)) {
          showGroup = slotGroup[i].pass_name;
          return showGroup;
        }
      }
    }
    return showGroup;
  }

以上这篇layui异步加载table表中某一列数据的例子就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 触发事件列表 比较不错
Sep 03 Javascript
Jquery中Ajax 缓存带来的影响的解决方法
May 19 Javascript
js 通用javascript函数库整理
Aug 14 Javascript
jquery实现多级下拉菜单的实例代码
Oct 02 Javascript
js定时调用方法成功后并停止调用示例
Apr 08 Javascript
日常收集整理的JavaScript常用函数方法
Dec 10 Javascript
JavaScript闭包和范围实例详解
Dec 19 Javascript
Vue2.0表单校验组件vee-validate的使用详解
May 02 Javascript
jQuery实现颜色打字机的完整代码
Mar 19 jQuery
Javascript摸拟自由落体与上抛运动原理与实现方法详解
Apr 08 Javascript
VueX模块的具体使用(小白教程)
Jun 05 Javascript
如何使用vue3打造一个物料库
May 08 Vue.js
layui.use模块外部使用其内部定义的js封装函数方法
Sep 16 #Javascript
浅谈JS中几种轻松处理'this'指向方式
Sep 16 #Javascript
使用xampp将angular项目运行在web服务器的教程
Sep 16 #Javascript
在layui.use 中自定义 function 的正确方法
Sep 16 #Javascript
使用VUE实现在table中文字信息超过5个隐藏鼠标移到时弹窗显示全部
Sep 16 #Javascript
js实现无限瀑布流实例方法
Sep 16 #Javascript
策略模式实现 Vue 动态表单验证的方法
Sep 16 #Javascript
You might like
一个用于mysql的数据库抽象层函数库
2006/10/09 PHP
php抓即时股票信息
2006/10/09 PHP
discuz authcode 经典php加密解密函数解析
2020/07/12 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(八)
2014/06/23 PHP
JS中字符问题(二进制/十进制/十六进制及ASCII码之间的转换)
2008/11/03 Javascript
解决javascript:window.close()在chrome,Firefox下失效的问题
2013/05/07 Javascript
让页面上两个div中的滚动条(滑块)同步运动示例
2013/08/07 Javascript
用js将内容复制到剪贴板兼容浏览器
2014/03/18 Javascript
JavaScript实现定时隐藏与显示图片的方法
2015/08/06 Javascript
js 截取或者替换字符串中的数字实现方法
2016/06/13 Javascript
jQuery简单实现点击文本框复制内容到剪贴板上的方法
2016/08/01 Javascript
nodeJs内存泄漏问题详解
2016/09/05 NodeJs
简单理解Vue条件渲染
2016/12/03 Javascript
简单实现js倒计时功能
2017/02/13 Javascript
想用好React的你必须要知道的一些事情
2017/07/24 Javascript
浅谈vue中.vue文件解析流程
2018/04/24 Javascript
JS实现返回上一页并刷新页面的方法分析
2019/07/16 Javascript
JS实现导航栏楼层特效
2020/01/01 Javascript
vue实现表格合并功能
2020/12/01 Vue.js
python 实现插入排序算法
2012/06/05 Python
ubuntu环境下python虚拟环境的安装过程
2018/01/07 Python
Python编程二分法实现冒泡算法+快速排序代码示例
2018/01/15 Python
pytorch torchvision.ImageFolder的用法介绍
2020/02/20 Python
Python自动重新加载模块详解(autoreload module)
2020/04/01 Python
详解Python中的编码问题(encoding与decode、str与bytes)
2020/09/30 Python
详解python百行有效代码实现汉诺塔小游戏(简约版)
2020/10/30 Python
如何在Canvas上的图形/图像绑定事件监听的实现
2020/09/16 HTML / CSS
京东国际站:JOYBUY
2017/11/23 全球购物
Whistles官网:英国女装品牌
2020/08/14 全球购物
俄罗斯第一家多品牌在线奢侈品精品店:Aizel.ru
2020/09/06 全球购物
责任担保书范文
2014/05/21 职场文书
设备售后服务承诺书
2014/05/30 职场文书
三峡人家导游词
2015/01/31 职场文书
2015年高三教学工作总结
2015/07/21 职场文书
优秀新员工事迹材料
2019/05/13 职场文书
关于antd tree 和父子组件之间的传值问题(react 总结)
2021/06/02 Javascript