Таблица Bootstrap является легким и богатым функциями данных, отображаемыми в форме таблицы, поддержке отдельного выбора, флажок, сортировки, пейджинга, отображения/скрытых столбцов, таблицы с фиксированной прокруткой заголовков, отзывчивым дизайном, загрузкой данных json, нажимайте сортированные столбцы, представления карты и т. Д.
серия таблиц Bootstrap:
Подробное объяснение таблицы начальной загрузки компонента JS Table Artfact (базовая версия)
Артефакт компонента таблицы таблицы начальной загрузки серии компонентов JS [End Gace]
Артефакт компонента таблицы таблицы начальной загрузки серии компонентов JS [2. Таблица родителей-сын и заказ в колонке]]
1. Эффект дисплея
Сегодня я слегка изменю следующий метод. Давайте сначала рассмотрим эффект реализации, а затем введем реализацию кода и меры предосторожности позже. Давай, давай отправим визуализации:
1. рендеринг стола отца и сына
2. Порядок строки
Перед заказом
Перетащите линию, чтобы сортировать ее до первой строки
3. Порядок столбца
Перед заказом
Заглавное перетаскивание
После заказа
2. Подробное объяснение кода таблицы отца-сына
В предыдущей главе мы представили основное использование таблицы начальной загрузки. При инициализации таблицы существует свойство "DetailView". Установите его на True, и вы можете увидеть значок в форме «+» перед каждым рядом. Нажатие на этот значок запускает событие, которое загружает подтабиль. Это общий принцип. Давайте посмотрим на код, на самом деле он очень просто.
1. Инициализируйте таблицу и зарегистрируйте строку, чтобы расширить событие
$ ("#tb_powerset"). Bootstraptable ({url: '/api/menuapi/getparentmenu', метод: «Get», DetailView: true, // родитель и детская таблица // боковая павивания: «Сервер», PageSize: 10, pagelist: [10, 25], Columns: [(Field: 'MenU_NAME: «Menu_url», заголовок: «URL» Menu '}, {Field:' parent_id ', заголовок:' Manu '}, {Field:' Menu_level ', заголовок:' Men Level '}, // Регистрировать события, которые загружают подтабрики. $ detail);}});Давайте посмотрим на три параметра соответствующей функции метода (индекс, строка, $ detail) события подтабной загрузки OnexpandRow.
Индекс: индекс строки текущей строки родительской таблицы.
Строка: объект данных JSON текущей строки родительской таблицы.
$ DETAL: объект TD в новой строке, созданный в текущей строке.
Третий параметр особенно важен, потому что сгенерированная подтабильная таблица загружается в объекте $ Detail. Таблица Bootstrap генерирует для нас объект $ Detail, и тогда нам просто нужно заполнить его заходом, который мы хотим.
2. Давайте посмотрим на метод oinit.initsubtable ()
// Инициализировать subtable (беспроводной цикл) oinit.intsubtable = function (index, row, $ detail) {var parentid = row.menu_id; var cur_table = $ detail.html ('<table> </table>'). Найти ('table'); $ (cur_table) .bootStraptable ({url: '/api/menuapi/getChildrenMenu', метод: «Get», QueryParams: {strParentId: ParentId}, AjaxOptions: {strParentId: ParentId}, ClickToSelect: True, DetailView: True, // Таблица родительской желудка уникальный: [{Facebox: True}, {Field: 'Menu_Name', заголовок: «Имя меню»}, {Поле: 'Menu_URL', название: 'url Menu'}, {Field: 'Parent_id', название: 'Manu'}, {Field: 'menu_level', title: 'menu wreat Дочерняя таблица OnexpandRow: function (index, row, $ subdetail) {oinit.initsubtable (index, row, $ subdetail);}});};Исходя из этого, мы видим, что принцип генерации подтабла состоит в том, чтобы создать cur_table объекта таблицы, а затем зарегистрировать инициализацию таблицы этого объекта. Разве это не очень просто ~~
3. Подробное объяснение кода заказа строки
Код заказа строки проще, давайте посмотрим.
1. Требуются две дополнительные ссылки
<script src = "~/content/jquery-ui-1.11.4.custom/extred/jquery.tablednd.js"> </script> <script src = "~/content/bootstrap-table/extensions/recorder-rows/bootstrap-table-reord-rows.js"> </script>
2. При определении таблицы на странице CSHTML добавьте два атрибута
<Таблица ID = "TB_ORDE" DATA-USE-ROW-ATTR-FUNC = "TRUE" DATA-redordable-rows = "true"> </table>
Затем нет необходимости вносить какие -либо изменения при инициализации таблицы JS, и загруженная таблица может реализовать функцию упорядочения строки.
4. Подробное объяснение кода заказа столбцов
Подобно линейному порядку. Упорядочение столбца используется следующим образом:
1. Ссылка на несколько дополнительных JS и CSS
<script src = "~/content/bootstrap-table/extensions/columns/columns/bootstrap-table-reorder-columns.js"> </script> <link rel = "stylesheet" href = "../ Assets/examples.css"> <link rel = "stylesheet" href = "https://rawgit.com/akottr/dragtable/master/dragtable.css"> <script src = "https://code.jquery.com/ui/1.11.4/jquery-ui.js"> </script> <script src = "https://rawgit.com/akottr/dragtable/master/jquery.dragtable.js"> </script> <script src = "https://code.jquery.com/ui/1.11.4/jquery-ui.js"> </script> <script src = "https://code.jquery.com/ui/1.11.4/jquery-ui.js"> </script>
2. При определении таблицы на странице CSHTML добавьте атрибут
<Таблица ID = "TB_DEPARTMENTS" DATA-ERODEBALE-COLUNMS = "true"> </table>
В других местах не требуется модификаций. Загруженная таблица может реализовать упорядочение столбца. Это легко?
5. управляющая фильтрация
Первоначально эта статья должна была закончиться, я вдруг вспомнил, что в предыдущей главе была функция поиска. Казалось, что функция поиска не может быть использована при использовании подключения сервера. Поэтому я вспомнил, что у меня была функция, похожая на фильтрацию каждого столбца в CS раньше. Блоггер снова был любопытным. Имеет ли таблица начальной загрузки такую фильтрацию каждого столбца в таблице, поэтому я проверил документ. Результат выполнен, и есть что -то на самом деле ~~ Давайте посмотрим.
1. Показ визуализации
2. Примеры кода
(1) Внедрить дополнительный JS
<script src = "~/content/bootstrap-table/extensions/filter-control/bootstrap-table-filter-control.js"> </script>
(2) Определить атрибуты таблицы и атрибуты заголовка
<Table ID = "TB_ROLES" DATA-FILTER-CONTROL = "true"> <theAd> <tr> <th Data-field = "role_name" Data-filter-control = "select"> name keel </th> <th Data-field = "Описание" Data-Filter-Control = "input"> Описание роли </th> <th Data-field = "role_defaulture" Data-Filter-Control = "input"> Роль по умолчанию </th> </tr> </tead> </table>
Поскольку здесь определены атрибуты заголовка таблицы, нет необходимости определять столбцы при инициализации JS.
(3) Инициализация JS
$ ('#TB_ROLES'). Bootstraptable ({url: '/role/getrole', метод: «Get», What Wanebar: '#Toolbar', полосатый: true, cache: false, полосатый: true, pagination: true, сортируемый: true, Queryparams: function (param) {return param;} Queryparamsty: боковая павивания: «Сервер», PageSize: 10, Pagelist: [10, 25, 50, 100], Search: True, ShowColumns: True, ShowResh: True, MinimumCountColumns: 2, ClickToSelect: True,});Сначала блогер подумал, что этот вид поиска может быть только подкрепляющим пользовательского клиента, но после отладки это было не так. Исходные условия поиска могут быть переданы на сервер через JSON. Давайте посмотрим на процесс отладки
Получить параметры на заднем плане и десериализировать их
Таким образом, мы можем хорошо передать условия запроса на задний план. Очень хорошо и мощно. Это устранит проблему расширения функции поиска таблицы ~~
6. Резюме
Выше выше - некоторые приложения для расширения таблицы Bootstrap. Это не может быть неполным, и есть некоторые расширенные использование, которые не введены, такие как слияние строки и столбца, замораживание строк и столбцов и т. Д.
Приведенный выше контент является соответствующим знанием артефакта таблицы таблицы Bootstrap Table [2. Таблица отца и сына, а также порядок строк и столбца] представлены вам редактором. Я надеюсь, что это будет полезно для всех!