Стол Bootstrap на основе начальной загрузки может иметь мощные функции, такие как фиксированные заголовки таблицы, одиночная/проверка, сортировка, подкидка, поиск и пользовательские заголовки таблиц, что может улучшить эффективность разработки и сократить время разработки.
1. Описание подключаемого модуля: Таблица Bootstrap отображает формат таблицы данных, обеспечивая богатую поддержку, радиосвязи, флажки, сортировку, пейджинг и т. Д., Скачать плагин.
2. Особенности:
Разработано на основе Bootstrap 3 (также поддерживается Bootstrap 2)
Отзывчивый интерфейс
Фиксированный заголовок
Полностью настраивается
Поддержка атрибутов данных
Показать/скрыть столбцы
Показать/скрыть заголовок таблицы
Получить данные JSON с помощью AJAX
Нажмите на заголовок таблицы, чтобы сортировать его просто
Поддерживает пользовательский дисплей столбца
Поддержка одиночного/повторного избирания
Мощная функция пейджинга
Поддержка макета визитной карточки
Поддерживает многоязычный
3. Как использовать:
1) Представьте библиотеку Bootstrap (если ваш проект еще не используется) и Bootstrap-table.css в теге на головке страницы HTML.
<link rel = "styleSheet" href = "bootstrap.min.css"> <link rel = "stylesheet" href = "bootstrap-table.css">
2) Представьте библиотеку jQuery, библиотеку Bootstrap (если ваш проект еще не используется) и Bootstrap-table.js до того, как тег головы или тег тела будет закрыт (рекомендуется).
<script src = "jquery.min.js"> </script> <script src = "bootstrap.min.js"> </script> <script src = "bootstrap-table.js"> </script>
3) Укажите источник данных, вот два способа
Метод 1: Передайте тег атрибута данных
Настройка данных toggle = "Таблица" в обычной таблице включает таблицу Bootstrap без написания JavaScript.
<Таблица данных toggle = "table" data-url = "data.json"> <tead> ... </tead> </table>
Метод 2: Настройка источника данных через JavaScript
Включите таблицу с атрибутом ID через JavaScript.
$ ('#table'). Bootstraptable ({url: 'data.json'});:4. Описание ошибок:
При настройке формы поля с использованием метода атрибута тега я обнаружил, что эффекта не было, и изображение было неясно. Вы можете напрямую загрузить пример для исследования и загрузить адрес.
Например: <th Data-field = "sex" formatter = "format_sex"> Пол </th>
1) Причина:
Bootstrap-table.js Line 399, только тип форматера-это функция в коде.
2) Решение:
Измените блок кода в строке 399:
Перед модификацией
if (typeof that.header.formatters [j] === 'function') {value = that.header.formatters [j] (value, item);}После модификации:
if (typeof that.header.formatters [j] === 'function') {value = that.header.formatters [j] (value, item); } else if (typeof that.header.formatters [j] === 'string') {if (typeof window [that.header.formatters [j]] === 'function') {value = window [that.header.formatters [j]] (значение, элемент); }}Если вы все еще хотите учиться глубже, вы можете нажать здесь, чтобы изучить и прикрепить к вам 3 захватывающих тем:
Начальная учебник по обучению
Bootstrap Practical Rutorial
Учебное пособие по использованию плагина Bootstrap
Выше приведено метод использования таблицы начальной загрузки, разделенный с вами. Я надеюсь, что вам будет полезно овладеть методом использования стола начальной загрузки.