серия таблиц Bootstrap:
Подробное объяснение таблицы начальной загрузки компонента JS Table Artfact (базовая версия)
Артефакт компонента таблицы таблицы начальной загрузки серии компонентов JS [End Gace]
Артефакт компонента таблицы таблицы начальной загрузки серии компонентов JS [2. Таблица родителей-сын и заказ в колонке]]
Таблица Bootstrap является легким и богатым функциями данных, отображаемыми в форме таблицы, поддержки отдельного выбора, флажок, сортировки, подкидки, отображения/скрытых столбцов, таблицы с фиксированной прокруткой заголовков, отзывчивого дизайна, загрузки данных json, Click Sorted Card Componts Views и т. Д.
1. Эффект дисплея
1. Стиль строки таблицы
Например, у нас есть требование отобразить страницу заказа, а заказы с разными статусами показывают разные цвета, как показано на рисунке:
2. Изменить в линии формы
В первой статье друг парка спросил блогера, может ли он поддержать эффект редактирования в отрасли, и ответ был да. Давайте посмотрим на эффект:
Перед редактированием
Нажмите на данные ячейки
После редактирования, завершить
3. Комбинация рядов и столбцов таблиц
Блоггеры считают, что это очень распространено для ранжированных слияний, особенно при составлении отчетов Page. Давайте посмотрим на эффект:
Текущая страница неполна, нажмите, чтобы ввести и посмотреть. Как насчет этого? Эффект довольно хорош.
4. Экспорт данных таблицы
Что касается экспорта данных таблицы, таблица Bootstrap поддерживает экспорт трех режимов: базовые, все, выбранные. То есть экспорт данных текущей страницы, весь экспорт данных и выбранное экспорт данных. Он также поддерживает экспорт различных типов файлов, таких как обычный Excel, XML, JSON и другие форматы.
Экспортируйте текущую страницу, чтобы преуспеть
Экспортируйте все данные в таблице
Экспорт выбранных данных строк
Что касается экспорта других типов файлов, это в основном то же самое, что и Excel, поэтому эффект не будет отображаться.
2. Пример кода в стиле строки таблицы
Что касается настройки стиля табличных строк, другие функции являются его самыми основными функциями. Зачем поместить это в третью статью? Это потому, что блоггер думает, что эта функция может использоваться повсюду. Конечно, эффект не сложно. Вы также можете достичь фонового цвета TR с помощью jQuery, но блоггер считает, что, поскольку таблица начальной загрузки предоставляет механизм для установки фонового цвета строки, почему бы не использовать свой встроенный API. Посмотрим, как его реализовать.
При инициализации таблицы
// Инициализировать таблицу $ ('#tb_order'). Bootstraptable ({url: '/tablestyle/getord to set this property (*) pagination: true, //Whether to display paging (*) sortable: false, //Whether to enable sortOrder: "asc", //Sorting method queryParams: oTableInit.queryParams,//Pagination parameters (*) sidePagination: "server", //Pagination method: client client pagination, server server pagination (*) pageNumber: 1, //Initialize Первая страница для загрузки, по умолчанию PageSize: 10, // Количество строк записей на страницу (*) Pagelist: [10, 25, 50, 100], // количество строк на страницу, чтобы выбрать (*) Поиск: True, // Появится ли таблицы, что это так ShowRefresh: true, // делает ли минимальные дискретизированные кнопки кнопки обновления: 2, // Минимальное количество столбцов, разрешенных ClictoSelect: true, // Где включить щелчок Выбрать высоту строки: 500, // Высота строки, если атрибут высоты не установлен, таблица автоматически чувствует высоту таблицы в соответствии с номером: // Сделает ли кнопку Toggle для подробного представления и просмотра списка CardView: false, // Делает ли подробный просмотр DefityView: false, // Это ли родительская таблица-чильда Rowstyle: function (row, index) {// Здесь есть 5 значений, представляющих цвета в 5 ['Active', 'успех', 'info', 'Warning', 'danger']; var strclass = ""; Запланировано ") {strclass = 'success'; // Существует также активное} else if (row.order_status ==" deleted ") {strclass = 'danger';} else {return {};} return {classs: strclass}}, столбцы: [{fekbox: true}, {field: 'order_no:' with number: {} number: 'oream:' us yfom: 'Order_type', title: 'order type'}, {field: 'order_status', title: 'ordation ’}, {field:' замечание ', название:' Замечания '},]});На самом деле, основное внимание уделяется этому параметру:
RowStyle: Function (row, Index) {// Здесь есть 5 значений, представляющих цвета в 5 ['Active', 'успех', 'info', 'Warning', 'Danger']; var strclass = ""; if (rod.order_status == ", чтобы быть запланированным") {strclass = 'success'; // Существует также активное} иное (row.Ord_statredEs = «ifTED». {strclass = 'danger';} else {return {};} return {classes: strclass}},Таблица Bootstrap поддерживает цветы фона строки таблицы в 5, а именно «Active», «успех», «информация», «предупреждение», «Опасность». Что касается каждого соответствующего цвета фона, вы можете увидеть его, запустив код. Что касается возвратной стоимости этого метода, блогер также изучал его в течение длительного времени, когда он впервые использовал его. Согласно правилам таблицы начальной загрузки, необходимо вернуть тип объекта формата JSON, такой как: {Classes: Strclass}.
3. Пример редактирования кода в строке формы
Что касается редактирования таблиц, несколько файлов JS, которые необходимо расширить с помощью таблицы Bootstrap.
1. Представьте дополнительные файлы JS
<link rel = "styleSheet" href = "// rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/css/bootstrap-editable.css"><script src = "// rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/js/bootstrap-editable.js"></script><script src =" ~/content/bootstrap-table/extensions/editable/bootstrap-table-editable.js "> </script>
2. При определении таблицы на странице CSHTML добавьте два атрибута
<Таблица ID = "tb_departments"> <thead> <tr> <th Data-field = "name" data editable = "true"> название отдела </th> <th Data-field = "parentName"> превосходный отдел </th> <th Data-field = "Уровень" EdiTable = "true"> Уровень отдела </th> <th> data-field = "level" data-edible = "true"> дескриптор </th> </tr> </tead> </table>
Если он инициализируется в JS, метод написания выглядит следующим образом:
{Field: «Имя», заголовок: «Имя», редактируемое: true}3. Зарегистрируйте редактирование и сохранение событий при инициализации таблицы в JS
$ ('#tb_departments'). Bootstraptable ({url: '/editable/getDepartment', // запрос URL (*) Метод: 'Get', // метод запроса (*) панель инструментов: '#toolbar', // какой контейнер полосат кнопкой инструмента, истинную, чтобы отобразить интервал -интервал: False, //, будь то использование, так, что в общем, так, что в общем, так, что в общем, так, что в общем, так, что в общем, так, что в общем, так, что в общем, так, что в общем, так, что в общем, так, что в общем, так и в общем. Чтобы установить это свойство (*) Паренье: true, // Остановка пейджинга (*) Сортируемой: false, // включить сортировку: «ASC», // Сортировка метода Queryparams: OtableInit.queryparams, // Прохождение параметров (*) Боковая панификация: «Сервер», // Метод Paging PageSize Paging Paging Server Pagember (*) Pagember: 1). Загрузить, по умолчанию первая страница PageSize: 10, // количество записей на страницу (*) OnEditAblesave: Функция (поле, Row, OldValue, $ el) {$. Успешное ");}}, ошибка: function () {alert (" error ");}, complete: function () {}});}});Ключевым моментом является рассмотрение обработки этого события
OneDitablesave: Function (Field, Row, OldValue, $ el) {$ .ajax ({type: «post», url: "/editable/edit", data: {strjson: json.stringify (row)}, успех: функция (data, status) {if (status = "успех") {alert ("edit успешно"); {alert ("error");}, overse: function () {}});}Соответствующий метод должен обрабатывать сохраненную логику самостоятельно. Поле четыре параметров, ряд, OldValue и $ EL соответствуют имени текущего столбца, объекту данных текущей строки, значения перед обновлением и объекту jQuery отредактированной токовой ячейки.
4. Пример строки таблицы и кода слияния столбца
Функция слияния в рамках строки таблицы не требует ссылки на другие файлы JS. Он должен использовать только таблицу Colspan и Rowspan на странице CSHTML, чтобы достичь ее.
1. CSHTML PAGE
<table id="tb_report"><thead><tr><th colspan="4" data-valign="middle" data-align="center">Q1</th><th colspan="4" data-valign="middle" data-align="center">Quarter</th><th colspan="4" data-valign="middle" data-align="center">Quarter</th><th data-field="TotalCount" rowspan="2" data-valign="middle" data-align="center">Annual Summary</th></tr><tr><th data-field="JanCount" data-align="center">Jan</th><th data-field="FebCount" data-align="center">FebCount</th><th data-field="MarCount" data-align = "center"> март </th> <th Data-field = "FirstQuarter" Data-align = "center"> FirstQuarter </th> <th Data-Field = "APRCOUNT" DATA-ALIGN = "Центр"> Апрель </th> <th Data-Field = "MayCount" Data-align = "Центр"> May </th> <th Data-field = "juncount" data-align = "center"> jun </th> <th Data-field = "secondquarter" data-align = "center"> Quarter </th> <th Data-field = "julcount" data-align = "center"> июль </th> <th Data-field = "Agucount" data-align = "center"> август </th> <th Data-field = "sevcount" data-align = "center"> август </th> <th Data-field = "sevcount" data-align = "> август </th> <th> <th Data-field =" segucount "align =" data-align = "center"> sep </th> <th Data-field = "thirdquarter" data-align = "center"> Quarter 3 </th> <th Data-field = "octcount" data-align = "center"> октябрь </th> <th Data-field = "novcount" data-align = "Центр"> ноябрьт </th> <th Data-field = "deccount" data-align = "center"> декабрь </th> <th Data-field = "fortquarter" data-align = "center"> Quarter 4 </th> </tr> </thead> </table>
2. Там нет специальной инициализации JS
$('#tb_report').bootstrapTable({url: '/GroupColumns/GetReport', //Request URL (*) method: 'get', //Request method (*) toolbar: '#toolbar', //Which container striped by the tool button is true, //Where to display the line interval color cache: false, //Whether to use cache, the default is true, so in general, you need to Установите это свойство (*) Лиценность: true, // Отображение лиц (*) сортировка сортировки: «ASC», // Сортировка метода Queryparams: OtableInit.queryparams, // Прохождение параметров (*) Боковая павилиция: «Сервер», // Метод пейджинга: клиент Пейдж, сервер Сервера (*) Pagenumber: 1, // Инициализация. // количество строк записей на страницу (*) Пейджист: [10, 25, 50, 100], // количество строк на страницу для выбора (*)});Как насчет этого, это легко? Конечно, некоторые люди сказали, что вы можете использовать атрибуты таблицы для установки URL, страниц и другой информации без использования инициализации JS, непосредственно в CSHTML. Действительно, если мы посмотрим на его API, мы обнаружим, что каждый атрибут, который он инициализирует, соответствует атрибуту таблицы. Тип как
Если в вашей форме нет особых событий для решения, нет никаких проблем.
5. Примеры кода экспорта данных таблицы данных
Экспортная функция данных таблицы также требует некоторой расширенной поддержки JS.
1. Представьте дополнительные файлы JS
<script src = "~/content/bootstrap-table/extensions/export/bootstrap-table-export.js"> </script> <script src = "// rawgit.com/hhurz/tableexport.jquery.plugin/master/tableexport.js"> </script>
2. Когда JS инициализируется
$ ('#tb_departments'). Bootstraptable ({url: '/export/getDepartment', // Запрос URL (*) Метод: 'Get', // метод запроса (*) Панель инструментов: '#toolbar', // какой контейнер полосат на кнопку инструмента, // где можно отобразить интервал с интервалом линии: False, // будь то используется в общем, так, что в общем, так, что в общем, так, что в общем, так, что в общем, так, что в норме, так что в общем, так, что в общем, так, что в общем, так, что в общем, так, что в общем, так, что в общем, так, что в общем. Чтобы установить это свойство (*) Паренье: true, // Остановка подкисления (*) Сортируемой: false, // включить сортировку: «ASC», // Сортировка метода Queryparams: OtableInit.queryparams, // Прохождение параметров (*) Боковая панификация: «Клиент», // Метод пейгины: клиент Pagemare Pagemare Pagen (*) Pagememer: 1 Pagemare: 1). Загрузите, по умолчанию первая страница PageSize: 10, // количество строк записи на страницу (*) Pagelist: [10, 25, 50, 100], // количество строк на страницу, чтобы выбрать (*) ClickToselect: True, ShowExport: True, // exportDatype отображается: «Basic», // Basic ',' All ',' Selepted '. «Имя», заголовок: «Имя отдела»}, {Field: 'ParentName', название: 'Superior Department'}, {Field: 'level', title: 'Level'}, {Field: 'desc', title: 'description'},]});Давайте посмотрим на ключевые моменты: эти два атрибута
ShowExport: true, // отображать ли exportDatatype: «basic», // basic ', «все», «выбранный». Showexport означает, отображать ли экспортированная кнопка, ExportDatatype означает, является ли экспортированный режим текущей страницей, все данные или выбранные данные.
6. Резюме
Выше приведено эффект функции и простого кода для ее реализации. Блогер обнаружил, что было несколько проблем, которые нужно решить.
1. Функция встроенного редактирования заключается в том, чтобы отправить каждую ячейку на фон, что приведет к частым операциям базы данных и ощущается неуместной. Я не знаю, есть ли лучший способ отправить каждую строку на задний план.
2. Хотя функция экспорта очень полезна, к сожалению, она не поддерживается браузером IE. Блогер попробовал пример на официальном сайте, и кажется, что IE не может его экспортировать. Быть проверенным.
Выше приведено соответствующее содержание артефакта таблицы таблицы Bootstrap Table [конечная глава] серии компонентов JS, представленная вам редактором. Я надеюсь, что это будет полезно для всех!