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与函数式编程解释
Apr 27 Javascript
JavaScript脚本性能优化注意事项
Nov 18 Javascript
jQuery 扩展对input的一些操作方法
Oct 30 Javascript
jquery中实现简单的tabs插件功能的代码
Mar 02 Javascript
很棒的学习jQuery的12个网站推荐
Apr 28 Javascript
常用的jQuery前端技巧收集
Dec 24 Javascript
Angularjs中如何使用filterFilter函数过滤
Feb 06 Javascript
JavaScript编写带旋转+线条干扰的验证码脚本实例
May 30 Javascript
vue实现全选和反选功能
Aug 31 Javascript
vue 中滚动条始终定位在底部的方法
Sep 03 Javascript
解决element-ui的下拉框有值却无法选中的情况
Nov 07 Javascript
vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解
Dec 15 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
用缓存实现静态页面的测试
2006/12/06 PHP
Javascript 事件流和事件绑定
2009/07/16 Javascript
javascript之bind使用介绍
2011/10/09 Javascript
Jquery为单选框checkbox绑定单击click事件
2012/12/18 Javascript
iframe异步加载实现点击左边菜单加载右边内容实例讲解
2013/03/04 Javascript
Textbox控件注册回车事件及触发按钮提交事件具体实现
2013/03/04 Javascript
jquery中交替点击事件toggle方法的使用示例
2013/12/08 Javascript
jQuery+css实现的换页标签栏效果
2016/01/27 Javascript
PhotoSwipe异步动态加载图片方法
2016/08/25 Javascript
Servlet实现文件上传,可多文件上传示例
2016/12/05 Javascript
BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案
2016/12/14 Javascript
Angular中使用$watch监听object属性值的变化(详解)
2017/04/24 Javascript
JavaScript中关于class的调用方法
2017/11/28 Javascript
优雅的将ElementUI表格变身成树形表格的方法步骤
2019/04/11 Javascript
vue项目中在外部js文件中直接调用vue实例的方法比如说this
2019/04/28 Javascript
解决layui数据表格排序图标被超出的表头挤出去的问题
2019/09/19 Javascript
JS实现transform实现扇子效果
2020/01/17 Javascript
Python的组合模式与责任链模式编程示例
2016/02/02 Python
Python的Django中将文件上传至七牛云存储的代码分享
2016/06/03 Python
matplotlib简介,安装和简单实例代码
2017/12/26 Python
Python统计纯文本文件中英文单词出现个数的方法总结【测试可用】
2018/07/25 Python
Django Sitemap 站点地图的实现方法
2019/04/29 Python
通过cmd进入python的实例操作
2019/06/26 Python
Pytorch的mean和std调查实例
2020/01/02 Python
python用tkinter实现一个gui的翻译工具
2020/10/26 Python
pytorch简介
2020/11/11 Python
css3 线性渐变和径向渐变示例附图
2014/04/08 HTML / CSS
使用CSS3制作饼状旋转载入效果的实例
2015/06/23 HTML / CSS
英国异国风情旅游网站:Travel Talk Tours(团体旅游、探险旅游、帆船假期)
2018/07/26 全球购物
在使用非全零作为空指针内部表达的机器上, NULL是如何定义
2014/11/09 面试题
数学教育专业求职信
2014/07/22 职场文书
纪念九一八事变83周年国旗下讲话稿
2014/09/15 职场文书
酒店财务部岗位职责
2015/04/14 职场文书
详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)
2021/07/01 HTML / CSS
详解OpenCV获取高动态范围(HDR)成像
2022/04/29 Python
Python测试框架pytest高阶用法全面详解
2022/06/01 Python