对layui数据表格动态cols(字段)动态变化详解


Posted in Javascript onOctober 25, 2019

如搜索查询时,常会遇到按日期时间段查询,并显示查询的每个日期的数据,后台拼装数据此处不讨论。

把表格渲染封装在函数里面,cols_arr是传入的字段数组

function tableRender(cols_arr){
  table.render({
    elem: '#demo'
    , url: 请求地址 //数据接口
    , method: 'post'
    , page: true //开启分页
    , cols: cols_arr
    , id: 'demo'
    , limit: 10
    , limits: [10, 20, 50, 100, 200, 500]
    , done: function (res) {}
  });
}

监听搜索提交

// 搜索
form.on('submit(demo1)', function (obj) {
  var start_date = obj.field.start_date;
  var end_date = obj.field.end_date;
  if (start_date != '' && end_date != ''){
    var all_date = getAll(start_date, end_date);
    if ( all_date.length>7){
      layer.msg('查询天数不得超过7天', {icon: 2, anim: 6});
      return false;
    }
    window.cols_arr[0] = [];
    window.cols_arr[0][0] = {field:'group_id', title: '群号', align: 'center'};
    all_date.forEach(function(value,i){
      window.cols_arr[0][i+1]=({field: value, title: value, align: 'center'})
    })
  }
  tableRender(window.cols_arr);
  table.reload('demo', {
    page: {
      curr: 1
    },
    where: {
      all_date: all_date
    }
  });
  return false;
});

如果只是重载,cols属性不会改变,解决思路:重载前执行一次封装了渲染的函数,也就是tableRender();用全局变量或传参的形式都行

以上这篇对layui数据表格动态cols(字段)动态变化详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
利用JQuery和JS实现奇偶行背景颜色自定义效果
Nov 19 Javascript
js日期对象兼容性的处理方法
Jan 28 Javascript
javascript特殊文本输入框网页特效
Sep 13 Javascript
需要牢记的JavaScript基础知识
Sep 25 Javascript
bootstrap实现每隔5秒自动轮播效果
Dec 20 Javascript
JavaScript Date 知识浅析
Jan 29 Javascript
关于Node.js中Buffer的一些你可能不知道的用法
Mar 28 Javascript
Vue侧滑菜单组件——DrawerLayout
Dec 18 Javascript
vue实现图片滚动的示例代码(类似走马灯效果)
Mar 03 Javascript
如何利用vue+vue-router+elementUI实现简易通讯录
May 13 Javascript
微信小程序实现日期格式化和倒计时
Nov 01 Javascript
微信小程序定义和调用全局变量globalData的实现
Nov 01 Javascript
layui实现数据表格隐藏列的示例
Oct 25 #Javascript
关于在LayUI中使用AJAX提交巨坑记录
Oct 25 #Javascript
浅谈layui 绑定form submit提交表单的注意事项
Oct 25 #Javascript
详解如何在Vue项目中发送jsonp请求
Oct 25 #Javascript
layui实现form表单同时提交数据和文件的代码
Oct 25 #Javascript
vue实现弹幕功能
Oct 25 #Javascript
vue指令v-html使用过滤器filters功能实例
Oct 25 #Javascript
You might like
php数组函数序列之prev() - 移动数组内部指针到上一个元素的位置,并返回该元素值
2011/10/31 PHP
php判断两个日期之间相差多少个月份的方法
2015/06/18 PHP
PHP MVC框架skymvc支持多文件上传
2016/05/26 PHP
ext实现完整的登录代码
2008/08/08 Javascript
JQUERY1.6 使用方法四 检测浏览器
2011/11/23 Javascript
javascript题目,重写函数让其无限相加
2012/02/15 Javascript
jQuery实现的多级下拉菜单效果代码
2015/08/24 Javascript
使用JS实现图片展示瀑布流效果的实例代码
2016/09/12 Javascript
Angular2 环境配置详细介绍
2016/09/21 Javascript
js仿小米官网图片轮播特效
2016/09/29 Javascript
微信小程序 高德地图SDK详解及简单实例(源码下载)
2017/01/11 Javascript
Angular2库初探
2017/03/01 Javascript
js获取ip和地区
2017/03/10 Javascript
详解如何用模块化的方式写vuejs
2017/12/16 Javascript
vue计算属性时v-for处理数组时遇到的一个bug问题
2018/01/21 Javascript
jQuery使用动画队列自定义动画操作示例
2018/06/16 jQuery
Node.js Buffer模块功能及常用方法实例分析
2019/01/05 Javascript
详解vue-cli中使用rem,vue自适应
2019/05/06 Javascript
微信小程序利用button控制条件标签的变量问题
2020/03/15 Javascript
Auto.JS实现抖音刷宝等刷视频app,自动点赞,自动滑屏,自动切换视频功能
2020/05/08 Javascript
Vue.js原理分析之nextTick实现详解
2020/09/07 Javascript
vue缓存之keep-alive的理解和应用详解
2020/11/02 Javascript
Mac OS X10.9安装的Python2.7升级Python3.3步骤详解
2013/12/04 Python
利用Python如何实现一个小说网站雏形
2018/11/23 Python
详解python算法之冒泡排序
2019/03/05 Python
详解pyppeteer(python版puppeteer)基本使用
2019/06/12 Python
python脚本当作Linux中的服务启动实现方法
2019/06/28 Python
Python字符串对象实现原理详解
2019/07/01 Python
Python实现手机号自动判断男女性别(实例解析)
2019/12/22 Python
Python Tornado核心及相关原理详解
2020/06/24 Python
keras的backend 设置 tensorflow,theano操作
2020/06/30 Python
HTML5实现WebSocket协议原理浅析
2014/07/07 HTML / CSS
Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码
2020/03/17 HTML / CSS
Otticanet澳大利亚:最顶尖的世界名牌眼镜, 能得到打折季的价格
2018/08/23 全球购物
俄罗斯皮肤健康中心:Pharmacosmetica.ru
2020/02/22 全球购物
解决golang 关于全局变量的坑
2021/05/06 Golang