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 相关文章推荐
jquery 双色表格实现代码
Dec 08 Javascript
关于IE浏览器以及Firefox下的javascript冒泡事件的响应层级
Oct 14 Javascript
浅析js封装和作用域
Jul 09 Javascript
jquery实现导航固定顶部的效果仿蘑菇街
Oct 22 Javascript
jQuery插件slick实现响应式移动端幻灯片图片切换特效
Apr 12 Javascript
js预加载图片方法汇总
Jun 15 Javascript
js中不同的height, top的区别对比
Sep 24 Javascript
重新理解JavaScript的六种继承方式
Mar 24 Javascript
React学习笔记之高阶组件应用
Jun 02 Javascript
Bootstrap Table 双击、单击行获取该行及全表内容
Aug 31 Javascript
JS中async/await实现异步调用的方法
Aug 28 Javascript
layui默认选中table的CheckBox复选框方法
Sep 19 Javascript
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
PHP新手上路(四)
2006/10/09 PHP
php email邮箱正则
2008/10/08 PHP
PHP冒泡排序算法代码详细解读
2011/07/17 PHP
一个典型的PHP分页实例代码分享
2011/07/28 PHP
PHP实现单条sql执行多个数据的insert语句方法
2019/10/11 PHP
Javascript中的常见排序算法
2007/03/27 Javascript
Mootools 1.2教程(2) DOM选择器
2009/09/14 Javascript
Extjs优化(一)删除冗余代码提高运行速度
2013/04/15 Javascript
JS控制表格实现一条光线流动分割行的方法
2015/03/09 Javascript
Javascript验证Visa和MasterCard信用卡号的方法
2015/07/27 Javascript
js实现图片无缝滚动特效
2020/03/19 Javascript
基于HTML5上使用iScroll实现下拉刷新,上拉加载更多
2016/05/21 Javascript
Bootstrap表单布局
2016/07/19 Javascript
jQuery实现两个select控件的互移操作
2016/12/22 Javascript
JS实现的表头列头固定页面功能示例
2017/01/10 Javascript
深入理解AngularJs-scope的脏检查(一)
2017/06/19 Javascript
通过vue提供的keep-alive减少对服务器的请求次数
2018/04/01 Javascript
Element-UI踩坑之Pagination组件的使用
2018/10/29 Javascript
使用ThinkJs搭建微信中控服务的实现方法
2019/08/08 Javascript
python3使用PyMysql连接mysql数据库实例
2017/02/07 Python
Python内置函数—vars的具体使用方法
2017/12/04 Python
Python基于最小二乘法实现曲线拟合示例
2018/06/14 Python
python web框架 django wsgi原理解析
2019/08/20 Python
python+mysql实现个人论文管理系统
2019/10/25 Python
解决pyecharts运行后产生的html文件用浏览器打开空白
2020/03/11 Python
Python Tkinter实例——模拟掷骰子
2020/10/24 Python
意大利独特而优质的家居用品:Fazzini
2018/12/05 全球购物
New delete 与malloc free 的联系与区别
2013/02/04 面试题
小学班主任寄语大全
2014/04/04 职场文书
道路运输企业安全生产责任书
2014/07/28 职场文书
2015年中学校长工作总结
2015/05/19 职场文书
2019年入党思想汇报
2019/03/25 职场文书
创业者如何撰写出一份打动投资人的商业计划书?
2019/07/02 职场文书
Python中文纠错的简单实现
2021/07/07 Python
如何利用Python实现一个论文降重工具
2021/07/09 Python
VUE解决跨域问题Access to XMLHttpRequest at
2022/05/06 Vue.js