对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来定位
Feb 20 Javascript
JavaScript 实现??打印?理
Apr 28 Javascript
关于js里的this关键字的理解
Aug 17 Javascript
纯javascript实现自动发送邮件
Oct 21 Javascript
Javascript实现图片轮播效果(二)图片序列节点的控制实现
Feb 17 Javascript
全面解析Bootstrap中nav、collapse的使用方法
May 22 Javascript
微信小程序获取手机系统信息的方法【附源码下载】
Dec 07 Javascript
Vue2 轮播图slide组件实例代码
May 31 Javascript
利用JavaScript缓存远程窃取Wi-Fi密码的思路详解
Nov 05 Javascript
详解小程序BackgroundAudioManager踩坑之旅
Dec 08 Javascript
JavaScript实现字符串与HTML格式相互转换
Mar 17 Javascript
JS不要再到处使用绝对等于运算符了
Apr 30 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个人网站架设连环讲(一)
2006/10/09 PHP
PHP 输出缓存详解
2009/06/20 PHP
关于尾递归的使用详解
2013/05/02 PHP
ThinkPHP中__initialize()和类的构造函数__construct()用法分析
2014/11/29 PHP
Laravel学习教程之从入口到输出过程详解
2017/08/27 PHP
jquery导航制件jquery鼠标经过变色效果示例
2013/12/05 Javascript
jquery图片轮播插件仿支付宝2013版全屏图片幻灯片
2014/04/03 Javascript
javascript中加var和不加var的区别 你真的懂吗
2016/01/06 Javascript
angular源码学习第一篇 setupModuleLoader方法
2016/10/20 Javascript
基于slideout.js实现移动端侧边栏滑动特效
2016/11/28 Javascript
vue2滚动条加载更多数据实现代码
2017/01/10 Javascript
Bootstrap表单控件使用方法详解
2017/01/11 Javascript
JS实现生成由字母与数字组合的随机字符串功能详解
2018/05/25 Javascript
使用vue-router beforEach实现判断用户登录跳转路由筛选功能
2018/06/25 Javascript
Vue 技巧之控制父类的 slot
2020/02/24 Javascript
[50:45]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs TNC 第一场
2018/04/10 DOTA
《Python学习手册》学习总结
2018/01/17 Python
详解Python数据分析--Pandas知识点
2019/03/23 Python
python日期相关操作实例小结
2019/06/24 Python
深入了解python中元类的相关知识
2019/08/29 Python
Pandas 解决dataframe的一列进行向下顺移问题
2019/12/27 Python
python实现多进程按序号批量修改文件名的方法示例
2019/12/30 Python
公认8个效率最高的爬虫框架
2020/07/28 Python
Python的scikit-image模块实例讲解
2020/12/30 Python
数组越界问题
2015/10/21 面试题
教师实习自我鉴定
2013/12/18 职场文书
继承公证书
2014/04/09 职场文书
办公室打字员岗位职责
2014/04/16 职场文书
党员自我评议对照检查材料
2014/09/27 职场文书
2014年社区党建工作总结
2014/11/11 职场文书
2014财务年终工作总结
2014/12/08 职场文书
财务部会计岗位职责
2015/02/03 职场文书
2015年煤矿工作总结
2015/04/28 职场文书
民事起诉状范文
2015/05/19 职场文书
门卫管理制度范本
2015/08/05 职场文书
厉行节约工作总结
2015/08/12 职场文书