まず、シンプルなページフォームです。テーブルを描画する通常の方法でHTMLテーブルを作成し、JSを介して特別なスタイルやその他の操作を制御できます（テーブルがより直感的であり、テーブルスタイルなどを調整するのが便利であり、速度は高速です）
もちろん、ページにテーブルタグを配置するだけで、その後のすべてのデータとスタイルはJSを介して制御できます。後で言います（特にAJAXメソッドによって取得されたJSON形式を制御および変更するのに利点は便利ですが、スタイルの調整はより厄介です）
PS：これは、英語のAPIと例を含むプラグインの公式ウェブサイトです：http：//bootstrap-table.wenzhixin.net.cn/zh-cn/
また、使用する前に、Bootstrapに関連するCSS、JS、JQuery、およびBootstrap-Table CSS、JS、少なくともこれらの5つの基本ファイルを紹介してください。
1。HTMLフォームメソッド
例1：要件、単純なテーブルデータの表示、テーブルのヘッダーは2行で、上下に浮かぶ矢があります
分析：非常に簡単です。実装するにはHTMLだけが必要です。通常のテーブルに従って描画し、ブートストラップテーブルの一意のカスタム属性を追加します。 JSを使用していない場合は、最初のテーブルタグにデータトグルを追加してください。
HTMLコード：
<div> <table data-toggle = "table" data-height = "268" id = "table01"> <thead> <tr> <th data-field = "lhc" lowspan = "2" lagin = "data-align =" data-valign = "middle"> 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 = "center" data-valign = "middle" data-valign = "middule">この問題</th> <th data-field = "drtb" data-align = "center" data-valign = "middle"> year year </th data-field = "drhb" data-align = "center" data-valign = "middle"> moon-month </th> <th data-field = "bzbq" data-align " Issue </th> <th data-field = "bztb" data-align = "center" data-valign = "middle"> year year </th data-field = "bzhb" data-align = "center" data-valign = "middle"> moon-month </th> <th data-field = "bybq" data-align = "data-align =" midder "> data-field = "bytb" data-align = "center" data-valign = "middle"> year year </th> <th data-field = "byhb" align = "center" data-valign = "middle"> moq </th> </th> </thead> <tbody> <tr> <td> <td> </td> class = 'glyphicon glyphicon-arrow-down'> </i> 0.31 </td> <td> <i class = 'glyphicon glyphicon-arrow-up'> </i> 0.21 </td> <td> 334322 </td> <td> <i class = 'glyphicon glyphicon-arrow-down '> </i> 1.13 </td> <td> <i class =' glyphicon glyphicon-arrow-up '> </i> 4.21 </td> <td> 3125113 </td> <td> <i class =' glyphicon glyphicon-arrow-down '> </i> 2.21 </td> <td> <i class =' glyphicon glyphicon-arrow-up '> </i> 2.94 </td> </tr <tr> <tr> <tr> <tr> glyphicon-arrow-down '> </i> 4.21 </td> <td> <i class =' glyphicon glyphicon-arrow-down '> </i> 4.21 </td> <td> <i class =' glyphicon glyphicon-arrow-up '> </i> 1.45 </td> <td> 234534 </td> <td> <i class =' glyphicon glyphicon-arrow-down '> </i> glyphicon-arrow-up '> </i> 2.75 </td> <td> 44225 </td> <td> <i class =' glyphicon glyphicon-arrow-down '> </i> glyphicon-arrow-up '> </i> 3.45 </td> </tr> <tr> <td>石炭消費</td> <td> 43363 </td> <td> <i class =' glyphicon glyphicon-down '> </i> glyphicon-arrow-up '> </i> 0.21 </td> <td> 32422 </td> <td> <i class =' glyphicon glyphicon-arrow-down '> </i> </i> glyphicon-arrow-down '> </i> 1.13 </td> <td> <i class =' glyphicon glyphicon-arrow-up '> </i> 4.21 </td> <td> 13345 </td> <td> <i class =' glyphicon glyphicon-arrowdold '> class = 'glyphicon glyphicon-arrow-up'> </i> 2.94 </td> </tr> <tr> <td>着信石炭容積</td> <td> 34624 </td> <td> <i class = 'glyphicon glyphicon-arrow-down'> </i> 4.35 </i class = 'glyphicon glyphicon-arrow-up'> </i> 1.23 </td> <td> 452346 </td> <td> <i class = 'glyphicon glyphicon-arrow-down' glyphicon-arrow-up '> </i> 0.05 </td> <td> 94524 </td> <td> <i class =' glyphicon glyphicon-arrow-down '> </i> </td> <td> <i class =' glyphicon glyphicon-arrow-up '> </i> 2.94 </td> </tr> <tr <td>石炭消費</td> <td> 21341 </td> <td> <i class =' glyphicon-arrow-down '> </i> glyphicon-arrow-up '> </i> 0.21 </td> <td> 334322 </td> <td> <i class =' glyphicon glyphicon-arrow-down '> </i> glyphicon-arrow-down '> </i> 1.13 </td> <td> <i class =' glyphicon glyphicon-arrow-up '> </i> 4.21 </td> <td> 3125113 </td> <td> <i class =' glyphicon glyphicon-arrow-down '> </i> 2.21 </td> <td> <i class =' glyphicon glyphicon-arrow-up '> </i> 2.94 </td> </tr <tr> <td>石炭消費</td> <td> 21341 </td> <td> <i class = i clashon glyphicon-arrow-down '> </i> 0.31 </td> <td> <i class =' glyphicon glyphicon-arrow-up '> </i> 0.21 </td> <td> 334322 </td> <td> <i class =' glyphicon glyphicon-arrow-down '> </i> 1.13 </td> <td> <i class =' glyphicon glyphicon-arrow-up '> </i> 4.21 </td> <td> 3125113 </td> <td> <i class =' glyphicon glyphicon-arrow-down '> </i> 2.21 </td> <td> <i class =' glyphicon glyphicon-arrow-down '> </i> 2.21 </td> <td> <i class =' glyphicon glyphicon-arrow-up '> </i> 2.94 </td>消費</td> <td> 21341 </td> <td> <i class = 'glyphicon glyphicon-arrow-down'> </i> 0.31 </td> <td> <i class = 'glyphicon glyphicon-arrow-up'> </i> class = 'glyphicon glyphicon-arrow-down'> </i> 1.13 </td> <td> <i class = 'glyphicon glyphicon-arrow-down'> </i> 1.13 </td> <td> <i class = 'glyphicon glyphicon-arrow-up '> </i> 4.21 </td> <td> 3125113 </td> <td> <i class =' glyphicon glyphicon-arrow-down '> </i> </td> <td> <i class =' glyphicon glyphicon-arrow-up '> </i> 2.94 </td> </tr> <tr <td>石炭消費</td> <td> 21341 </td> <td> <i class =' glyphicon-arrow-down '> </i> glyphicon-arrow-up '> </i> 0.21 </td> <td> 334322 </td> <td> <i class =' glyphicon glyphicon-arrow-down '> </i> glyphicon-arrow-up '> </i> 4.21 </td> <td> 3125113 </td> <td> <i class =' glyphicon glyphicon-arrow-down '> </i> </td> <td> <i class =' glyphicon glyphicon-arrow-down '> </i> 2.21 </td> <td> <i class =' glyphicon glyphicon-arrow-up '> </i> 2.94 </td> </tr <tr> <td>石炭消費</td> <td> 21341 </td> <td> <i class = i clashon glyphicon-arrow-down '> </i> 0.31 </td> <td> <i class =' glyphicon glyphicon-arrow-up '> </i> 0.21 </td> <td> 334322 </td> <td> <i class =' glyphicon glyphicon-arrow-down '> </i> 1.13 </td> <td> <i class =' glyphicon glyphicon-arrow-down '> </i> 1.13 </td> <td> <i class =' glyphicon glyphicon-arrow-up '> </i> 4.21 </td> <td> 3125113 </td> <td> <i class =' glyphicon glyphicon-arrow-down '> </i> </td> <td> <i class =' glyphicon glyphicon-arrow-up '> </i> 2.94 </td> </tr> <tr <td>石炭消費</td> <td> 21341 </td> <td> <i class =' glyphicon-arrow-down '> </i> glyphicon-arrow-up '> </i> 0.21 </td> <td> 334322 </td> <td> <i class =' glyphicon glyphicon-arrow-down '> </i> glyphicon-arrow-up '> </i> 4.21 </td> <td> 3125113 </td> <td> <i class =' glyphicon glyphicon-arrow-down '> </i> </td> <td> <i class =' glyphicon glyphicon-arrow-up '> </i> 2.94 </td> </tbody> </table> </div>
例2：要件：2番目のテーブルの後に進行状況を表示するカスタムセルがあり、最初の行には合計統計ディスプレイが必要です。これらの2つの関数では、JSを使用してカスタム行と列を設定する必要があります。
HTMLコード：
<div> <table data-toggle = "table" data-height = "268" id = "table02"> <thead> <tr> <th data-field = "data-align =" center "data-valign =" middule ">シリアル番号</th> <th data-field =" gys "gys" data-align = "center" data-valign = ""> ">"> < data-align = "center" data-valign = "middle"> variety </th> <th data-field = "rz" data-align = "data-valign =" middule ">炭素値</th> <th data-field =" mj "data-align =" center "data-valign =" middle ">炭素価格</th <thデータフィールド= data-valign = "middule"> unit coal </th> <th data-field = "drlm" data-align = "center" data-valign = "middle">累積石炭</th> <th data-field = "ljlm" ljlm "ljlm" data-align = "center" data-valign = "middle"> cumulign </th> <thデータフィールド= " data-valign = "middle">毎月の計画ボリューム</th> <th data-field = "yjhjd" data-align = "center" data-valign = "middle" data-formatter = "progress">毎月の計画完了</tr </tr </tr </tr </tr </tr </tr </tr </tr </tr </tr </tr </tr </tr </td>石炭</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> 6686.08 </td> <td> 30000 </td> <td> 22％</td> </tr < Ltd。</td> <td> Engineering Coal </td> <td> </td> <td> </td> <td> 51888 .72 </td> <td> 70000 </td> <td> 74％</td> </tr> <td>硫黄石炭</td> <td> </td> <td> </td> <td> </td> <td> 20041.86 </td> <td> 90000 </td> <td> 100％</td> </tr> <td> 5 </td>石炭</td> <td> </td> <td> </td> <td> </td> <td> 5191.08 </td> <td> 30000 </td> <td> 0％</td> </tr> <tr> <td> 6 </td> <td> hengtai coal </td>石炭</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> 18265.56 </td> <td> 0 </td> <td> 22％</td> </tr> <td>硫黄石炭</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> 6686.08 </td> <td> 30000 </td> <td> 22％</td> </td> <td> 8 </td> </td> </td> <マイニング</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> <td>低硫黄炭</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> 6686.08 </td> <td> 30000 </td> <td> 22％</td>
JSコード：
//合計（蓄積された石炭、毎月計画）var yjharr = []; var ljlmarr = []; //カスタム列関数の進行状況（val、row）{var width = parseint（row.yjhjd）; var red = '＃e63737'; var var blue = '＃b6ccf4'; yjharr.push（row.yjhl）; ljlmarr.push（row.ljlm）; return "<div style = 'height：20px; border：1px solid＃b6ccf4;'> <span style = 'ディスプレイ：ブロック;フロート：左; （width> = 100？red：blue）+"; '>"+value+"</span> </div>"} //合計値関数を計算する方法yjhtotal（）{var subyjh = 0; var subljlm = 0; var row = []; i = 0; i <yjharr.length; i ++）{if（yjharr [i] == ""）{yjharr [i] = 0;} subyjh+= parsefloat（yjharr [i]）;} for i = 0; i <yjharr.length; i ++）{if（yjharr [i] == ""）{yjharr [i] = 0;} subyjh+= parsefloat（yjharr [i]）;} for 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％'}）; 行}分析：カスタム行と列は、data-formatter = 'メソッド名'を追加する必要があります。ここで、進行状況（）メソッドのパラメーターの行がすべての行が生成されると実行され、テーブルが行を生成するときに行のオブジェクトが渡されます。
2：JSメソッド
この方法により、テーブルのパラメーターを設定することは非常に便利です。これは、特にリクエスト方法とアドレスを設定する場合、データを処理するのに非常に便利です。ただし、このプロジェクトは当面の間、静的なページにすぎません。将来データを書いてください。
例1：上記と同じ
HTML：
<div> <テーブルID = "table01"> </table> </div>
JS：
//テーブルプラグイン（表1）は$（ '＃tablel01'）を起動します。ブートストラップ可能（{height：268、//シミュレートされたデータ列：[[{align： 'center：' middle '、field：' lhc '、title：' to consume '、rowspan：2}、{align：' center： 'center： 'day'、colspan：3}、{align： 'center'、valign： 'middle'、field： 'bz'、title： 'this week'、colspan：3}、{align： 'center：' middle '、field：' by '、title：' this month '、colspan：3}] Issue '}、{align：' center '、valign：' middle '、field：' drtb '、title：' formater '、formatter：trend}、{align：' center '、valign：' middle '、' drhb '、title：' momentum '、formatter}、{align'、 'balign：' 'middle'、 '' bz '' bz '' bzbq '、 {align： 'center'、valign： 'middle'、field： 'bztb'、title： 'on-on year agle'、formatter：trend}、{align： 'center'、balign： 'middle'、field： 'bzhb'、title： 'moon-month'、formatter}、{align： 'bybq' '' middle： 'bybq' Issue '}、{align：' center '、valign：' middle '、field：' bytb '、title：' ae-on cering '、formatter：trend}、{align：' center '、valign：' middle '、' bytb '、タイトル：'前年同期 '、フォーマター}、{align：' center： 'balign：' balign： 'balign： 'Mono-month'、formatter：trend}]、data：[{id：1、lhc： 'coming在庫 '、drbq：' 21341 '、drtb：' 0.21 '、drhb：' 0.33 '、bzbq：' 35624 '、bztb：' 1.62 '、bzhb：' 3.16 '、bybq：' 42613 '、bytb：' 2.78 '、byhb：' 1.59 '}、ストック '、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 '}、在庫 '、drbq：' 21341 '、drtb：' 0.21 '、drhb：' 0.33 '、bzbq：' 35624 '、bztb：' 1.62 '、bzhb：' 3.16 '、bybq：' 42613 '、bytb：' 2.78 '、byhb：' 1.59 '>在庫 '、drbq：' 21341 '、drtb：' 0.21 '、drhb：' 0.33 '、bzbq：' 35624 '、bztb：' 1.62 '、bzhb：' 3.16 '、bybq：' 42613 '、bytb：' 2.78 '、byhb：' 1.59 '}、在庫 '、drbq：' 21341 '、drtb：' 0.21 '、drhb：' 0.33 '、bzbq :::' 35624 '、bztb：' 1.62 '、bzhb：' 3.16 '、bybq：' 42613 '、bytb：' 2.78、 '1.59'}在庫 '、drbq：' 21341 '、drtb：' 0.21 '、drhb：' 0.33 '、bzbq：' 35624 '、bztb：' 1.62 '、bzhb：' 3.16 '、bybq：' 42613 '、bytb：' 2.78 '、byhb：' 1.59 '}、byhb：' 1.59 '：'在庫 '、drbq：' 21341 '、drtb：' 0.21 '、drhb：' 0.33 '、bzbq：' 35624 '、bztb：' 1.62 '、bzhb：' 3.16 '、bybq：' 42613 '、bytb：' 2.78 '、byhb：' 1.59 '}、在庫 '、drbq：' 21341 '、drtb：' 0.21 '、drhb：' 0.33 '、bzbq：' 35624 '、bzhb：' 3.16 '、bybq：' 42613 '、bytb：' 2.78 '、' 1.59 '}在庫 '、drbq：' 21341 '、drtb：' 0.21 '、drhb：' 0.33 '、bzbq：' 35624 '、bztb：' 1.62 '、bzhb：' 3.16 '、bybq：' 42613 '、bytb：' 2.78 '、byhb：' 1.59 '}、在庫 '、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 '}在庫 '、drbq：' 21341 '、drtb：' 0.21 '、drhb：' 0.33 '、bzbq：' 35624 '、bztb：' 1.62 '、bzhb：' 3.16 '、bybq：' 42613 '、bytb：' 2.78 '、byhb：' 1.59 '}在庫 '、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？ 'glyphicon glyphicon-arrow-down'： 'glyphicon glyphicon-arrow-up'; return "<i class = '+trendicon+"'> </i>分析：$（ '＃tablel01'）。bootstraptable（{}）はプラグインの先頭にあるフラグであり、テーブルパラメーターを追加し、次にデータにテーブルデータであり、列では列パラメーターとテーブルデータが設定される場所です。このアイテムの代表的なことは、テーブルヘッダーが2つの部分に分割されているため、2つの配列を列[{{}]と[{}]に追加する必要があることです。それらはすべて以前に配列で書かれており、ソースコードは列の長さを通過しました
例2：
同じHTMLには、IDを持つテーブルタグのみが必要です
JS：
//テーブルプラグイン（表2）開始//合計（蓄積された石炭、月次計画）var yjharr = []; var ljlmarr = []; $（ '＃tablel02'）。 {align： 'center'、valign： 'middle'、field： 'gys'、title： 'supply'}、{align： 'center'、valign： 'middle'、field： 'pz'、title :: 'variety'}、{align： 'center、balign：' middle '、field：' rz '、' caloric '' center： 'mj'、title： '石炭価格'}、{align： 'center'、valign： 'middle'、field： 'bmdj'、title： 'starnder石炭単価'}、{align： 'center：' middle '、field：' drlm '、title：' coal coming to the day ' '石炭がその日に来る'}、{align： 'center'、valign： 'middle'、field： 'ljlm'、 '累積石炭到達'}、{align： 'center：' middle '、field：' yjhl '、title：' monthle planned bolume '}、{align：' center： 'balign：' balign： 'balign：' balign： 'center：' center：完了の進行状況 '、Formatter：Progress}]、data：[{id：2、gys：' shuangxin Mining '、pz：'低硫黄石炭 '、rz：' '、mj：' '、bmdj：' '、drlm：' '、ljlm：' 6686.08 '、yjhl：' 30000 '、yjhjd：'22％'}、{id：3、gys： 'yitai co.、ltd石炭 '、rz：' '、mj：' '、bmdj：' '、d rlm：' '、ljlm：' 51888.72 '、yjhl：' 70000 '、yjhjd：'74％'}、{id：4、gys： 'jiayuan company'、pz： 'medium and high sullur石炭 '、rz：' '、MJ：' '、bmdj：' '、drlm：' '、ljlm：' 20041.86 '、yjhl：' 90000 '、yjhjd：' 100％ '}、{id：5、gys：' aidi energy '、pz：' low sulfur '、rz：' '、 j： ''、bmdj： ''、drlm： ''、ljlm： '5191.08'、yjhl： ''、yjhjd： '0％'}、{id：6、gys： 'hengtai Coal'、pz： 'Medium-High Sulfur石炭 '、rz：' '、MJ：' '、bmdj：' '、drlm：' '、ljlm：' 18265.56 '、yjhl：' '、yjhjd：' 0％ '}、{id：6、gys：' hengtai coal '、pz MJ： ''、bmdj： ''、drlm： ''、ljlm： '18265.56'、yjhl： ''、yjhjd： '0％'}、{id：6、gys： 'hengtai coal'、pz： 'medium-high sulfur石炭 '、rz：' '、MJ：' '、bmdj：' '、drlm：' '、ljlm：' 18265.56 '、yjhl：' '、yjhjd：' 0％ '}]} red = '＃e63737'; var blue = '＃b6ccf4'; yjharr.push（row.yjhl）; ljlmarr.push（row.ljlm）; return "<div style = 'height：' height; border：border：1px solid＃b6ccf4; '> <span style = 'display：block; float：left; width： "+width+"％; height：100％; background-color： "+（width> = 100？red：blue）+";'> "+value+" </span> </div> "} //合計値を計算する方法i = 0; i <yjharr.length; i ++）{if（yjharr [i] == ""）{yjharr [i] = 0;} subyjh+= parsefloat（yjharr [i]）;} for i = 0; i <yjharr.length; i ++）{if（yjharr [i] == ""）{yjharr [i] = 0;} subyjh+= parsefloat（yjharr [i]）;} for 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 行}これは実際には最初の方法とそれほど違いはありません。カスタム列をデータに配置して設定するだけです。理解しやすいです。その他のパラメーターについては、公式Webサイトを参照してください。データは動的であり、オンラインで追加する方法です。それらが配置されている限り、多くの例があります。bootStraptable（{}）
上記は、エディターが紹介したブートストラップテーブルプラグインの適応固定テーブルヘッダー（Super hape）です。私はそれが誰にでも役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は、すべての人に時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！