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.pagination.js 无刷新分页实现步骤分享
May 23 Javascript
javascript窗口宽高,鼠标位置,滚动高度(详细解析)
Nov 18 Javascript
简单了解Backbone.js的Model模型以及View视图的源码
Feb 14 Javascript
webpack+vue.js快速入门教程
Oct 12 Javascript
利用js定义一个导航条菜单
Mar 14 Javascript
基于JavaScript实现瀑布流效果
Mar 29 Javascript
ES6新特性三: Generator(生成器)函数详解
Apr 21 Javascript
node+vue实现用户注册和头像上传的实例代码
Jul 20 Javascript
js+canvas实现滑动拼图验证码功能
Mar 26 Javascript
Vue编写可显示周和月模式的日历 Vue自定义日历内容的显示
Jun 26 Javascript
Vue $attrs &amp; inheritAttr实现button禁用效果案例
Dec 07 Vue.js
AJAX实现省市县三级联动效果
Oct 16 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中SQL注入攻击与XSS攻击
2012/06/10 PHP
yii上传文件或图片实例
2014/04/01 PHP
destoon文章模块调用企业会员资料的方法
2014/08/22 PHP
9段PHP实用功能的代码推荐
2014/10/14 PHP
Laravel重定向,a链接跳转,控制器跳转示例
2019/10/22 PHP
php实现根据身份证获取精准年龄
2020/02/26 PHP
使用自定义setTimeout和setInterval使之可以传递参数和对象参数
2009/04/24 Javascript
var与Javascript变量隐式声明
2009/09/17 Javascript
让iframe子窗体取父窗体地址栏参数(querystring)
2009/10/13 Javascript
测试你的JS的掌握程度的代码
2009/12/09 Javascript
javascript返回顶部效果(自写代码)
2013/01/06 Javascript
基于jQuery实现模拟页面加载进度条
2013/04/01 Javascript
jQuery弹性滑动导航菜单实现思路及代码
2013/05/02 Javascript
js实现文本框输入文字个数限制代码
2015/12/25 Javascript
jQuery实现简单滚动动画效果
2016/04/07 Javascript
原生JS实现图片轮播与淡入效果的简单实例
2016/08/21 Javascript
如何使用Bootstrap创建表单
2017/03/29 Javascript
javascript实现前端成语点击验证优化
2020/06/24 Javascript
分析在Python中何种情况下需要使用断言
2015/04/01 Python
Python实现Windows上气泡提醒效果的方法
2015/06/03 Python
python机器学习库常用汇总
2017/11/15 Python
python3.6下Numpy库下载与安装图文教程
2019/04/02 Python
解决python多行注释引发缩进错误的问题
2019/08/23 Python
python中wheel的用法整理
2020/06/15 Python
python如何随机生成高强度密码
2020/08/19 Python
幼儿园优秀班主任事迹材料
2014/05/14 职场文书
施工工地安全标语
2014/06/07 职场文书
幼儿园安全生产月活动总结
2014/07/05 职场文书
庆祝国庆节演讲稿2014
2014/09/19 职场文书
老公保证书怎么写
2015/02/26 职场文书
2015年教师国培感言
2015/08/01 职场文书
中国式结婚:司仪主持词(范文)
2019/07/25 职场文书
nginx实现发布静态资源的方法
2021/03/31 Servers
新手入门Mysql--概念
2021/06/18 MySQL
mybatis中注解与xml配置的对应关系和对比分析
2021/08/04 Java/Android
前端监听websocket消息并实时弹出(实例代码)
2021/11/27 Javascript