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面试题与Javascript词法作用域说明
Nov 09 Javascript
在JS数组特定索引处指定位置插入元素
Jul 27 Javascript
ECMAScript5中的对象存取器属性:getter和setter介绍
Dec 08 Javascript
javascript表单验证和Window详解
Dec 11 Javascript
理解javascript中的严格模式
Feb 01 Javascript
VueJS如何引入css或者less文件的一些坑
Apr 25 Javascript
Vue组件实例间的直接访问实现代码
Aug 20 Javascript
Vue 2.0入门基础知识之内部指令详解
Oct 15 Javascript
jquery 动态遍历select 赋值的实例
Sep 12 jQuery
Vue事件修饰符native、self示例详解
Jul 09 Javascript
layui点击按钮页面会自动刷新的解决方案
Oct 25 Javascript
详解vite2.0配置学习(typescript版本)
Feb 25 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 current函数获取未知字符键名数组第一个元素的值
2013/06/24 PHP
Codeigniter通过SimpleXML将xml转换成对象的方法
2015/03/19 PHP
深入理解PHP内核(二)之SAPI探究
2015/11/10 PHP
详解php实现页面静态化原理
2017/06/21 PHP
js 目录列举函数
2008/11/06 Javascript
JavaScript 学习历程和心得分享
2010/12/12 Javascript
javascript针对DOM的应用分析(二)
2012/04/15 Javascript
JS判断元素为数字的奇异写法分享
2012/08/01 Javascript
jquery 按键盘上的enter事件
2014/05/11 Javascript
jQuery事件绑定on()、bind()与delegate() 方法详解
2015/06/03 Javascript
如何检测JavaScript的各种类型
2016/07/30 Javascript
微信小程序template模板实例详解
2017/10/27 Javascript
Mint-UI时间组件起始时间问题及时间插件使用
2018/08/20 Javascript
vue2中使用sass并配置全局的sass样式变量的方法
2018/09/04 Javascript
基于Vue实现平滑过渡的拖拽排序功能
2019/06/12 Javascript
VUE兄弟组件传值操作实例分析
2019/10/26 Javascript
Vue SSR 即时编译技术的实现
2020/05/06 Javascript
[02:16]2018年度CS GO最具人气选手-完美盛典
2018/12/16 DOTA
Python获取Linux系统下的本机IP地址代码分享
2014/11/07 Python
Python使用Flask框架获取当前查询参数的方法
2015/03/21 Python
python实现爬虫统计学校BBS男女比例之多线程爬虫(二)
2015/12/31 Python
Python实现好友全头像的拼接实例(推荐)
2017/06/24 Python
Python 操作 ElasticSearch的完整代码
2019/08/04 Python
浅谈python print(xx, flush = True) 全网最清晰的解释
2020/02/21 Python
python与c语言的语法有哪些不一样的
2020/09/13 Python
HTML实现代码雨源码及效果示例
2020/02/25 HTML / CSS
AP澳洲中文网:澳洲正品直邮,包税收件无忧
2019/07/12 全球购物
法国一家多品牌成衣精品中/高档商店:Graduate Store
2019/08/28 全球购物
简历中自我评价怎么写
2014/02/12 职场文书
学习型班组申报材料
2014/05/31 职场文书
驾驶员安全责任书
2014/07/22 职场文书
暑假社会实践证明格式
2014/10/28 职场文书
2015高考寄语集锦
2015/02/27 职场文书
优秀员工自荐书
2015/03/06 职场文书
工作态度不好检讨书
2015/05/06 职场文书
Win11电源已接通但未充电怎么办?Win11电源已接通未充电的解决方法
2022/04/05 数码科技