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 相关文章推荐
extjs表格文本启用选择复制功能具体实现
Oct 11 Javascript
js 高效去除数组重复元素示例代码
Dec 19 Javascript
js设置控件的隐藏与显示的两种方法
Aug 21 Javascript
JS基于面向对象实现的选项卡效果示例
Dec 20 Javascript
详解vue中computed 和 watch的异同
Jun 30 Javascript
浅谈React中组件间抽象
Jan 27 Javascript
浅谈Vue.js路由管理器 Vue Router
Aug 16 Javascript
javaScript实现游戏倒计时功能
Nov 17 Javascript
微信小程序实现两个页面传值的方法分析
Dec 11 Javascript
详解用vue2.x版本+adminLTE开源框架搭建后台应用模版
Mar 15 Javascript
Vue组件化开发之通用型弹出框的实现
Feb 28 Javascript
原生JavaScript实现留言板
Jan 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
PHP中for循环语句的几种变型
2007/03/16 PHP
php实现查看邮件是否已被阅读的方法
2013/12/03 PHP
PHP curl 获取响应的状态码的方法
2014/01/13 PHP
分享一个php 的异常处理程序
2014/06/22 PHP
js树形控件脚本代码
2008/07/24 Javascript
微博@符号的用户名提示效果。(想@到谁?)
2010/11/05 Javascript
使用GruntJS构建Web程序之Tasks(任务)篇
2014/06/06 Javascript
javascript实现超炫的向上滑行菜单实例
2015/08/03 Javascript
jQuery插件之jQuery.Form.js用法实例分析(附demo示例源码)
2016/01/04 Javascript
在JavaScript中模拟类(class)及类的继承关系
2016/05/20 Javascript
js removeChild 方法深入理解
2016/08/16 Javascript
node.js express安装及示例网站搭建方法(分享)
2016/08/22 Javascript
jQuery.cookie.js实现记录最近浏览过的商品功能示例
2017/01/23 Javascript
javascript验证香港身份证的格式或真实性
2017/02/07 Javascript
详解react如何在组件中获取路由参数
2017/06/15 Javascript
Node.js  REPL (交互式解释器)实例详解
2017/08/06 Javascript
浅谈vue引用静态资源需要注意的事项
2018/09/28 Javascript
jQuery实现的简单歌词滚动功能示例
2019/01/07 jQuery
vue中轮训器的使用
2019/01/27 Javascript
vue路由切换时取消之前的所有请求操作
2020/09/01 Javascript
Element el-button 按钮组件的使用详解
2021/02/01 Javascript
[02:29]大剑、皮鞭、女装,这届DOTA2勇士令状里都有
2020/07/17 DOTA
python登录豆瓣并发帖的方法
2015/07/08 Python
python机器学习之随机森林(七)
2018/03/26 Python
python 通过麦克风录音 生成wav文件的方法
2019/01/09 Python
详解python中list的使用
2019/03/15 Python
python 基于dlib库的人脸检测的实现
2019/11/08 Python
python的等深分箱实例
2019/11/22 Python
工程造价自荐信
2013/10/09 职场文书
大学生开西餐厅创业计划书
2014/02/01 职场文书
毕业论文致谢词
2015/05/14 职场文书
安全生产奖惩制度
2015/08/06 职场文书
导游词之珠海轮廓
2019/10/25 职场文书
解决Python字典查找报Keyerror的问题
2021/05/26 Python
Java多条件判断场景中规则执行器的设计
2021/06/26 Java/Android
“鬼灭之刃”热度不减,其成功背后的原因是什么?
2022/03/22 日漫