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 相关文章推荐
javascript-TreeView父子联动效果保持节点状态一致
Aug 12 Javascript
JavaScript Object的extend是一个常用的功能
Dec 02 Javascript
javascript实现添加附件功能的方法
Nov 18 Javascript
JQuery.validate在ie8下不支持的快速解决方法
May 18 Javascript
JS常见疑难点分析之match,charAt,charCodeAt,map,search用法分析
Dec 25 Javascript
BootStrap表单验证实例代码
Jan 13 Javascript
浅谈Node异步编程的机制
Oct 18 Javascript
vue计算属性时v-for处理数组时遇到的一个bug问题
Jan 21 Javascript
详解Chart.js轻量级图表库的使用经验
May 22 Javascript
inquirer.js一个用户与命令行交互的工具详解
May 18 Javascript
Vue的生命周期操作示例
Sep 17 Javascript
vue 中的 render 函数作用详解
Feb 28 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 各种排序算法实现代码
2009/08/20 PHP
php函数与传递参数实例分析
2014/11/15 PHP
PHP转换文本框内容为HTML格式的方法
2016/07/20 PHP
php设计模式之装饰模式应用案例详解
2019/06/17 PHP
JavaScript解析URL参数示例代码
2013/08/12 Javascript
jQuery轻松实现表格的隔行变色和点击行变色的实例代码
2016/05/09 Javascript
教你用Cordova打包Vue项目的方法
2017/10/17 Javascript
剖析Angular Component的源码示例
2018/03/23 Javascript
代码分析vue中如何配置less
2018/09/28 Javascript
vue router 通过路由来实现切换头部标题功能
2019/04/24 Javascript
在微信小程序中使用图表的方法示例
2019/04/25 Javascript
微信小程序实现的绘制table表格功能示例
2019/04/26 Javascript
vue+swiper实现左右滑动的测试题功能
2020/10/30 Javascript
[02:01]大师之路——DOTA2完美大师赛11月论剑上海
2017/11/06 DOTA
Phantomjs抓取渲染JS后的网页(Python代码)
2016/05/13 Python
python中pandas.DataFrame对行与列求和及添加新行与列示例
2017/03/12 Python
Python入门_学会创建并调用函数的方法
2017/05/16 Python
python3实现基于用户的协同过滤
2018/05/31 Python
python 多进程并行编程 ProcessPoolExecutor的实现
2019/10/11 Python
python实现大学人员管理系统
2019/10/25 Python
python实现时间序列自相关图(acf)、偏自相关图(pacf)教程
2020/06/03 Python
读取nii或nii.gz文件中的信息即输出图像操作
2020/07/01 Python
python 爬取B站原视频的实例代码
2020/09/09 Python
PyCharm2020最新激活码+激活码补丁(亲测最新版PyCharm2020.2激活成功)
2020/11/25 Python
Python可以用来做什么
2020/11/23 Python
详解matplotlib绘图样式(style)初探
2021/02/03 Python
python基于selenium爬取斗鱼弹幕
2021/02/20 Python
美国女士内衣在线折扣商店:One Hanes Place
2019/03/24 全球购物
《雷鸣电闪波尔卡》教学反思
2014/02/23 职场文书
婚前协议书范本
2014/04/15 职场文书
2014年控辍保学工作总结
2014/12/08 职场文书
人事局接收函
2015/01/30 职场文书
慈善献爱心倡议书
2015/04/27 职场文书
学历证明样本
2015/06/16 职场文书
优秀家长事迹材料(2016推荐版)
2016/02/29 职场文书
为什么代码规范要求SQL语句不要过多的join
2021/06/23 MySQL