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 相关文章推荐
比较全的JS checkbox全选、取消全选、删除功能代码
Dec 19 Javascript
jQuery 1.3 和 Validation 验证插件1.5.1
Jul 09 Javascript
jQuery防止click双击多次提交及传递动态函数或多参数
Apr 02 Javascript
js给selected添加options的方法
May 06 Javascript
javascript中innerText和innerHTML属性用法实例分析
May 13 Javascript
JavaScript解八皇后问题的方法总结
Jun 12 Javascript
Bootstrap进度条实现代码解析
Mar 07 Javascript
使用cookie绕过验证码登录的实现代码
Oct 12 Javascript
vue基于element-ui的三级CheckBox复选框功能的实现代码
Oct 15 Javascript
VueCli3.0中集成MockApi的方法示例
Jul 05 Javascript
vue项目中引入Sass实例方法
Aug 27 Javascript
JavaScript实现字符串与HTML格式相互转换
Mar 17 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中flush()、ob_flush()、ob_end_flush()的区别介绍
2013/02/17 PHP
php内存缓存实现方法
2015/01/24 PHP
PHP+redis实现添加处理投票的方法
2015/11/14 PHP
Netbeans 8.2将支持PHP7 更精彩
2016/06/13 PHP
实例化php类时传参的方法分析
2020/06/05 PHP
JavaScript创建命名空间(namespace)的最简实现
2007/12/11 Javascript
在线编辑器中换行与内容自动提取
2009/04/24 Javascript
基于jquery的设置页面文本框 只能输入数字的实现代码
2011/04/19 Javascript
js实现右下角可关闭最小化div(可用于展示推荐内容)
2013/06/24 Javascript
juery框架写的弹窗效果适合新手
2013/11/27 Javascript
javascript实现捕捉键盘上按下的键
2015/05/05 Javascript
javascript 判断两个日期之差的示例代码
2015/09/05 Javascript
JavaScript时间操作之年月日星期级联操作
2016/01/15 Javascript
Google 地图API Map()构造器详解
2016/08/06 Javascript
动态加载css方法实现和深入解析
2017/01/18 Javascript
vue2中filter()的实现代码
2017/07/09 Javascript
详解ES6语法之可迭代协议和迭代器协议
2018/01/13 Javascript
javascript实现手动点赞效果
2019/04/09 Javascript
Vue实现Layui的集成方法步骤
2020/04/10 Javascript
python执行子进程实现进程间通信的方法
2015/06/02 Python
Python 操作MySQL详解及实例
2017/04/30 Python
python中利用队列asyncio.Queue进行通讯详解
2017/09/10 Python
详解利用Python scipy.signal.filtfilt() 实现信号滤波
2019/06/05 Python
wxpython实现按钮切换界面的方法
2019/11/19 Python
Python实现图片批量加入水印代码实例
2019/11/30 Python
python判断链表是否有环的实例代码
2020/01/31 Python
TensorFlow通过文件名/文件夹名获取标签,并加入队列的实现
2020/02/17 Python
python 实现倒计时功能(gui界面)
2020/11/11 Python
python3代码中实现加法重载的实例
2020/12/03 Python
美国在线印刷公司:PsPrint
2017/10/12 全球购物
结婚典礼证婚词
2014/01/11 职场文书
薪酬专员岗位职责
2014/02/18 职场文书
企业法人代表授权委托书
2014/10/02 职场文书
给老婆的检讨书
2015/01/27 职场文书
2015年推广普通话演讲稿
2015/03/20 职场文书
导游词之徐州云龙湖
2019/11/19 职场文书