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 版本]
Mar 20 Javascript
JSON 学习之完全手册 图文
May 29 Javascript
jQuery EasyUI 开源插件套装 完全替代ExtJS
Mar 24 Javascript
javascript五图轮播切换实用版
Aug 17 Javascript
JS中的prototype与面向对象的实例讲解
May 22 Javascript
js实现数组冒泡排序、快速排序原理
Mar 08 Javascript
JS、jQuery中select的用法详解
Apr 21 Javascript
浅谈javascript中的加减时间
Jul 12 Javascript
js实现简单的二级联动效果
Mar 09 Javascript
浅谈angular2子组件的事件传递(任意组件事件传递)
Sep 30 Javascript
多页vue应用的单页面打包方法(内含打包模式的应用)
Jun 11 Javascript
jQuery 移除事件的方法
Jun 20 jQuery
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
Ajax实时验证用户名/邮箱等是否已经存在的代码打包
2011/12/01 PHP
php socket通信(tcp/udp)实例分析
2016/02/14 PHP
PHP后端银联支付及退款实例代码
2017/06/23 PHP
jQuery UI-Draggable 参数集合
2010/01/10 Javascript
基于jquery的滚动新闻列表
2010/06/19 Javascript
JavaScript常用全局属性与方法记录积累
2013/07/03 Javascript
javascript实现详细时间提醒信息效果的方法
2015/03/11 Javascript
浅谈下拉菜单中的Option对象
2015/05/10 Javascript
jQuery事件与动画基础详解
2017/02/23 Javascript
vue.js从安装到搭建过程详解
2017/03/17 Javascript
vue2中的keep-alive使用总结及注意事项
2017/12/21 Javascript
在vue中获取token,并将token写进header的方法
2018/09/26 Javascript
解决vue组件props传值对象获取不到的问题
2019/06/06 Javascript
vue自定义switch开关组件,实现样式可自行更改
2019/11/01 Javascript
JavaScript实现滑动门效果
2020/01/18 Javascript
ES2020 已定稿,真实场景案例分析
2020/05/25 Javascript
微信小程序实现watch监听
2020/06/04 Javascript
Python实现约瑟夫环问题的方法
2016/05/03 Python
python利用urllib和urllib2访问http的GET/POST详解
2017/09/27 Python
解决Django migrate No changes detected 不能创建表的问题
2018/05/27 Python
Python 实现两个列表里元素对应相乘的方法
2018/11/14 Python
Python简单基础小程序的实例代码
2019/04/28 Python
python openvc 裁剪、剪切图片 提取图片的行和列
2019/09/19 Python
python 调试冷知识(小结)
2019/11/11 Python
浅析关于Keras的安装(pycharm)和初步理解
2020/10/23 Python
Python操作PostgreSql数据库的方法(基本的增删改查)
2020/12/29 Python
css3给背景图片加颜色遮罩的方法
2019/11/05 HTML / CSS
移动端HTML5实现文件上传功能【附代码】
2016/03/25 HTML / CSS
Debenhams百货英国官方网站:Debenhams UK
2016/07/12 全球购物
共产党员公开承诺书范文
2014/03/28 职场文书
《记金华的双龙洞》教学反思
2014/04/19 职场文书
春季防火方案
2014/05/10 职场文书
计算机网络及管理学专业求职信
2014/06/05 职场文书
跳蚤市场口号
2014/06/13 职场文书
2014年班级工作总结
2014/11/14 职场文书
实习单位证明范例
2014/11/17 职场文书