欢迎来到小懒的博客~email:568705236@qq.com

转载:layui2.5.x版本table更新表头问题

2020/10/2 11:08:26站长

    layui的table.reload对于config的处理是深拷贝,那么数组就是修改对应的下标,个人建议是如果对cols的修改是结构性的大改造,那么重新render比较合适,如果只是修改一些对应下标的宽度呀,hide呀啥的不会改变原始cols的length的,可以用reload,如果既要继承之前的其他属性,又要修改cols的结构的,需要一些特殊的处理,首先2.5之前table的reload两种方式对于继承采用两个不同的方式,table.reload是深拷贝,tableIns.reload是非深拷贝,所以以前的版本可以考虑用tableIns.reload的方式来处理这个问题,但是2.5之后统一了都是深拷贝了,所以这个方法就没用了。

    新版本的table.reload对于需要处理因为深拷贝的影响的处理方式参考:

//执行一个 table 实例
  var tableIns = table.render({
    elem: '#demo'
    ,height: 420
    ,url: '/demo/table/user/' //数据接口
    ,title: '用户表'
    ,page: true //开启分页
    ,toolbar: 'default' //开启工具栏,此处显示默认图标,可以自定义模板,详见文档
    ,totalRow: true //开启合计行
    ,cols: [[ //表头
      {type: 'checkbox', fixed: 'left'}
      ,{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left', totalRowText: '合计:'}
      ,{field: 'username', title: '用户名', width:80}
      ,{field: 'experience', title: '积分', width: 90, sort: true, totalRow: true}
      ,{field: 'sex', title: '性别', width:80, sort: true}
      ,{field: 'score', title: '评分', width: 80, sort: true, totalRow: true}
      ,{field: 'city', title: '城市', width:150} 
      ,{field: 'sign', title: '签名', width: 200}
      ,{field: 'classify', title: '职业', width: 100}
      ,{field: 'wealth', title: '财富', width: 135, sort: true, totalRow: true}
      ,{fixed: 'right', width: 165, align:'center', toolbar: '#barDemo'}
    ]]
  });
  setTimeout(function(){
    delete tableIns.config.cols; // 删除当前的
    tableIns = table.reload('demo', {cols: [[{field: 'id'}]]}) // 重新赋值给tableIns这一步也很重要,因为reload会生成新的实例返回,如果没有重新接收赋值,那么后面你再对tableIns的处理就是对已经不再使用的表格实例的操作,而不是当前的表格实例,会遇到各种问题
  }, 1000)

    转自:https://fly.layui.com/vipclub/jie/layuiadmin/63809/

赞赏