Bootstrap Table est un plug-in de table jQuery basé sur Bootstrap. Avec des paramètres simples, vous pouvez disposer de fonctions puissantes telles que la sélection unique, la sélection multiple, le tri, la pagination, l'édition, l'exportation, le filtrage (expansion), etc. Cet article vous présente principalement comment créer rapidement et parfaitement un système de gestion backend avec Bootstrap Table. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer.

Le système de gestion d'applications et de configuration back-end que nous sommes actuellement en train de construire nécessite des configurations personnalisées pour différentes villes, ainsi qu'un affichage et des opérations de certaines données back-end, de sorte que chaque module peut fondamentalement L'avantage d'avoir une présentation sous forme de tableau est qu'il est intuitif et facile à utiliser. Quant au plug-in de table à utiliser, il s'agit sans aucun doute d'une table bootstrap. Elle possède des fonctions puissantes et une documentation complète, et notre projet est également basé sur la disposition bootstrap, nous l'avons donc choisi. Ensuite, je publierai du code de projet pour le montrer. (pour référence seulement).

Tout d'abord, l'onglet bootstrap est utilisé pour changer de table à afficher. Le code du menu de commutation est le suivant?:

 <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>

Je le crois. n'est pas utile pour le bootstrap, ajoutez {data-toggle="tab"} à chaque balise qui doit être commutée et ajoutez un point d'ancrage pour correspondre au sous-contenu commuté correspondant {point d'ancrage?: href="#padding" rel="external nofollow" " ｝, le code de sous-contenu correspondant pour le changement est le suivant?:

<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>

En définissant l'identifiant correspondant au point d'ancrage ci-dessus pour chaque élément de sous-contenu qui doit être commuté, {#padding}, et n'oubliez pas d'ajouter (onglet-contenu) au conteneur externe et à la classe (fondu du volet d'onglet actif) au conteneur de sous-éléments. avec actif sont sélectionnés par défaut. Chaque sous-contenu a un élément de tableau, voici donc le tableau dont nous avons besoin. Changer chaque onglet actualisera et affichera les données du tableau correspondant. Ici, nous chargeons des données en générant dynamiquement des tables.

var $table=$('.table')
function initTable(index){
  $table.bootstrapTable({
  url: '${basePath}/interacts/complain/getComplainList?pkid='+$("#pkid").val()+'&state='+index, //請(qǐng)求數(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ì)頁(yè)面模式。table第一行會(huì)有+號(hào)，點(diǎn)擊會(huì)出現(xiàn)更詳細(xì)的該行信息
  detailFormatter: 'detailFormatter', //格式化詳細(xì)頁(yè)面模式的視圖。
  pagination: true, //展示有分頁(yè)
  paginationLoop: false, //循環(huán)分頁(yè)
  sidePagination: 'server', //設(shè)置在哪里進(jìn)行分頁(yè)，可選值為 'client' 或者 'server'。設(shè)置 'server'時(shí)，必須設(shè)置 服務(wù)器數(shù)據(jù)地址（url）或者重寫(xiě)ajax方法
  silentSort: false, //設(shè)置為 false 將在點(diǎn)擊分頁(yè)按鈕時(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)擊分頁(yè)按鈕或搜索按鈕時(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}
   ]
  });
}

Ce qui précède est la fonction pour initialiser la table. L'index est transmis pour demander différentes adresses pour actualiser différentes tables lors du changement, car il y a un clic dans chaque onglet. menu de commutation Fonction d'événement rafra?chissementTable (index), j'ai commenté toutes les configurations utilisées dans le tableau dans le code ci-dessus. Si vous souhaitez voir la configuration détaillée, veuillez consulter la configuration du site officiel (http://bootstrap-table.wenzhixin. net.cn/zh -cn/documentation/). Les colonnes configurent chaque ligne, le champ est la valeur clé du champ correspondant à afficher dans chaque colonne, le titre correspond à l'en-tête de chaque colonne, le formateur est une fonction personnalisée pour formater chaque colonne, seul le code de la fonction de formatage de l'heure est affiché ci-dessous?:

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

La ligne correspondant au champ d'action est le bouton de fonctionnement. Le code du bouton de fonctionnement formaté est le suivant?:

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;);
}

En même temps, le bootstrap de pagination a fourni une configuration complète (y compris le nombre de lignes affichées sur chaque page, les boutons de pagination, le nombre total d'éléments et le nombre total de pages, etc.) mais il ne passe pas au spécifié ligne, nous devons donc l'écrire nous-mêmes. Le style est positionné sur la colonne de pagination correspondante, mais il a des méthodes associées

selectPage consiste à accéder à la page spécifiée. Nous pouvons ajouter une méthode nous-mêmes?:

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

Lorsque vous utilisez sa méthode, utilisez $table.bootstrapTable('selectPage',page).

Recommandations associées?:

Exemple détaillé de création d'un système de gestion backend à l'aide de React Family Bucket

Système de gestion backend basé sur thinkphp Créez rapidement des modèles

Bootstrap Table crée rapidement un système de gestion backend

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!