Таблицы начальной загрузки - Многократная сортировка сломана для начальной загрузки 4 - PullRequest
Новая
       29

Таблицы начальной загрузки - Многократная сортировка сломана для начальной загрузки 4

0 голосов
/ 28 марта 2019

Плагин "Multiple Sort" (showMultiSort) для Bootstrap Tables не работает для Boostrap 4. Демонстрация на связанной странице явно не работает.

Кнопка видна в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/bootstrap-table@1.14.2/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.14.2/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/bootstrap-table@1.14.2/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>

1 Ответ

1 голос
/ 28 марта 2019

Я исправил это, создав следующий плагин 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/bootstrap-table@1.14.2/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.14.2/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/bootstrap-table@1.14.2/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>
...