对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 相关文章推荐
JS input文本框禁用右键和复制粘贴功能的代码
Apr 15 Javascript
Javascript 加载和执行-性能提高篇
Dec 28 Javascript
JQuery中使用on方法绑定hover事件实例
Dec 09 Javascript
详解JavaScript中数组的相关知识
Jul 29 Javascript
jquery仿百度百科底部浮动导航特效
Aug 08 Javascript
js命名空间写法示例
Dec 18 Javascript
JavaScript适配器模式详解
Oct 19 Javascript
Vue.js devtool插件安装后无法使用的解决办法
Nov 27 Javascript
使用vue-cli创建项目的图文教程(新手入门篇)
May 02 Javascript
如何把vuejs打包出来的文件整合到springboot里
Jul 26 Javascript
微信小程序自定义导航栏
Dec 31 Javascript
基于elementUI竖向表格、和并列的案例
Oct 26 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
六酷社区论坛HOME页清新格调免费版 下载
2007/03/07 PHP
备份mysql数据库的php代码(一个表一个文件)
2010/05/28 PHP
CodeIgniter图像处理类的深入解析
2013/06/17 PHP
php邮箱地址正则表达式验证
2015/11/13 PHP
一次因composer错误使用引发的问题与解决
2019/03/06 PHP
php5.6.x到php7.0.x特性小结
2019/08/17 PHP
PHP 实现缩略图
2021/03/09 PHP
利用javascript/jquery对上传文件格式过滤的方法
2009/07/25 Javascript
javascript sudoku 数独智力游戏生成代码
2010/03/27 Javascript
Extjs gridpanel 出现横向滚动条问题的解决方法
2011/07/04 Javascript
JS实现鼠标点击展开或隐藏表格行的方法
2015/03/03 Javascript
Javascript对象Clone实例分析
2015/06/09 Javascript
JQuery插入DOM节点的方法
2015/06/11 Javascript
jQuery实现简单的图片查看器
2020/09/11 Javascript
js图片放大镜实例讲解(必看篇)
2017/07/17 Javascript
Mobile Web开发基础之四--处理手机设备的横竖屏问题
2017/08/11 Javascript
Vue项目中设置背景图片方法
2018/02/21 Javascript
vue 的keep-alive缓存功能的实现
2018/03/22 Javascript
koa2实现登录注册功能的示例代码
2018/12/03 Javascript
JS实现求字符串中出现最多次数的字符和次数示例
2019/07/05 Javascript
[01:31]完美与DOTA2历程
2014/07/31 DOTA
python的类方法和静态方法
2014/12/13 Python
Python新手在作用域方面经常容易碰到的问题
2015/04/03 Python
Python中map,reduce,filter和sorted函数的使用方法
2015/08/17 Python
IE下实现类似CSS3 text-shadow文字阴影的几种方法
2011/05/11 HTML / CSS
JavaScript获取当前url根目录(路径)
2014/02/19 面试题
省优秀教师事迹材料
2014/01/30 职场文书
大学生学雷锋活动总结
2014/06/26 职场文书
网上祭先烈心得体会
2014/09/01 职场文书
2014迎国庆标语大全
2014/09/19 职场文书
领导班子在批评与自我批评座谈会上的发言
2014/09/28 职场文书
学校党员干部承诺书
2015/05/04 职场文书
通讯稿范文
2015/07/22 职场文书
关于运动会的宣传稿
2015/07/23 职场文书
决心书格式范文
2015/09/23 职场文书
python可视化大屏库big_screen示例详解
2021/11/23 Python