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 幻灯插件和教程
Mar 27 Javascript
跟我一起学写jQuery插件开发方法(附完整实例及下载)
Apr 01 Javascript
jQuery中:submit选择器用法实例
Jan 03 Javascript
JS实现在线统计一个页面内鼠标点击次数的方法
Feb 28 Javascript
JavaScript高级教程5.6之基本包装类型(详细)
Nov 23 Javascript
JS修改地址栏参数实例代码
Jun 14 Javascript
jQuery组件easyui对话框实现代码
Aug 25 Javascript
jQuery实现简单的网页换肤效果示例
Sep 18 Javascript
ES6知识点整理之函数数组参数的默认值及其解构应用示例
Apr 17 Javascript
小程序实现搜索框
Jun 19 Javascript
js canvas实现星空连线背景特效
Nov 01 Javascript
vue 微信分享回调iOS和安卓回调出现错误的解决
Sep 07 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/09/05 PHP
简单介绍下 PHP5 中引入的 MYSQLI的用途
2007/03/19 PHP
php 图片上传类代码
2009/07/17 PHP
浅析PHP页面局部刷新功能的实现小结
2013/06/21 PHP
PHP数字前补0的自带函数sprintf 和number_format的用法(详解)
2017/02/06 PHP
jquery easyui的tabs使用时的问题
2010/03/23 Javascript
js数据验证集合、js email验证、js url验证、js长度验证、js数字验证等简单封装
2010/05/15 Javascript
jquery与prototype框架的详细对比
2013/11/21 Javascript
JavaScript使用DeviceOne开发实战(三)仿微信应用
2015/12/02 Javascript
微信小程序开发之Tabbar实例详解
2017/01/09 Javascript
input file样式修改以及图片预览删除功能详细概括(推荐)
2017/08/17 Javascript
vue2实现可复用的轮播图carousel组件详解
2017/11/27 Javascript
JS使用正则表达式获取小括号、中括号及花括号内容的方法示例
2018/06/01 Javascript
微信小程序实现无限滚动列表
2020/05/29 Javascript
mpvue全局引入sass文件的方法步骤
2019/03/06 Javascript
微信小程序云开发实现增删改查功能
2019/05/17 Javascript
vue 项目中当访问路由不存在的时候默认访问404页面操作
2020/08/31 Javascript
[01:05:41]EG vs Optic Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
Centos5.x下升级python到python2.7版本教程
2015/02/14 Python
Python实现的弹球小游戏示例
2017/08/01 Python
python递归打印某个目录的内容(实例讲解)
2017/08/30 Python
linecache模块加载和缓存文件内容详解
2018/01/11 Python
python+matplotlib实现礼盒柱状图实例代码
2018/01/16 Python
简单实现Python爬取网络图片
2018/04/01 Python
分享Pycharm中一些不为人知的技巧
2018/04/03 Python
Python爬虫包BeautifulSoup简介与安装(一)
2018/06/17 Python
Python实现的文轩网爬虫完整示例
2019/05/16 Python
对python3 Serial 串口助手的接收读取数据方法详解
2019/06/12 Python
python针对mysql数据库的连接、查询、更新、删除操作示例
2019/09/11 Python
Django实现前台上传并显示图片功能
2020/05/29 Python
Python如何执行精确的浮点数运算
2020/07/31 Python
优秀驾驶员先进事迹材料
2014/05/04 职场文书
2015年师德师风自我评价范文
2015/03/05 职场文书
2015年社区妇联工作总结
2015/04/21 职场文书
客户付款通知书
2015/04/23 职场文书
幼儿园心得体会范文
2016/01/21 职场文书