Bootstrap TableはBootstrapをベースにしたjQueryテーブルプラグインで、簡単な設(shè)定で単一選択、複數(shù)選択、並べ替え、ページング、編集、エクスポート、フィルタリング(展開)などの強(qiáng)力な機(jī)能を?qū)g現(xiàn)できます。この記事では、Bootstrap Table を使用してバックエンド管理システムを迅速かつ完璧に構(gòu)築する方法を主に紹介します。興味のある方は參考にしていただければ幸いです。

現(xiàn)在構(gòu)築しているアプリ管理およびバックエンド構(gòu)成システムは、さまざまな都市に合わせてカスタマイズされた構(gòu)成と、一部のバックエンド データの表示と操作を必要とするため、各モジュールは基本的にテーブル表示を持ちます。これの利點(diǎn)は、直感的であることです。そして操作が便利です。どのテーブル プラグインを使用するかについては、間違いなくブートストラップ テーブルです。強(qiáng)力な機(jī)能と完全なドキュメントがあり、私たちのプロジェクトもブートストラップ レイアウトに基づいているため、これを選択しました。次に、それを示すためにいくつかのプロジェクト コードを投稿します。 (參考用のみ)。

まず、ブートストラップのタブは、表示する異なるテーブルを切り替えるために使用されます。切り替えメニューのコードは次のとおりです:

 <p class="report-count">被舉報(bào)次數(shù)：${count}次</p>
  <ul class="report-btn nav nav-tabs" id="myTab" >
    <li class="pending active"><a href="#padding" onclick="freashTable(0)" data-toggle="tab">待處理：${stateCountList[0]}次</a><i class=""></i></li>
    <li class="success-report"><a href="#success-report" onclick="freashTable(1)" data-toggle="tab">舉報(bào)成立：${stateCountList[1]}次</a></li>
    <li class="fail-report"><a href="#fail-report" onclick="freashTable(2)" data-toggle="tab">舉報(bào)不成立：${stateCountList[2]}次</a></li>
  </ul>

必要な各ラベルに ｛data-toggle= を追加します。切り替え対象の「tab」｝を選択し、切り替えられた対応するサブコンテンツ｛アンカーポイントに合わせてアンカーポイントを追加します: href="#padding" rel="external nofollow"｝ と対応するサブコンテンツコードを以下のように切り替えます。 :

<p class="table-view tab-content">
      <p class=" tab-pane fade in active" id="padding">
       <p class="table-header clear">
        <c:forEach items="${complainCount1}" varStatus="i" var="c" >
         <p>${c.complain_reason}：${c.count}次</p>
        </c:forEach>
       </p>
       <p class="line addStyle"></p>
       <p>
        <table class="table"></table>
       </p>
      </p>
      <p class="tab-pane fade" id="success-report">
       <p class="table-header clear">
        <c:forEach items="${complainCount2}" varStatus="i" var="c" >
         <p>${c.complain_reason}：${c.count}次</p>
        </c:forEach>
       </p>
       <p class="line addStyle"></p>
       <p>
        <table class="table"></table>
       </p>
      </p>
      <p class="tab-pane fade" id="fail-report">
       <p class="table-header clear">
        <c:forEach items="${complainCount3}" varStatus="i" var="c" >
         <p>${c.complain_reason}：${c.count}次</p>
        </c:forEach>
       </p>
       <p class="line addStyle"></p>
       <p>
        <table class="table"></table>
       </p>
      </p>
     </p>

切り替える必要があるサブコンテンツ要素ごとに、上記のアンカーポイントに対応する ID {#padding} を設(shè)定し、外側(cè)のコンテナに (tab-content) を追加することを忘れないでください。サブ要素コンテナにクラス (タブペイン フェードイン アクティブ) を追加すると、アクティブなクラスがデフォルトで選択されます。各サブコンテンツにはテーブル要素があり、各タブを切り替えると、対応するテーブル データが更新され、表示されます。ここでは、テーブルを動(dòng)的に生成してデータをロードします。

var $table=$('.table')
function initTable(index){
  $table.bootstrapTable({
  url: '${basePath}/interacts/complain/getComplainList?pkid='+$("#pkid").val()+'&state='+index, //請求數(shù)據(jù)地址url
  height: getHeight(), //獲取行高
  striped: true, //設(shè)置為 true 會(huì)有隔行變色效果
  search: true, //為true會(huì)有搜索框
  showRefresh: true, //為true有刷新按鈕
  showColumns: true, //是否顯示 內(nèi)容列下拉框
  minimumCountColumns: 2,//當(dāng)列數(shù)小于此值時(shí)，將隱藏內(nèi)容列下拉框
  clickToSelect: true, //點(diǎn)擊行是checkbox或者rediobox選中
  detailView: true, //設(shè)置為 true 可以顯示詳細(xì)頁面模式。table第一行會(huì)有+號，點(diǎn)擊會(huì)出現(xiàn)更詳細(xì)的該行信息
  detailFormatter: 'detailFormatter', //格式化詳細(xì)頁面模式的視圖。
  pagination: true, //展示有分頁
  paginationLoop: false, //循環(huán)分頁
  sidePagination: 'server', //設(shè)置在哪里進(jìn)行分頁，可選值為 'client' 或者 'server'。設(shè)置 'server'時(shí)，必須設(shè)置 服務(wù)器數(shù)據(jù)地址（url）或者重寫ajax方法
  silentSort: false, //設(shè)置為 false 將在點(diǎn)擊分頁按鈕時(shí)，自動(dòng)記住排序項(xiàng)。僅在 sidePagination設(shè)置為 server時(shí)生效19   escape: true, //轉(zhuǎn)義HTML字符串，替換 &, <, >, ", `, 和 &#39; 字符.
  searchOnEnterKey: true, //設(shè)置為 true時(shí)，按回車觸發(fā)搜索方法，否則自動(dòng)觸發(fā)搜索方法
  idField: &#39;systemId&#39;, //指定主鍵
  maintainSelected: true, //設(shè)置為 true 在點(diǎn)擊分頁按鈕或搜索按鈕時(shí)，將記住checkbox的選擇項(xiàng)
  toolbar: &#39;#toolbar&#39;, //一個(gè)jQuery 選擇器，指明自定義的toolbar 
  columns: [
    {field: &#39;complain_reason&#39;, title: &#39;舉報(bào)類型&#39;,align: &#39;center&#39;},
    {field: &#39;nick_name&#39;, title: &#39;舉報(bào)人&#39;,align: &#39;center&#39;},
    {field: &#39;create_time&#39;, title: &#39;舉報(bào)時(shí)間&#39;,formatter:&#39;timeFormat&#39; },
    {field: &#39;complain_state&#39;, title: &#39;舉報(bào)狀態(tài)&#39;,formatter:&#39;stateFormat&#39;}
    {field: &#39;action&#39;, title: &#39;操作&#39;, align: &#39;center&#39;, formatter: &#39;actionFormatter&#39;, events: &#39;actionEvents&#39;, clickToSelect: false}
   ]
  });
}

上記は、各タブ切り替えメニューにonclickイベント関數(shù)refreshTable(index)があるため、切り替え時(shí)に異なるテーブルを更新するためにインデックスを渡す関數(shù)です。すべてのテーブル関數(shù)で使用される構(gòu)成を上記のコードにコメントしました。詳細(xì)な構(gòu)成を確認(rèn)したい場合は、公式 Web サイトの構(gòu)成 (http://bootstrap-table.wenzhixin.net.cn/zh-cn/) を參照してください。ドキュメンテーション/）。列は各行を構(gòu)成します。フィールドは各列に表示される対応するフィールド キー値です。タイトルは各列のヘッダーに対応します。フォーマッタは各列をフォーマットするカスタム関數(shù)です。時(shí)刻フォーマット関數(shù)コードのみを以下に示します:

function timeFormat(value,row,index){
  value = row.modifyTime==null?value:row.modifyTime;
 return new Date(parseInt(value)).toLocaleString().replace(/:\d{1,2}$/,' ');
 }

対応するフィールドが action である行は、アクション ボタンです。フォーマットされたアクション ボタンのコードは次のとおりです。

function actionFormatter(value, row, index) {
 return [
  &#39;<a class="update" href="javascript:;" onclick="editdateAction(\&#39;&#39; + row.systemId + &#39;\&#39;)" data-toggle="tooltip" title="Edit"><i class="glyphicon glyphicon-edit"></i></a>　&#39;,
  &#39;<a class="delete" href="javascript:;" onclick="deleteRowAction(\&#39;&#39;+row.systemId+&#39;\&#39;)" data-toggle="tooltip" title="Remove"><i class="glyphicon glyphicon-remove"></i></a>&#39;
 ].join(&#39;&#39;);
}

同時(shí)に、ページング ブートストラップにより、完全な設(shè)定 (表示される行數(shù)を含む) が提供されます。各ページ、ページング ボタン、項(xiàng)目の合計(jì)數(shù)、ページの合計(jì)數(shù)など) ですが、指定された行へのジャンプはないため、対応するページング列を見つけるために獨(dú)自のスタイルを記述する必要がありますが、関連するメソッドが提供されています。 ,

selectPage は指定されたページにジャンプするためのもので、自分でメソッドを作成できます:

function goPage(){
  var page=$('#pageNum').val();
  $table.bootstrapTable('selectPage',page)
 }

そのメソッドを使用するときは、$table.bootstrapTable('selectPage',page) を使用します。

関連する推奨事項(xiàng):

React Family Bucket を使用してバックエンド管理システムの例を構(gòu)築する方法の詳細(xì)な説明

thinkphp に基づいてバックエンド管理システム テンプレートを迅速に構(gòu)築する

バックエンドを迅速に構(gòu)築するためのブートストラップ テーブル管理システム

以上がBootstrap Table はバックエンド管理システムのコード共有を構(gòu)築しますの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。