Резюме использования начальной загрузки.
Bootstrap-Table-это плагин для таблицы, записанный на основе Bootstrap-Table, специально используемого для отображения данных. Bootstrap из Twitter и в настоящее время является самым популярным фронтальным фреймворком. Bootstrap основан на HTML, CSS и JavaScript, и имеет преимущества простой, гибкой и быстрой фронтальной разработки. Я не буду описывать то же самое, что и начальная загрузка здесь. Эта статья будет сосредоточена на объяснении некоторого моего понимания использования начального стола в моем проекте и как его изучить.
Во-первых, позвольте мне объяснить отношения между JQUERY, Bootstrap и Bootstrap-Table. Многие части кода начальной загрузки включают jQuery, то есть Bootstrap зависит от jQuery, и на основе Bootstrap, который мы хотим использовать, создается на основе Bootstrap, поэтому перед использованием Bootstrap-Table вы должны ссылаться на соответствующие файлы JS и CSS JQUERY и Bootstrap.
Далее, характеристики начального стола: с jquery-ui, jqgrid и другими плагинами с дисплеем таблицы, Bootstrap-Table является плоским и легким. Этого более чем достаточно для некоторого легкого отображения данных, а также поддержки таблиц отца-сына и так далее также очень хорошая. Самое главное, что он может быть легко сочетается с другими тегами начальной загрузки.
Хорошо, это все для введения. Я буду непосредственно загружать код и визуализации, а затем расскажу о дальнейших обсуждениях.
<! Doctype html public "-// w3c // dtd xhtml 1.0 strict // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1 strict.dtd"> <head> <tite> bootstrap-table </title> <meta ht-equippe equip content = "text/html; charset = utf-8"/> <meta name = "description" content = ""/> <meta name = "ключевые слова" content = ""/> <script type = "text/javascript" src = "./ js/jquery-2.2.1.js"> </script> <script type = "text/javascript" javascript "javascript" src = "./ bootstrap/js/bootstrap.min.js"> </script> <script type = "text/javascript" src = "./ bootstrap-table/bootstrap-table-all.js"> </script> <script type = "text/javascript" src = "./ Bootstrap-table/locale/bootstrap-table-zh-cn.js"> </script> <link rel = "stylesshiet" type = "text/css" href = "./ bootstrap/css/bootstrap.min.css"> <link rel = "stylesheet" types = " href = "./ Bootstrap-table/bootstrap-table.min.css"> </head> <script language = "javascript"> </script> <body> <div> <div> <div> <div> <h3> Добавлена учетная запись учителя </h3> </div> <div> <div Id = " aria-hidden = "true"> </span> modify </button> <button Id = "btn_delete" type = "button"> <span aria-hidden = "true"> </span> delete </button> </div> <table id = "Учитель_ттабель" toggle = "table" data-url = "./ data.php" data-method = "data-toggle =" table ". data-query-params="queryParams" data-toolbar="#toolbar" data-pagination="true" data-search="true" data-show-refresh="true" data-show-toggle="true" data-show-columns="true" data-page-size="5"> <tr> <th data-field="name">User account</th> <th data-field="pwd">User Пароль </th> <th Data-field = "t_name"> Имя учителя </th> </tr> </table> </div> </div> </div> </body>
Изображение воспроизведения:
ОК далее, давайте проанализируем значение приведенного выше кода по шагам.
1. Во-первых, нам нужно скачать соответствующий пакет JQUERY Bootstrap Bootstrap Table. Есть учебные пособия в Интернете, и мы не будем описывать, как скачать его здесь.
Из ссылки на имена файлов JS и CSS в теге <Head>, мы видим, что мы должны представить эти файлы.
Примечание Bootstrap, в скомпилированной сжатой упаковке есть только три папки.
1.Jquery-2.2.1.js --- Последний файл jQuery
2.bootstrap.min.js --- Последний файл bootstrap.min.js сжатый в Bootstrap/JS
3.bootstrap.min.css --- Последний сжатый файл bootstrap.min.css в Bootstrap/CSS
4.bootstrap-table-all.js --- Последний файл JS в начальной загрузке.
5. Bootstrap-Table-Zh-Cn.js --- Последний китайский начальный файл в разделе Bootstrap-Table/Locale
6.bootstrap-table.min.css --- Последний сжатый файл CSS в начальной загрузке.
Эти шесть должны быть настроены, среди которых Bootstrap-Table-ZH-CN.JS является файлом JS, который поддерживает китайский. Только когда этот файл будет загружен, будет установлена некоторая информация о дисплее таблицы на китайский язык.
Давайте экспериментируем с эффектом отображения после удаления начальной загрузки-Zh-cn.js.
Конечно, мы также можем установить информацию о дисплее на другие языки, просто заменить Bootstrap-Table-ZH-CN.JS на JS-файлы на других языках. В пакете Bootstrap Table есть поддержка.
Мы также можем посмотреть на исходный код в этом файле. Давайте посмотрим, и вы узнаете, что делает этот файл.
/** * Таблица Bootstrap Table Translation * Автор: Zhixin wen <[email protected]> */(function ($) {'strict'; $ .fn.bootStraptable.locales ['zh-cn'] = {FormatloadingMessge: function () {return 'Работаю усердно, чтобы загрузить данные, пожалуйста, wabt-funcerecrecrecerecerecerecerecer: funceRecrece. (PageNumber) {return «Показ на страницу ' + pageNumber +' record '; {return 'not speaking rebute'; «Обновление»;
Вы можете сразу увидеть, что после цитирования файла JS при загрузке вы молитесь за эффект инициализации. Конвертируйте некоторую отображаемую информацию в соответствующий содержимое среднего.
2. Далее, давайте поговорим о соответствующем HTML -коде. На самом деле, это единственная часть HTML-кода, связанного с начальной таблицей.
<table id="teacher_table" data-toggle="table" data-url="./data.php" data-method="post" data-query-params="queryParams" data-toolbar="#toolbar" data-pagination="true" data-search="true" data-show-refresh="true" data-show-toggle="true" data-show-columns="true" data-page-size = "5"> <thead> <tr> <th Data-field = "name"> Учетная запись пользователя </th> <th Data-field = "pwd"> Пароль пользователя </th> <th Data-field = "t_name"> Имя учителя </th> </tr> </thead> </table>
Да, существует только один тег таблицы, плюс много параметров, и форма таблицы реализована с помощью этих параметров. Вы должны знать, какие есть стили и функции. Просто перечисляя их, это определенно будет каплей в ведре. Лучше научить людей, как ловить рыбу, чем учить людей, как ловить рыбу. Я скажу вам, где найти эти категории. Значение класса. Мы можем перейти на профессиональный веб-сайт Bootstrap-Table, чтобы найти ссылку, которую я использую. Нажмите, чтобы открыть ссылку. Если он недействителен, вы можете напрямую ввести http://bootstrap-table.wenzhixin.net.cn/documentation
Конечно, вы также можете увидеть несколько примеров в примере
Как мы проверяем значение соответствующих параметров? Когда вы видите изображение выше, правая сторона - некоторые параметры, вы можете выбрать атрибуты таблицы, атрибуты строк и события привязки, которые вы можете установить.
Нажмите параметры таблицы таблицы, чтобы отобразить следующий рисунок. Во -первых, вы можете видеть, что название заголовка используется для JS для создания таблиц, а атрибут используется для HTML для создания таблиц.
Чтобы привести несколько примеров, в нашем вышеуказанном коде есть несколько параметров. Они имеют в виду:
Data-Url: URL-адрес для запроса данных.
Данные-Метод: Метод запроса.
высокая высота данных: установите высоту таблицы
Data-Query-params = "Queryparams": Настройки
data-toolbar = "#панель инструментов": установите контейнер, на который кнопка является идентификатором, панель инструментов.
data-pagination = "true": установить, отобразить ли номер страницы
data-search = "true": установите окно поиска
Data-show-refresh = "true": установите кнопку обновления
Data-Show-toggle = "true": установите формат отображения данных
Теперь вы должны понять, как это проверить!
Обратите внимание, что следующий код является ядром, <TR> представляет сетку в ряду, а Data-Field = "name" представляет имя данных в сетке в ряду. Вы можете понимать поля данных как идентификатор, потому что данные, передаваемые на фоне, отличаются на основе поля данных и кому отправляются.
<tr> <th Data-field = "name"> учетная запись пользователя </th> <th Data-field = "pwd"> пароль пользователя </th> <th Data-field = "t_name"> Имя учителя </th> </tr> </thead>
Для тех, кто не хочет использовать HTML Static Generation, вы также можете использовать JS для генерации динамической генерации. Чтобы дать демо, чтобы установить соответствующие параметры, вам нужно только использовать имя: параметры, упомянутые выше. Например, установите данные файла назначения Data-url для запроса данных в HTML: "./data.php" в JS, просто объявьте URL: "./data.php"
$ ('#table'). Bootstraptable ({Columns: [{Field: 'id', title: 'Id Id'}, {Field: 'name', title: 'имя элемента'}, {Field: 'Price', название: 'item Price'}], данные: [{id: 1, name: '$ 1', Price: '$ 1'}, {id: 2 -name: '$ 2': }]});3. Эффект начального стола после удаленного кода панели подобен
Просто нет панели.
4. Формат передачи данных, данные, полученные Bootstrap-Table, находятся в формате JSON по умолчанию
Вы можете увидеть выше, что запрошенный фоновый адрес: «./data.php», давайте посмотрим на его контент
<? Php $ Results [0] = Array ("name" => "aoze", "pwd" => "20132588", "t_name" => "Zhang San"); $ results [1] = array ("name" => "lisi", "pwd" => "1234", "t_name" => "li si"); $ results [2] = array ("name" => "wangwu", "pwd" => "44455", "t_name" => "wang wu"); echo json_encode ($ results);?>Это очень просто! Конечно, это всего лишь некоторые тестовые данные, которые я написал вручную, и, конечно, они найдены из базы данных в проекте.
5. Конечно, недостаточно просто отобразить данные. Нам нужно взаимодействовать с таблицей, такими как функции удаления и модификации. В настоящее время нам нужно использовать некоторые события Bootstrap-Table. В приведенном выше случае я встроил в таблицу два компонента кнопки, как показано на рисунке
Метод реализации этой мозаики состоит в том, чтобы добавить такую строку Data-Toolbar = "#панели инструментов" в свойства таблицы.
Это означает добавление метки с ID в качестве панели инструментов в линию на панели инструментов.
В моей реализации этого проекта вы должны использовать эти две кнопки для выполнения соответствующих операций в выбранной строке в таблице.
Запишите соответствующее событие, сначала приведите выбранное событие триггера с таблицей, а затем получите данные выбранной строки через функцию getSelectrow.
$ ('#wearm_table'). on ('click-row.bs.table', function (e, row, element) {$ ('. Успех'). removeClass ('успех'); // Удалить ранее выбранную строку, выберите стиль $ (element) .AdClass ('успех'); // Добавить в настоящее время выбранное стиль успеха для различия); function getSelectedRow () {var index = $ ('#wearming_table'). Найти ('tr.success'). Data ('index'); // Получить выбранную ряд naturdЕсли вы все еще хотите учиться глубже, вы можете нажать здесь, чтобы изучить и прикрепить к вам 3 захватывающих тем:
Начальная учебник по обучению
Bootstrap Practical Rutorial
Учебное пособие по использованию таблицы начальной загрузки
Учебное пособие по использованию плагина Bootstrap
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.