Прежде всего, это простая форма страницы. Вы можете создавать HTML -таблицы в обычном способе рисования таблиц, а затем управлять специальными стилями и другими операциями через JS (преимущество заключается в том, что таблицы более интуитивно понятны, и удобно регулировать стили таблицы и т. Д., И скорость быстро))
Конечно, вы можете просто поместить таблицу на странице, и все последующие данные и стили можно контролировать через JS. Я скажу позже (преимущества удобны для управления и изменения данных, особенно формат JSON, полученный методом AJAX, но корректировка стиля является более проблематичной).
PS: Это официальный веб-сайт плагина, который содержит английские API и примеры: http://bootstrap-table.wenzhixin.net.cn/zh-cn/
Кроме того, перед использованием, пожалуйста, введите связанные с Bootstrap CSS, JS, JQUERY и Bootstrap-Table CSS, JS, по крайней мере, эти 5 основных файлов.
1. Метод формы HTML
Пример 1: Требования, простая презентация данных таблицы, заголовок - два ряда, и есть стрелка, которая плавает вверх и вниз
Анализ: это очень просто. Вам нужно только HTML для его реализации. Нарисуйте в соответствии с обычной таблицей и добавьте уникальные пользовательские атрибуты Bootstrap Table. Обратите внимание, что если вы не используете JS, пожалуйста, добавьте Data-Toggle в начальную тег таблицы.
HTML -код:
<div> <Таблица Data-toggle = "table" data-helight = "268" id = "tablel01"> <thead> <tr> <th Data-field = "lhc" data-rowspan = "2" data-align = "center" data-valign = "middle"> для привлечения </th> <th Data-sield = "dato-colron =" 3 "data-align =" "val v" v "v" v "val =" "val v" v "val =" "/" Day </th> <th Data-field = "bz" data-colspan = "3" data-align = "center" data-valign = "middle"> на этой неделе </th> <th Data-field = "by" data-colspan = "3" data-align = "Центр"-valign = "Middle"> этот месяц </th> </tr> <tr> <trt-field = "DRBQ" DATA-al "DATIIGN =" DRBQ "DATIIGN =" DRBQ "DATIINIGN =" DRBQ "DATIIGN =" DRBQ "DATIIGN =" DRBQ "DATIIGN =" DRBQ "DATIGN =" DRBQ "DATIGN =" DRBQ ". data-valign = "middle"> эта проблема </th> <th Data-field = "drtb" data-align = "center" data-valign = "middle"> Годовой год </th> <th Data-field = "DRHB" data-align = "center" data-valign = "Middle"> Middle-Month </th> <th Data-sield = "bzbq" data-align = "" middio-v-verign = "" data-V-VALIGE = "" middle-V-VALIGN = ""> "" Data-V-VALIGE = ""> "" Data-V-VALIGN = ""/" Проблема </th> <th Data-field = "bztb" data-align = "center" data-valign = ">"> Годовой год </th> <th Data-field = "bzhb" data-align = "center" valign = "middle"> moonmonth </th> <th Data-field = "bybq" data-align = "Центр данных". data-field = "bytb" data-align = "center" data-valign = "middle"> Годовой год </th> <th Data-field = "byhb" data align = "center" data-valign = "middle"> moq </th> </tr> </thead> <tbody> <tr> <td> </td> <td> <td> 21341 <Tbody> <td> <Td> </td> <Td> 21341 <TBODY> <TD> <TD> </TD> <TD> 21341 <TBODY> class = 'glyphicon Glyphicon-arrow-down'> </i> 0,31 </td> <td> <i class = 'glyphicon Glyphicon-up-up'> </i> 0,21 </td> <td> 334322 </td> <td> <i class = 'glyphicon Glyphicon-rrow-down '> </i> 1.13 </td> <td> <i class =' Glyphicon Glyphicon-up-up '> </i> 4.21 </td> <td> 3125113 </td> <td> <i class =' glyphicon Glyphicon-harrow-down '> </i> 2.21 </> 2.21 </> 2.21 </> </> 2.21 </> 2.21 </> 2.21 </> 2.21 </> 2.21 </> 2.21 </> 2.21 </> 2.21 </> 2. 2 </td. Class = 'Glyphicon Glyphicon-rrow-up'> </i> 2.94 </td> </tr> <tr> <td> входящий объем угля </td> <td> 76573 </td> <td> <i class = 'Glyphicon glyphicon-undow Glyphicon-rrow-down '> </i> 4.21 </td> <td> <i class =' Glyphicon Glyphicon-up-up '> </i> 1.45 </td> <td> 234534 </td> <td> <i class =' glyphicon Glyphicon-orrow-down '> </i> 4.35 4.3 4.3 4.3 4.1 </> 4.35 </> 4.3 4. Class = 'Glyphicon Glyphicon-rrow-up'> </i> 2,75 </td> <td> 44225 </td> <td> <i class = 'glyphicon Glyphicon-hound-down'> </i> 0,74 </td> <td> <i class = 'glyphicon Glyphicon-rrow-up '> </i> 3.45 </td> </tr> <tr> <td> Потребление угля </td> <td> 43363 </td> <td> <i class =' Glyphicon Glyphicon-row-down '> </i> 0.31 </td> <td> Glyphicon-rrow-up '> </i> 0,21 </td> <td> 32422 </td> <td> <i class =' glyphicon Glyphicon-rhrow-down '> </i> 1.13 </td> <td> <i class =' glyphicon glyphicon-orrow-down '> </i> 1.13 </13 </> 1.13 </> 1.13 </> 1.13 </> 1.13 </> 1.13 </> 1.13 </> 1.13 </> 1.13 </> 1.13 </> 1.13. class = 'glyphicon Glyphicon-rrow-up'> </i> 4.21 </td> <td> 13345 </td> <td> <i class = 'Glyphicon Glyphicon-undow Glyphicon-rrow-up '> </i> 2.94 </td> </tr> <tr> <td> входящий объем угля </td> <td> 34624 </td> <td> <i class =' Glyphicon Glyphicon-undown '> </i> 4.35 </td> <td> Glyphicon-rrow-up '> </i> 1.23 </td> <td> 452346 </td> <td> <i class =' Glyphicon Glyphicon-row-down '> </i> 2,32 </td> <td> <i class =' Glyphicon Glyphicon-rrow-up '> </i> 0,05 </td> <td> 94524 </td> <td> <i class =' glyphicon Glyphicon-row-down '> </i> 2.21 </td> <td> <i class =' glyphicon Glyphicon-rrow-up '> </i> 2.94 </td> </tr> <tr> <td> Потребление угля </td> <td> 21341 </td> <td> <i class =' Glyphicon Glyphicon-oud-down '> </i> 0,31 </td> <td> Glyphicon-rrow-up '> </i> 0,21 </td> <td> 334322 </td> <td> <i class =' Glyphicon Glyphicon-row-down '> </i> 1.13 </td> <td> <i class =' glyphicon Glyphicon-down-down '> </> 1.13 </> 1.13 </> 1.13 </> 1.13 </> 1.13 </> 1.13 </> 1.13 </> 1.13 </> 1.13 </> 1.13 </> 1.13 </> 1.13 </> 1.13 </> 1.13 </> 1.13 </> 1.13 </> 1.13 </> 1.13 </td> Class = 'Glyphicon Glyphicon-rrow-up'> </i> 4.21 </td> <td> 3125113 </td> <td> <i class = 'glyphicon Glyphicon-harrow-down'> </i> 2,21 </td> <td> <i class = 'glyphicon Glyphicon-rrow-up '> </i> 2.94 </td> </tr> <tr> <td> Потребление угля </td> <td> 21341 </td> <td> <i class =' Glyphicon Glyphicon-oud-down '> </i> 0,31 </td> <td> Glyphicon-rrow-up '> </i> 0,21 </td> <td> 334322 </td> <td> <i class =' glyphicon Glyphicon-row-down '> </i> 1.13 </td> <td> <i class =' Glyphicon Glyphicon-rrow-up '> </i> 4.21 </td> <td> 3125113 </td> <td> <i class =' glyphicon Glyphicon-row-down '> </i> 2,21 </td> <td> <i class =' Glyphicon Glyphicon-orrow-down '> </i >.21 </> </> 2.21 </> </> 2.21 </> <//> 2 </> </> 2.1 </> </> 2.21 </> </> 2.1 </> </> 2.1 </>. Class = 'Glyphicon Glyphicon-rrow-up'> </i> 2.94 </td> </tr> <tr> <td> Потребление угля </td> <td> 21341 </td> <td> <i class = 'Glyphicon Glyphicon-row-Down'> </i> 0.31 </td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> Glyphicon-rrow-up '> </i> 0,21 </td> <td> 334322 </td> <td> <i class =' Glyphicon Glyphicon-row-down '> </i> 1.13 </td> <td> <i class =' glyphicon Glyphicon-down-down '> </> 1.13 </> 1.13 </> 1.13 </> 1.13 </> 1.13 </> 1.13 </> 1.13 </> 1.13 </> 1.13 </> 1.13 </> 1.13 </> 1.13 </> 1.13 </> 1.13 </> 1.13 </> 1.13 </> 1.13 </> 1.13 </td> Class = 'Glyphicon Glyphicon-rrow-up'> </i> 4.21 </td> <td> 3125113 </td> <td> <i class = 'glyphicon Glyphicon-harrow-down'> </i> 2,21 </td> <td> <i class = 'glyphicon Glyphicon-rrow-up '> </i> 2.94 </td> </tr> <tr> <td> Потребление угля </td> <td> 21341 </td> <td> <i class =' Glyphicon Glyphicon-oud-down '> </i> 0,31 </td> <td> Glyphicon-rrow-up '> </i> 0,21 </td> <td> 334322 </td> <td> <i class =' glyphicon Glyphicon-row-down '> </i> 1.13 </td> <td> <i class =' Glyphicon Glyphicon-rrow-up '> </i> 4.21 </td> <td> 3125113 </td> <td> <i class =' glyphicon Glyphicon-row-down '> </i> 2,21 </td> <td> <i class =' Glyphicon Glyphicon-orrow-down '> </i >.21 </> </> 2.21 </> </> 2.21 </> <//> 2 </> </> 2.1 </> </> 2.21 </> </> 2.1 </> </> 2.1 </>. Class = 'Glyphicon Glyphicon-rrow-up'> </i> 2.94 </td> </tr> <tr> <td> Потребление угля </td> <td> 21341 </td> <td> <i class = 'Glyphicon Glyphicon-row-Down'> </i> 0.31 </td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> Glyphicon-rrow-up '> </i> 0,21 </td> <td> 334322 </td> <td> <i class =' Glyphicon Glyphicon-row-down '> </i> 1.13 </td> <td> <i class =' glyphicon Glyphicon-down-down '> </> 1.13 </> 1.13 </> 1.13 </> 1.13 </> 1.13 </> 1.13 </> 1.13 </> 1.13 </> 1.13 </> 1.13 </> 1.13 </> 1.13 </> 1.13 </> 1.13 </> 1.13 </> 1.13 </> 1.13 </> 1.13 </td> Class = 'Glyphicon Glyphicon-rrow-up'> </i> 4.21 </td> <td> 3125113 </td> <td> <i class = 'glyphicon Glyphicon-harrow-down'> </i> 2,21 </td> <td> <i class = 'glyphicon Glyphicon-rrow-up '> </i> 2.94 </td> </tr> <tr> <td> Потребление угля </td> <td> 21341 </td> <td> <i class =' Glyphicon Glyphicon-oud-down '> </i> 0,31 </td> <td> Glyphicon-rrow-up '> </i> 0,21 </td> <td> 334322 </td> <td> <i class =' glyphicon Glyphicon-row-down '> </i> 1.13 </td> <td> <i class =' Glyphicon Glyphicon-rrow-up '> </i> 4.21 </td> <td> 3125113 </td> <td> <i class =' glyphicon Glyphicon-row-down '> </i> 2.21 </td> <td> <i class =' Glyphicon glyphicon-rrow-up '> </i> 2.94 </td> </tbody> </table> </div>
Пример 2: Требования: Существует пользовательская ячейка, которая отображает прогресс после второй таблицы, а первая строка требует общего статистического дисплея. Эти две функции требуют использования JS для установки пользовательских строк и столбцов.
HTML -код:
<div> <Таблица Data-toggle = "table" data-hight = "268" id = "tablel02"> <thead> <tr> <th Data-field = "id" data-align = "center" data-valign = "middle"> serial number </th> <th Data-field = "gys" data-align = "center" valign = "middle"> optier </th th Data-field = prefield <fze-field = pre-field <prefield = prefield <prefield = prield </th Th-поставщик. data-align="center" data-valign="middle">Variety</th><th data-field="rz" data-align="center" data-valign="middle">Carbon value</th><th data-field="mj" data-align="center" data-valign="middle">Coal price</th><th data-field="bmdj" data-align="center" data-valign="middle">Unit Coal </th> <th Data-field = "drlm" data-align = "center" data-valign = "> совокупный уголь </th> <th Data-Field =" ljlm "data-align =" Центр "-valign =" Средний "> Совокупный уголь </th> <th Data-field =" yjhl "data-align =" Центр Data-Valign </th> <th Data-field = "yjhl" data-align = "data-Volign =" Запланированная Volume = "yjhl" th (yjhl 'align = ". data-field = "yjhjd" data-align = "center" data-valign = "middle" formatter = "progress"> ежемесячное запланированное прогресс завершения </th> </tr> </thead> <tbody> <tr> <td> 2 </td> <td> Шуансин. уголь </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> 6686.08 </td> <td> 30000 </td> <td> 22%</td> </tr> <tr> <td> 3 <TD> <Td>. Ltd. уголь </td> <td> </td> <td> </td> <td> </td> <td> 20041.86 </td> <td> 90000 </td> <td> 100%</td> <td> <td> 5 </td> <td> aidi Energy уголь </td> <td> </td> <td> </td> <td> </td> <td> 5191.08 </td> <td> 30000 </td> <td> 0%</td> </tr> <tr> <td> 6 </td> <td> hengtai alul> </td> <Td> и высокий и высокий Уголь </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> 18265,56 </td> <td> 0 </td> <td> 22%</td> </tr> <tr> <td> 7 </td> <td> shuangx </td> shuangx </td> shuangx </td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> Серного угольного угля Mining </td> <td> низкая сульфура уголь </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> 6686.08 </td> <td> 30000 </td> <td> 22%</td> </td> <td> <td> 9 <TD> <Td> <td> 9 <TD> <TD> <Td> 9 <TD> <TD> <TD> 9 <TD> <TD> <TD> 9 <TD> <TD> Mining </td> <td> Уголь с низким содержанием сульфы </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> 6686.08 </td> <td> 30000 </td> <td> 22%</td> </td> </td> </td>
JS -код:
// Объявите переменную, используемую для подсчета общего (накопленного угля, ежемесячного плана) var yjharr = []; var ljlmarr = []; // пользовательская функция столбца (значение, row) {var width = parseint (row.yjhjd); var red = '#e63737'; Blue = ' #b6ccf4'; yjharr.push (row.yjhl); ljlmarr.push (row.ljlm); return "<div style = 'height: 20px; граница: 1px solid #b6ccf4;'> <span style = 'Дисплей: блок; float: width:"+width+"%; (ширина> = 100? Red: Blue)+"; '>"+value+"</span> </div>"} // Метод для расчета функции общего значения yjhtotal () {var subyjh = 0; var subljlm = 0; var row = []; for (var var i = 0; i <yjharr.length; i ++) {if (yjharr [i] == ") {yjharr [i] = 0;} subyjh+= parsefloat (yjharr [i]);} for (var i = 0; i <yjharr.length; i ++) {if (yjharr [i] == ") {yjharr [i] = 0;} subyjh+= parsefloat (yjharr [i]);} for (var j = 0; j <ljlmarr.length; j ++) {if (ljlmarr [j] == "") {ljlmarr [j] = 0;} subljlm+= parsefloat (ljlmarr [j]);} row.push ({id: 1, Gys: 'total', pz: '', rz: '', mj: '', bmdj: '', drlm: '', ljlm: subljlm.tofixed (2), yjhl: subyjh, yjhjd: '107%'}); return ряд}Анализ: Пользовательские строки и столбцы должны добавить данные Data-formatter = 'Имя метода', где будет выполнена строка параметров в методе Progress (), как только будет сгенерирована каждая строка, и объект строки передается, когда таблица генерирует строки.
Два: метод JS
С помощью этого метода очень удобно установить параметры для таблицы, что очень удобно для обработки данных, особенно при настройке метода и адреса запроса. Тем не менее, этот проект на данный момент является просто статической страницей. Пожалуйста, напишите данные в будущем.
Пример 1: То же, что и выше
HTML:
<div> <Таблица идентификатор = "tablel01"> </table> </div>
JS:
// Плагин таблицы (Таблица 1) Запускается $ ('#tablel01'). Bootstraptable ({height: 268, // смоделированные столбцы данных: [[{Align: 'Center', Valign: 'Middle', Field: 'LHC', название: 'to Usume', Rowsspan: 2}, {align: 'Center', Valign: 'Middle', Field: Dr ', Dr', Dr ', Dr', Dr ', Dr', DR ', DR', DR ', DR', DR ', DR', DR ', DR', DR ', DR', DR ', DR', DR ', DR', DR ', поля: «Day», Colspan: 3}, {Align: 'Center', Valign: 'Middle', Field: 'Bz', Tilting: «На этой неделе», ColSpan: 3}, {Align: 'Center', Valign: 'Middle', Field: 'by', Title: «Этот месяц», Colspan: 3}], [{align: 'Центр', Valign: 'Средний: Выпуск '}, {Align:' Center ', Valign:' Middle ', Field:' DRTB ', TILE:' «Годовой год», Formatter: Trend}, {Align: 'Center', Valign: 'Middle', Field: 'Drhb', название: 'Momentum', Formatter: Trend}, {align: 'Center', Valign: 'Middle', Trend ', Trend}, wyse', Teal: ', Teal:', Teal: ', Teal:', Teal: 'strenge: {Align: 'Center', Valign: 'Middle', Field: 'bztb', название: «Годовой год», Formatter: Trend}, {Align: 'Center', Valign: 'Middle', Field: 'Bzhb', название: 'Moon-month', форматтер: Trend}, {align: 'center:' Middle ', «Поле»: Проблема '}, {Align:' Center ', Valign:' Middle ', Field:' Bytb ', название:' «Годовой год», Formatter: Trend}, {Align: 'Center', Valign: 'Middle', Field: 'Bytb', Название: '«Годовой год», Formatter: Trend}, {align:' Center ', Valign:' Middle ', Field', Trend}, {Align: 'Center', Valign: ', «Middle', поля: 'Mono-Montth', Formatter: Trend}], Data: [{id: 1, lhc: 'Приходи Stock ', DRBQ:' 21341 ', DRTB:' 0,21 ', DRHB:' 0,33 ', BZBQ:' 35624 ', BZTB:' 1,62 ', BZHB:' 3.16 ', BYBQ:' 42613 ', BYTB:' 2.78 ', Byhb:' 1,59 ', {ID, {Id Stock ', DRBQ:' 21341 ', DRTB:' 0,21 ', D RHB:' 0,33 ', BZBQ:' 35624 ', BZTB:' 1,62 ', BZHB:' 3.16 ', BYBQ:' 42613 ', BYTB:' 2.78 ', byhb:' 1,59 '{ID:' Stock ', DRBQ:' 21341 ', DRTB:' 0,21 ', DRHB:' 0,33 ', BZBQ:' 35624 ', BZTB:' 1,62 ', BZHB:' 3.16 ', BYBQ:' 42613 ', BYTB:' 2.78 ', Byhb:' 1,59 ', {ID Stock ', DRBQ:' 21341 ', DRTB:' 0,21 ', DRHB:' 0,33 ', BZBQ:' 35624 ', BZTB:' 1,62 ', BZHB:' 3.16 ', BYBQ:' 42613 ', BYTB:' 2.78 ', Byhb:' 1,59 ', {ID:' ID: ' Stock ', DRBQ:' 21341 ', DRTB:' 0,21 ', DRHB:' 0,33 ', BZBQ ::::' 35624 ', BZTB:' 1,62 ', BZHB:' 3.16 ', BYBQ:' 42613 ', bytb:' 2,78 ', byhb:' 1,59 ', ID Stock ', DRBQ:' 21341 ', DRTB:' 0,21 ', DRHB:' 0,33 ', BZBQ:' 35624 ', BZTB:' 1,62 ', BZHB:' 3.16 ', BYBQ:' 42613 ', BYTB:' 2.78 ', Byhb:' 1,59 ', {I D: 7,' Stock ', DRBQ:' 21341 ', DRTB:' 0,21 ', DRHB:' 0,33 ', BZBQ:' 35624 ', BZTB:' 1,62 ', BZHB:' 3.16 ', BYBQ:' 42613 ', BYTB:' 2.78 ', Byhb:' 1,59 ', {ID Stock ', DRBQ:' 21341 ', DRTB:' 0,21 ', DRHB:' 0,33 ', BZBQ:' 35624 ', BZTB:' 1 Stock ', DRBQ:' 21341 ', DRTB:' 0,21 ', DRHB:' 0,33 ', BZBQ:' 35624 ', BZTB:' 1,62 ', BZHB:' 3.16 ', BYBQ:' 42613 ', BYTB:' 2,78 ', byhb:' 1,59 ', {ID:' ID: 'ID Stock ', D RBQ:' 21341 ', DRTB:' 0,21 ', DRHB:' 0,33 ', BZBQ:' 35624 ', BZTB:' 1,62 ', BZHB:' 3.16 ', BYBQ:' 42613 ', BYTB:' 2,78 ', Byhb:' 1,59 ', {ID Stock ', DRBQ:' 21341 ', DRTB:' 0,21 ', DRHB:' 0,33 ', BZBQ:' 35624 ', BZTB:' 1,62 ', BZHB:' 3.16 ', BYBQ:' 42613 ', BYTB:' 2.78 ', Byhb:' 1,59 ', {ID:' Stock ', DRBQ:' 21341 ', DRTB:' 0,21 ', DRHB:' 0,33 ', BZBQ:' 35624 ', BZTB:' 1,62 ', BZHB:' 3.16 ', BYBQ:' 42613 ', BYTB:' 2,78 ', byhb:' 1,59 '}'//////ветные данные:////эд. Вверх и вниз тренд стиля со стрелками (значение, row) {var trendicon = row.id%2 === 0?Анализ: $ ('#tablel01'). Bootstraptable ({})-это флаг в начале плагина, добавляя параметры таблицы, а затем в данных: есть данные таблицы, а в столбцах это место, где установлены параметры столбца и данные таблицы. Репрезентативная вещь об этом элементе заключается в том, что заголовок таблицы разделен на две части, поэтому необходимо добавить два массива в столбцы [{}] и [{}]. Все они были записаны в массиве раньше, и исходный код пересекал длину столбцов
Пример 2:
Тот же HTML требует только тега таблицы с идентификатором
JS:
// плагин таблицы (Таблица 2) Запускается // Объявление переменных, используемых для подсчета общего (накопленного угля, ежемесячного плана) var yjharr = []; var ljlmarr = []; $ ('#tablel02'). Bootstraptable ({height: 268, // смоделированные столбцы данных: [{align: 'Center', Valign: 'Middle', поля: ', идентификатор:', идентификатор: {align:'center',valign:'middle',field: 'gys',title: 'supplier'}, {align:'center',valign:'middle',field: 'pz',title: 'Variety'},{align:'center',valign:'middle',field: 'rz',title: 'caloric value'},{align:'center',valign:'middle',field: 'MJ', название: 'цена угля'}, {Align: 'Center', Valign: 'Middle', Field: 'bmdj', название: 'Стандартная цена за единицу угля'}, {Align: 'Center', Valign: 'Middle', Field: 'DRLM', Title: 'Уголь подходит к дню'}, {Align: 'Center:' Valign: 'Средний: Day '}, {Align:' Center ', Valign:' Middle ', Field:' ljlm ', заголовок: «Совокупный угольный приход»}, {Align:' Center ', Valign:' Middle ', Field:' yjhl ', Название: «Месячный запланированный том'}, {Alignly: 'Center', Valign: 'Middle:' Middle: 'yemly infort:' ytemplion: 'aleft inflect:' ytemplion: 'aleftion’ Прогресс ', Formatter: Progress}], Data: [{id: 2, Gys:' Shuangxin Mining ', PZ:' низкая сера Coal ', rz:' ', mj:' ', bmdj:' ', drlm:' ', ljlm:' 6686.08 ', yjhl:' 30000 ', yjhjd: '22%'}, {id: 3, Gys: 'Yitai Co., Ltd.', Pz: 'Engrienering Coal ', RZ:' ', MJ:' ', Bmdj:' ', D rlm:' ', ljlm:' 51888.72 ', yjhl:' 70000 ', yjhjd: '74%'}, {id: 4, gys: 'Jiayuan Company', Pz: 'Средний и Высокий Sulfur Coal ', rz:' ', mj:' ', bmdj:' ', drlm:' ', ljlm:' 20041.86 ', yjhl:' 90000 ', yjhjd:' 100%'}, {id: 5, gys:' aidi ery J: '', bmdj: '', drlm: '', ljlm: '5191.08', yjhl: '', yjhjd: '0%'}, {id: 6, gys: 'hengtai ale', pz: 'средний серный Coal ', rz:' ', mj:' ', bmdj:' ', drlm:' ', ljlm:' 18265.56 ', yjhl:' ', yjhjd:' 0%'}, {id: 6, gys:' hengtai Coal ', pz:' Средний серый уголь ', rz:', ',', ' MJ: '', bmdj: '', drlm: '', ljlm: '18265.56', yjhl: '', yjhjd: '0%'}, {id: 6, gys: 'hengtai ale', pz: 'средний серный Coal ', rz:' ', mj:' ', bmdj:' ', drlm:' ', ljlm:' 18265.56 ', yjhl:' ', yjhjd:' 0%'}]}); // end моделирования // red = '#e63737'; var blue = '#b6ccf4'; yjharr.push (row.yjhl); ljlmarr.push (row.ljlm); return "<div style = 'Высота: 20px; граница: 1px solid#b6ccf4; style = 'display: block; float: left; width: "+width+"%; высота: 100%; фоновый цвет: "+(ширина> = 100? Red: blue)+";'> "+value+" </span> </div> "} // Метод для расчета общего значения функции yjhtotal () {var subyjh = 0; i = 0; i <yjharr.length; i ++) {if (yjharr [i] == ") {yjharr [i] = 0;} subyjh+= parsefloat (yjharr [i]);} for (var i = 0; j = 0; j <ljlmarr.length; j ++) {if (ljlmarr [j] == "") {ljlmarr [j] = 0;} subljlm+= parsefloat (ljlmarr [j]);} row.pus h ({id: 1, gys: 'total', pz: '', rz: '', mj: '', bmdj: '', drlm: '', ljlm: subljlm, yjhl: subyjh, yjhjd: '107%'}); return ряд}На самом деле это не сильно отличается от первого метода, просто вы помещаете пользовательские столбцы в данные и устанавливаете их. Это легче понять. Для других параметров, пожалуйста, обратитесь к официальному веб -сайту. Данные динамичны и как добавить его в Интернете. Есть много примеров, если они помещаются в .bootStraptable ({})
Выше приведено адаптивный фиксированный заголовок подключаемого модуля формы таблицы Bootstrap, представленного редактором (очень полезно). Я надеюсь, что это будет полезно для всех. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит всем вовремя. Большое спасибо за вашу поддержку сайту wulin.com!