对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 小数取整简单实现方式
May 30 Javascript
JavaScript中使用document.write向页面输出内容实例
Oct 16 Javascript
javascript事件委托的用法及其好处简析
Apr 04 Javascript
JavaScript实现分页效果
Mar 28 Javascript
React组件生命周期详解
Jul 03 Javascript
如何在js代码中消灭for循环实例详解
Jul 29 Javascript
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
Aug 09 jQuery
使用Angular material主题定义自己的组件库的配色体系
Sep 04 Javascript
微信小程序修改checkbox的样式代码实例
Jan 21 Javascript
基于js实现逐步显示文字输出代码实例
Apr 02 Javascript
vue中keep-alive内置组件缓存的实例代码
Apr 16 Javascript
Vue使用自定义指令实现拖拽行为实例分析
Jun 06 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
各种快递查询--Api接口
2016/04/26 PHP
javascript静态的url如何传递
2007/05/03 Javascript
通过Javascript创建一个选择文件的对话框代码
2012/06/16 Javascript
获取客户端网卡MAC地址和IP地址实现JS代码
2013/03/17 Javascript
简易js代码实现计算器操作
2013/04/15 Javascript
解析js原生方法创建表格效率测试
2013/07/08 Javascript
js实现全屏漂浮广告移入光标停止移动
2013/12/02 Javascript
使用javascript为网页增加夜间模式
2014/01/26 Javascript
javascript实现字符串反转的方法
2015/02/05 Javascript
jQuery中大家不太了解的几个方法
2015/03/04 Javascript
使用DNode实现php和nodejs之间通信的简单实例
2015/07/06 NodeJs
bootstrap table表格插件使用详解
2017/05/08 Javascript
Vue集成Iframe页面的方法示例
2017/12/12 Javascript
vue + vuex todolist的实现示例代码
2018/03/09 Javascript
jQuery AJAX 方法success()后台传来的4种数据详解
2018/08/08 jQuery
使用node.js实现微信小程序实时聊天功能
2018/08/13 Javascript
jquery实现二级导航下拉菜单效果实例
2019/05/14 jQuery
js prototype和__proto__的关系是什么
2019/08/23 Javascript
浅析JavaScript 函数柯里化
2020/09/08 Javascript
Python中实现结构相似的函数调用方法
2015/03/10 Python
使用PIL(Python-Imaging)反转图像的颜色方法
2019/01/24 Python
python实现XML解析的方法解析
2019/11/16 Python
在python中利用dict转json按输入顺序输出内容方式
2020/02/27 Python
Python MySQLdb 执行sql语句时的参数传递方式
2020/03/04 Python
解决django无法访问本地static文件(js,css,img)网页里js,cs都加载不了
2020/04/07 Python
Python调用百度OCR实现图片文字识别的示例代码
2020/07/17 Python
HTML5本地存储之IndexedDB
2017/06/16 HTML / CSS
C#怎么让一个窗口居中显示?
2015/10/20 面试题
Java面试题:请说出如下代码的输出结果
2013/04/22 面试题
秋季运动会广播稿大全
2014/02/17 职场文书
教师党员岗位承诺书
2014/05/29 职场文书
视光学专业自荐信
2014/06/24 职场文书
项目经理岗位职责
2015/01/31 职场文书
银行柜员优质服务心得体会
2016/01/22 职场文书
《法国号》教学反思
2016/02/22 职场文书
浅谈音视频 pts dts基本概念及理解
2022/08/05 数码科技