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获取后台Cookies值的小例子
Mar 04 Javascript
ExtJS如何设置与获取radio控件的选取状态
Jan 22 Javascript
jQuery统计上传文件大小的方法
Jan 24 Javascript
jquery中添加属性和删除属性
Jun 03 Javascript
JS打印组合功能
Aug 04 Javascript
JS新包管理工具yarn和npm的对比与使用入门
Dec 09 Javascript
Angular中使用$watch监听object属性值的变化(详解)
Apr 24 Javascript
vue+mockjs模拟数据实现前后端分离开发的实例代码
Aug 08 Javascript
微信小程序实现折叠与展开文章功能
Jun 12 Javascript
vue移动端弹框组件的实例
Sep 25 Javascript
Vue中util的工具函数实例详解
Jul 08 Javascript
分享Angular http interceptors 拦截器使用(推荐)
Nov 10 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
PHP7常量数组用法分析
2016/09/26 PHP
PHP使用mongoclient简单操作mongodb数据库示例
2019/02/08 PHP
php服务器的系统详解
2019/10/12 PHP
jQuery学习笔记之toArray()
2014/06/09 Javascript
判断在css加载完毕后执行后续代码示例
2014/09/03 Javascript
14款经典网页图片和文字特效的jQuery插件-前端开发必备
2015/08/25 Javascript
javascript 数组的正态分布排序的问题
2016/07/31 Javascript
Vue实现virtual-dom的原理简析
2017/07/10 Javascript
原生js实现密码输入框值的显示隐藏
2017/07/17 Javascript
jQuery取得元素标签名称小结(附代码)
2017/08/16 jQuery
JavaScript事件处理程序详解
2017/09/19 Javascript
vue与TypeScript集成配置最简教程(推荐)
2017/10/17 Javascript
解决Nodejs全局安装模块后找不到命令的问题
2018/05/15 NodeJs
angular6.0使用教程之父组件通过url传递id给子组件的方法
2018/06/30 Javascript
Puppet的一些技巧
2018/09/17 Javascript
详解Vue源码之数据的代理访问
2018/12/11 Javascript
解决Vue+Electron下Vuex的Dispatch没有效果问题
2019/05/20 Javascript
JavaScript Blob对象原理及用法详解
2020/10/14 Javascript
python使用htmllib分析网页内容的方法
2015/05/08 Python
python 通过 socket 发送文件的实例代码
2018/08/14 Python
python读取Excel实例详解
2018/08/17 Python
解决Django加载静态资源失败的问题
2019/07/28 Python
Python3 Click模块的使用方法详解
2020/02/12 Python
Numpy一维线性插值函数的用法
2020/04/22 Python
Python如何读写二进制数组数据
2020/08/01 Python
用python写一个带有gui界面的密码生成器
2020/11/06 Python
termux中matplotlib无法显示中文问题的解决方法
2021/01/11 Python
CSS3中Color的一些特性介绍
2012/05/27 HTML / CSS
奥地利网上现代灯具和灯饰店:Lampenwelt.at
2018/01/29 全球购物
英国蛋糕装饰用品一站式商店:Craft Company
2019/03/18 全球购物
什么是组件架构
2016/05/15 面试题
人力资源专员自我评价怎么写
2013/09/19 职场文书
卫生安全检查制度
2014/02/04 职场文书
爱心捐款倡议书
2014/04/14 职场文书
Django rest framework如何自定义用户表
2021/06/09 Python
Java方法重载和方法重写的区别到底在哪?
2021/06/11 Java/Android