Bootstrap-Table：展开未隐藏的行

Question

我设置了过滤器，可以隐藏 bootstrap-table 的某些行。我还实现了“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 按钮方法来添加用于展开和折叠行的自定义按钮。见下文：

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

与其修改引导程序的函数，也许您可以在过滤它们时通过重命名属性来绕过它们。像这样

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');
      })
 }

Bootstrap-Table：展开未隐藏的行

Bootstrap-Table: Expand rows that are not hidden

javascript

jquery

bootstrap-table