对layui数据表格动态cols(字段)动态变化详解

如搜索查询时，常会遇到按日期时间段查询，并显示查询的每个日期的数据，后台拼装数据此处不讨论。

把表格渲染封装在函数里面，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(字段)动态变化详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Layui数据表格判断编辑输入的值,是否为我需要的类型详解

    因为很多使用layui插件做的表格都需要用到layui的表格编辑事件,但是编辑事件是可以随意输入值的,但是如果当我们的字段为数量的时候,又需要获取到数量传进控制器进行数据处理的时候,而控制器接收的数量为int类型.倘若我输入的数量不是整数类型,那么就无法传进控制器,直接报404,找不到url中的方法 所有在使用重载前,最好先对用户输入的值进行一下判断,判断是否符合条件,允许传进控制器 比如我项目中的表格 我这个项目要求是,当用户输入的数量大于该商品在该仓库的库存时,就会提醒用户,并且将数量的值,

  • layui实现数据表格自定义数据项

    layui是一个很适合后台开发人员用的一个前端框架,界面简洁,功能丰富. 大家知道,系统一般都有数据表格及分页功能,尤其在后台管理系统之类,这类场景更是很多,layui也为我们提供了对应的支持,我这里要说的是,layui对异步返回的数据默认是有一套格式的,像下面这样 { code: 0, msg: "", count: 1000, data: [] } 字段的别名我们可以通过属性去配置,详情请参考layui官方文档 重点来啦,layui默认支持一级数据结果,像下面这种服务端返回的数据结

  • Layui事件监听的实现(表单和数据表格)

    一.表单的事件监听 先介绍一下几个属性的用法 1.lay-filter 事件过滤器 相当于选择器,layui的专属选择器 2.lay-verify 验证属性 属性值可以是 :required必填项, phone手机号,email邮箱,url网址,number数字,date日期,identity身份证.这个相当于正则判断,当然你也可以定义自己的正则,做一些复杂的判断,例如: <input type="text" lay-verify="required">

  • 浅谈layui 数据表格前后台传值的问题

    1.1查询 <script> layui.use('table', function() { var table = layui.table; table.render({ elem : '#demo', url : 'controller路径', { field: 'id', title: 'id'}, { field: 'username', title: '用户名'}, { field: 'sex', title: 性别'}, { field: 'city', title: '城市'}

  • 对layui数据表格动态cols(字段)动态变化详解

    如搜索查询时,常会遇到按日期时间段查询,并显示查询的每个日期的数据,后台拼装数据此处不讨论. 把表格渲染封装在函数里面,cols_arr是传入的字段数组 function tableRender(cols_arr){ table.render({ elem: '#demo' , url: 请求地址 //数据接口 , method: 'post' , page: true //开启分页 , cols: cols_arr , id: 'demo' , limit: 10 , limits: [10,

  • Layui 数据表格批量删除和多条件搜索的实例

    layui数据表格批量删除 多条件搜索框:注样式自己写 <div class="demoTable" style="width: 968px; margin:20px auto;color: #7185a2"> 流水号: <div class="layui-inline"> <input class="layui-input" name="FlowNumber" id=&quo

  • layui数据表格 table.render 报错的解决方法

    一.报错信息 Whitelabel Error Page This application has no explicit mapping for /error, so you are seeing this as a fallback. Wed Jan 23 15:20:18 CST 2019 There was an unexpected error (type=Internal Server Error, status=500). An error happened during temp

  • Layui数据表格之获取表格中所有的数据方法

    数据表格中的数据是通过直接赋值的方式.这里实际上思想是反过来的,将拿数据表格中的所有数据,转换为Layui数据表格拿原始数据去渲染数据表格. 1.创建一个作用域合适的JS对象数组用来保存数据表格中的原始数据. 2.将上一步创建的JS对象数组也就是原始数据赋给table.render()的data参数. 3.获取表格中的所有数据其实直接获取第一步中创建的JS对象数组即可,参照下面的代码,获取表格中的所有数据就是获取tableContent中的数据. // 存放数据表格中的数据的对象数组tableC

  • php+layui数据表格实现数据分页渲染代码

    一.HTML <table class="layui-hide layui-table" id="spu-data"></table> 二.JS 说明:需要引入layui中的table和laytpl模板引擎,laytpl可以自定义事件及自定义数据字段等 <!-- 拼接图片 --> <script type="text/html" id="pimg"> <img class=

  • layui 数据表格 根据值(1=业务,2=机构)显示中文名称示例

    数据是用ThinkPHP5操作 类型是固定4个, 用layui templet - 自定义模板 方法一: {field:'type', title: '类型', width: 200, templet: '#titleTpl'} <script type="text/html" id="titleTpl"> if({{d.type}}=='2'){机构}else if({{d.type}}=='3'){财务} </script> 其它方法二:

  • layui数据表格实现重载数据表格功能(搜索功能）

    layui数据表格实现重载数据表格功能,以搜索功能为例 加载数据表格 实现搜索功能和数据表格重载 全部代码 加载数据表格 按照layui官方文档示例 HTML部分 <table id="demo" lay-filter="test"></table> JavaScript部分 var table = layui.table; //执行渲染 table.render({ elem: '#demo' //指定原始表格元素选择器(推荐id选择器)

  • layui 数据表格 点击分页按钮 监听事件的实例

    找了 很多 关于表格分页 点击事件 请求, table.render 并不支持监听点击事件,所以我就把 table.render 和 laypage.render结合在一起 (我也不想写分页的,但是后台讲数据多 ,要加分页,被逼无奈 ,想了一个方法) 先上图 代码 .html <div> <table class="layui-hide" id="test" lay-filter="demo"></table>

  • 解决layui数据表格Date日期格式的回显Object的问题

    有属性: private Date createtime; 但是回显的时候,显示{ Object object },想要转换成字符串格式显示. layui中显示: 在对应的实体类中添加属性:private String createtimestr; 然后添加对应的set/get方法,但是方法处理的是createtime 但是在Mybatis-plus框架映射时,数据库表里面又没有该字段,获取数据的时候会报异常,unknown field "createtimestr" in table

  • layui 数据表格+分页+搜索+checkbox+缓存选中项数据的方法

    在做数据表格的时候遇到了很多坑, 今天整理一下方便以后使用. 主要功能是使用数据表格, 做分页,做搜索, 还有checkbox, 支持全选. 当选中一些数据的时候, 数据切换页面数据在切换回来后,选中状态就消失了, 我们希望切换回来的时候, 选中状态还能存在, 因此做了个缓存, 使checkbox 保持选中状态.代码如下: 1.HTML 搜索输入框 <form class="layui-form"> <div class="layui-input-inlin

随机推荐