对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.uploadify 上传文件插件的使用详解 for ASP.NET
Jan 22 Javascript
Jquery UI震动效果实现原理及步骤
Feb 04 Javascript
js unicode 编码解析关于数据转换为中文的两种方法
Apr 21 Javascript
JQuery 在文档中查找指定name的元素并移除的实现方法
May 19 Javascript
AngularJS基础 ng-paste 指令简单示例
Aug 02 Javascript
VUE中v-model和v-for指令详解
Jun 23 Javascript
史上最全JavaScript数组去重的十种方法(推荐)
Aug 17 Javascript
React-intl 实现多语言的示例代码
Nov 03 Javascript
node作为中间服务层如何发送请求(发送请求的实现方法详解)
Jan 02 Javascript
详解关于element级联选择器数据回显问题
Feb 20 Javascript
vuex actions异步修改状态的实例详解
Nov 06 Javascript
Ajax 的初步实现(使用vscode+node.js+express框架)
Jun 18 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文件中bom的PHP代码
2012/03/13 PHP
php源码之将图片转化为data/base64数据流实例详解
2016/11/27 PHP
JavaScript中:表达式和语句的区别[译]
2012/09/17 Javascript
jquery控制左右箭头滚动图片列表的实例
2013/05/20 Javascript
JavaScript字符串对象substring方法入门实例(用于截取字符串)
2014/10/17 Javascript
基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作
2016/05/12 Javascript
D3.js实现柱状图的方法详解
2016/09/21 Javascript
微信小程序 参数传递详解
2016/10/24 Javascript
bootstrap实现图片自动轮播
2016/12/21 Javascript
JavaScript运动框架 多值运动(四)
2017/05/18 Javascript
elemetUi 组件--el-upload实现上传Excel文件的实例
2017/10/27 Javascript
vue拦截器实现统一token,并兼容IE9验证功能
2018/04/26 Javascript
Vue引入jquery实现平滑滚动到指定位置
2018/05/09 jQuery
微信小程序表单弹窗实例
2018/07/19 Javascript
jQuery easyui datagird编辑行删除行功能的实现代码
2018/09/20 jQuery
vue插件mescroll.js实现移动端上拉加载和下拉刷新
2019/03/07 Javascript
Vue根据条件添加click事件的方式
2019/11/09 Javascript
详解React中共享组件逻辑的三种方式
2021/02/02 Javascript
使用python实现rsa算法代码
2016/02/17 Python
OpenCV2.3.1+Python2.7.3+Numpy等的配置解析
2018/01/05 Python
Python实现快速计算词频功能示例
2018/06/25 Python
将python2.7添加进64位系统的注册表方式
2019/11/20 Python
Java Spring项目国际化(i18n)详细方法与实例
2020/03/20 Python
python适合做数据挖掘吗
2020/06/16 Python
EVE LOM英国官网:全世界最好的洁面膏
2017/10/30 全球购物
大学旷课检讨书
2014/01/28 职场文书
餐饮企业总经理岗位职责范文
2014/02/18 职场文书
个人租房协议书
2014/04/09 职场文书
班主任开场白
2015/06/01 职场文书
2019年大学生学年自我鉴定!
2019/03/25 职场文书
golang interface判断为空nil的实现代码
2021/04/24 Golang
Nginx配置文件详解以及优化建议指南
2021/09/15 Servers
图文详解Nginx版本平滑升级方案
2021/09/15 Servers
分析SQL窗口函数之排名窗口函数
2022/04/21 Oracle
JavaScript圣杯布局与双飞翼布局实现案例详解
2022/08/05 Javascript
鸿蒙3.0体验感怎么样? 鸿蒙3.0系统评测向
2022/08/14 数码科技