Bootstrap-Table:展开未隐藏的行

Question

我设置了过滤器来隐藏引导表中的某些行。我还实现了"expandAllRows“方法来显示所有细节视图；然而，这个方法将展开所有行，包括那些被我的过滤器隐藏的行。

如何修改bootstrap-table.min.js以仅显示可见行的详细视图？

我认为我需要修改bootstrap-table.min.js中的代码行，但不确定如何修改：

...{key:"expandAllRows",value:function(){for(var t=this.$body.find("> tr[data-index][data-has-detail-view]"),e=0;e<t.length;e++)this.expandRow(i.default(t[e[).data("index"))}...

我使用bootstrap-table button方法来添加用于展开和折叠行的自定义按钮。如下所示：

function buttons() {
    var $table = $('#table')
    var $expand = $('#expand')
    var $collapse = $('#collapse')

    return {
        btnExpand: {
            text: 'Expand All Rows',
            icon: 'fas fa-angle-double-down',
            event: function() {
                $table.bootstrapTable('expandAllRows')
            },
            attributes: {
                title: 'Expand all rows'
            }
        },
        btnCollapse: {
            text: 'Collapse All Rows',
            icon: 'fas fa-angle-double-up',
            event: function() {
                $table.bootstrapTable('collapseAllRows')
            },
            attributes: {
                title: 'Collapse all rows'
            }
        }
    }
}

Answer 1

与其修改bootstraps的函数，不如在过滤时通过重命名属性来绕过它们。像这样的东西

function filter(keyword) {
  // your current filter logic, which hides the rows that don't match
  // in this example, you have hidden them with the class 'hidden-row' 
  let hiddenRows=$("tr.hidden-row[data-has-detail-view='true']");
  hiddenRows.each( function() {
     $(this).attr({
        'data-has-detail-view-hidden': 'true'
      })
      .removeAttr('data-has-detail-view');
  })
}

function clearFilters() {
// your logic, then
      let hiddenRows=$("tr.hidden-row[data-has-detail-view-hidden='true']");
      hiddenRows.each( function() {
         $(this).attr({
            'data-has-detail-view': 'true'
          })
          .removeAttr('data-has-detail-view-hidden')
          .removeClass('hidden-row');
      })
 }