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-ui中自动完成实现方法
Jun 10 Javascript
巧用js提交表单轻松解决一个页面有多个提交按钮
Nov 17 Javascript
jquery用data方法获取某个元素上的事件
Jun 23 Javascript
JavaScript中九种常用排序算法
Sep 02 Javascript
浅谈Sizzle的“编译原理”
Apr 14 Javascript
浅析Node.js中使用依赖注入的相关问题及解决方法
Jun 24 Javascript
jQuery版本升级踩坑大全
Jan 12 Javascript
从零开始学习Node.js系列教程四:多页面实现的数学运算示例
Apr 13 Javascript
php register_shutdown_function函数详解
Jul 23 Javascript
jQuery简单实现根据日期计算星期几的方法
Jan 09 jQuery
JavaScript使用百度ECharts插件绘制饼图操作示例
Nov 26 Javascript
JavaScript中CreateTextFile函数
Aug 30 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
用Flash图形化数据(二)
2006/10/09 PHP
利用PHP如何写APP接口详解
2016/08/23 PHP
php表单处理操作
2017/11/16 PHP
Yii框架核心组件类实例详解
2019/08/06 PHP
PHP读取XML文件的方法实例总结【DOMDocument及simplexml方法】
2019/09/10 PHP
浅谈laravel aliases别名的原理
2019/10/24 PHP
jQuery之自动完成组件的深入解析
2013/06/19 Javascript
javascript实现div浮动在网页最顶上并带关闭按钮效果实例
2013/08/13 Javascript
jQuery替换字符串(实例代码)
2013/11/13 Javascript
JavaScript的arguments对象应用示例
2014/09/15 Javascript
jquery提示效果实例分析
2014/11/25 Javascript
整理AngularJS中的一些常用指令
2015/06/16 Javascript
jQuery 实现评论等级好评差评特效
2016/05/06 Javascript
JS表格组件神器bootstrap table详解(强化版)
2016/05/26 Javascript
js原生之焦点图转换加定时器实例
2016/12/12 Javascript
jQuery仿写百度百科的目录树
2017/01/03 Javascript
详解Javascript百度地图接口开发文档中的类和方法
2017/02/07 Javascript
jQuery倒计时代码(超简单)
2017/02/27 Javascript
vue.extend与vue.component的区别和联系
2018/09/19 Javascript
Moment.js实现多个同时倒计时
2019/08/26 Javascript
微信小程序sessionid不一致问题解决
2019/08/30 Javascript
原生javascript的ajax请求及后台PHP响应操作示例
2020/02/24 Javascript
Angular8 简单表单验证的实现示例
2020/06/03 Javascript
JS 5种遍历对象的方式
2020/06/16 Javascript
使用python实现rsa算法代码
2016/02/17 Python
Python实现的多叉树寻找最短路径算法示例
2018/07/30 Python
如何更优雅地写python代码
2019/07/02 Python
简单了解python中的f.b.u.r函数
2019/11/02 Python
Python调用scp向服务器上传文件示例
2019/12/22 Python
python redis存入字典序列化存储教程
2020/07/16 Python
只要五步 就可以用HTML5/CSS3快速制作便签贴特效(图)
2012/06/04 HTML / CSS
北美Newegg打造的全球尖货海购平台:tt海购
2018/09/28 全球购物
中学运动会广播稿
2014/01/19 职场文书
关于元旦的广播稿
2014/02/16 职场文书
一份文言文检讨书
2014/09/13 职场文书
孔庙导游词
2015/02/04 职场文书