Bootstrap表 - 为Bootstrap 4打破多个排序

Question

用于Bostrap 4的引导表的"Multiple Sort"插件（showMultiSort）已被破坏。链接页面上的演示明显被破坏。

该按钮在DOM中可见，但它对用户显示为“隐藏”。

$(function() {
  $('#table').bootstrapTable({
    data: getData(),
    search: true,
    showColumns: true,
    showMultiSort: true,
    sortPriority: getSortPriority()
  })
});

function getSortPriority() {
  return [{
    "sortName": "github.count.forks",
    "sortOrder": "desc"
  }, {
    "sortName": "github.count.stargazers",
    "sortOrder": "desc"
  }];
}

function getData() {
  return [{
    "github": {
      "name": "bootstrap-table",
      "count": {
        "stargazers": 768,
        "forks": 183
      },
      "description": "An extended Bootstrap table with radio, checkbox, sort, pagination, and other added features. (supports twitter bootstrap v2 and v3)"
    }
  }, {
    "github": {
      "name": "multiple-select",
      "count": {
        "stargazers": 365,
        "forks": 166
      },
      "description": "A jQuery plugin to select multiple elements with checkboxes :)"
    }
  }, {
    "github": {
      "name": "bootstrap-show-password",
      "count": {
        "stargazers": 37,
        "forks": 13
      },
      "description": "Show/hide password plugin for twitter bootstrap."
    }
  }]
}

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/extensions/multiple-sort/bootstrap-table-multiple-sort.js"></script>

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css" rel="stylesheet">


<table id="table">
  <thead>
    <tr>
      <th data-field="github.name" data-sortable="true">Name</th>
      <th data-field="github.count.stargazers" data-sortable="true">Stargazers</th>
      <th data-field="github.count.forks" data-sortable="true">Forks</th>
      <th data-field="github.description" data-sortable="true">Description</th>
    </tr>
  </thead>
</table>

Answer 1

我通过创建以下jQuery插件来解决这个问题。

(function($) {
  $.fixBootstrapMultisort = function() {
    let $button = $('.multi-sort'),
      $modal = $('div[id^="sortModal_"].modal'),
      $toolbar = $modal.find('.modal-dialog #toolbar');
    // Wrap the button in a button group element.
    $button.addClass('btn-secondary').wrap($('<div>').addClass('btn-group'));
    // Fix modal title alignment.
    $modal.find('.modal-dialog .modal-content .modal-header .modal-title').css({ position: 'absolute', lineHeight: 1 });
    // Fix the icons.
    $button.find('.fa.glyphicon-sort').removeClass('glyphicon-sort').addClass('fa-sort').css('width', '1em');
    $toolbar.find('i.glyphicon-plus').removeClass('glyphicon-plus').addClass('fa-plus');
    $toolbar.find('i.glyphicon-minus').removeClass('glyphicon-minus').addClass('fa-minus');
  };
})(jQuery);

我必须解决一些问题。

• .multi-sort按钮没有包裹在div.btn-group元素中。
• 图标是.glyphicon-sort而不是.fa-sort。
• 我将按钮的宽度设置为1em，因为它默认为图标的宽度。
• 模态窗口标题不在左侧。

---

工作实例

(function($) {
  $.fixBootstrapMultisort = function() {
    let $button = $('.multi-sort'),
      $modal = $('div[id^="sortModal_"].modal'),
      $toolbar = $modal.find('.modal-dialog #toolbar');
    // Wrap the button in a button group element.
    $button.addClass('btn-secondary').wrap($('<div>').addClass('btn-group'));
    // Fix modal title alignment.
    $modal.find('.modal-dialog .modal-content .modal-header .modal-title').css({ position: 'absolute', lineHeight: 1 });
    // Fix the icons.
    $button.find('.fa.glyphicon-sort').removeClass('glyphicon-sort').addClass('fa-sort').css('width', '1em');
    $toolbar.find('i.glyphicon-plus').removeClass('glyphicon-plus').addClass('fa-plus');
    $toolbar.find('i.glyphicon-minus').removeClass('glyphicon-minus').addClass('fa-minus');
  };
})(jQuery);

$(function() {
  $('#table').bootstrapTable({
    data: getData(),
    search: true,
    showColumns: true,
    showMultiSort: true,
    sortPriority: getSortPriority()
  });
  $.fixBootstrapMultisort();
});

function getSortPriority() {
  return [{
    "sortName": "github.count.forks",
    "sortOrder": "desc"
  }, {
    "sortName": "github.count.stargazers",
    "sortOrder": "desc"
  }];
}

function getData() {
  return [{
    "github": {
      "name": "bootstrap-table",
      "count": {
        "stargazers": 768,
        "forks": 183
      },
      "description": "An extended Bootstrap table with radio, checkbox, sort, pagination, and other added features. (supports twitter bootstrap v2 and v3)"
    }
  }, {
    "github": {
      "name": "multiple-select",
      "count": {
        "stargazers": 365,
        "forks": 166
      },
      "description": "A jQuery plugin to select multiple elements with checkboxes :)"
    }
  }, {
    "github": {
      "name": "bootstrap-show-password",
      "count": {
        "stargazers": 37,
        "forks": 13
      },
      "description": "Show/hide password plugin for twitter bootstrap."
    }
  }]
}

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/extensions/multiple-sort/bootstrap-table-multiple-sort.js"></script>

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css" rel="stylesheet">


<table id="table">
  <thead>
    <tr>
      <th data-field="github.name" data-sortable="true">Name</th>
      <th data-field="github.count.stargazers" data-sortable="true">Stargazers</th>
      <th data-field="github.count.forks" data-sortable="true">Forks</th>
      <th data-field="github.description" data-sortable="true">Description</th>
    </tr>
  </thead>
</table>