Bootstrap-table使用hideRow隐藏行后可能会使末尾行消失

Bootstraptable version(s) affected

1.17.1-1.21.2

Description

近期有需求要实现根据页面选择的条件过滤表格中的显示数据,通过遍历每一行的数据做校验,符合条件的使用showRow置为显示,不符合条件的使用hideRow做隐藏。在bootstrap-table 1.11版本中正常,升级至1.17.1和1.21.2均有发现当pagination="client"时,遍历隐藏掉第2条,其余的使用showRow置为显示后,最后一条记录也消失不见了,使用getHiddenRows也查询不到消失的那一行记录。

Example(s)

https://live.bootstrap-table.com/code/Kkunyue/14167

Possible Solutions

调试发现问题是出现在initBody方法中,

{
    key: "initBody",
    value: function initBody(fixedScroll, updatedUid) {
      var _this8 = this;
     //**这里获取了包含隐藏行的记录,应该修改为var data = this.getData({includeHiddenRows: false}); **
      var data = this.getData();
        ...........
     //**pagination="client"所以不会进入该判断,在隐藏第2行之后,this.pageTo此时变成了data.length-1,即不包含隐藏行的记录数**
      if (!this.options.pagination || this.options.sidePagination === 'server') {
        this.pageFrom = 1;
        this.pageTo = data.length;
      }
      var rows = [];
      var trFragments = $__default["default"](document.createDocumentFragment());
      var hasTr = false;
      var toExpand = [];
      this.autoMergeCells = Utils.checkAutoMergeCells(data.slice(this.pageFrom - 1, this.pageTo));
     // **this.pageTo = data.length - 1,所以不会加载到最后一行记录**
      for (var i = this.pageFrom - 1; i < this.pageTo; i++) {
        var item = data[i];
        var tr = this.initRow(item, i, data, trFragments);
        hasTr = hasTr || !!tr;
        if (tr && typeof tr === 'string') {
          .......................
         }
      }
      ................
    }
}

将上述代码中var data = this.getData();修改为var data = this.getData({includeHiddenRows: false});后又出现新问题,由于在_toggleRow方法中this.initBody(true);的调用是在this.initPagination();调用之前,因此在调用this.initBody(true);时this.pageTo还未减去隐藏掉的那一行,导致this.pageTo==data.length,在初始化最后一行时会出现错误。将this.initBody(true);和this.initPagination();方法调用互换位置之后显示正常,getHiddenRows方法也有同样问题

{
      key: "_toggleRow",
      value: function _toggleRow(params, visible) {
        var row;
        ................
        // **这里将下面两行互换了位置**
       //this.initBody(true);
       //this.initPagination();
        this.initPagination();
        this.initBody(true);
      }
    }
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值