对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 相关文章推荐
javascript 去字符串空格终极版(支持utf8)
Nov 14 Javascript
web的各种前端打印方法之jquery打印插件PrintArea实现网页打印
Jan 09 Javascript
js与jquery回车提交的方法
Feb 03 Javascript
基于jQuery实现弹出可关闭遮罩提示框实例代码
Jul 18 Javascript
微信小程序 地图(map)实例详解
Nov 16 Javascript
解析JavaScript数组方法reduce
Dec 12 Javascript
JS弹性运动实现方法分析
Dec 15 Javascript
JS得到当前时间的方法示例
Mar 24 Javascript
Vue关于数据绑定出错解决办法
May 15 Javascript
详解nuxt路由鉴权(express模板)
Nov 21 Javascript
Layui 导航默认展开和菜单栏选中高亮设置的方法
Sep 04 Javascript
原生js+css调节音量滑块
Jan 15 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
第十一节 重载 [11]
2006/10/09 PHP
php数组函数序列之end() - 移动数组内部指针到最后一个元素,并返回该元素的值
2011/10/31 PHP
工厂模式在Zend Framework中应用介绍
2012/07/10 PHP
PHP中绘制图像的一些函数总结
2014/11/19 PHP
推荐10个提供免费PHP脚本下载的网站
2014/12/31 PHP
codeigniter中实现一次性加载多个view的方法
2015/03/20 PHP
php 使用expat方式解析xml文件操作示例
2019/11/26 PHP
线路分流自动跳转代码;希望对大家有用!
2006/12/02 Javascript
CSDN轮换广告图片轮换效果
2007/03/27 Javascript
谈谈Vue.js——vue-resource全攻略
2017/01/16 Javascript
vue-devtools的安装步骤
2018/04/23 Javascript
详解一个基于react+webpack的多页面应用配置
2019/01/21 Javascript
[jQuery] 事件和动画详解
2019/03/05 jQuery
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
2019/09/10 jQuery
Vue 按照创建时间和当前时间显示操作(刚刚,几小时前,几天前)
2020/09/10 Javascript
原生js中运算符及流程控制示例详解
2021/01/05 Javascript
[05:53]完美世界携手游戏风云打造 卡尔工作室观战系统篇
2013/04/22 DOTA
在Mac OS系统上安装Python的Pillow库的教程
2015/11/20 Python
Python基于pyCUDA实现GPU加速并行计算功能入门教程
2018/06/19 Python
python根据文章标题内容自动生成摘要的实例
2019/02/21 Python
基于Django静态资源部署404的解决方法
2019/07/28 Python
Python FFT合成波形的实例
2019/12/04 Python
如何基于pythonnet调用halcon脚本
2020/01/20 Python
Pycharm中安装Pygal并使用Pygal模拟掷骰子(推荐)
2020/04/08 Python
Python多分支if语句的使用
2020/09/03 Python
什么是数据库锁?Oracle中都有哪些类型的锁?
2015/08/21 面试题
《孔子拜师》教学反思
2014/02/24 职场文书
眼镜促销方案
2014/03/15 职场文书
关于安全演讲稿
2014/05/09 职场文书
2014迎国庆演讲稿
2014/09/19 职场文书
群众路线教育实践活动民主生活会个人检查对照思想汇报
2014/10/04 职场文书
民主评议党员登记表自我评价
2014/10/20 职场文书
财务检查整改报告
2014/11/06 职场文书
导游词之泉州崇武古城
2019/12/20 职场文书
忆童年!用Python实现愤怒的小鸟游戏
2021/06/07 Python
5道关于python基础 while循环练习题
2021/11/27 Python