Bootstrap Table crée le partage de code du système de gestion backend

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">被举报次数：${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">举报成立：${stateCountList[1]}次</a></li>
    <li class="fail-report"><a href="#fail-report" onclick="freashTable(2)" data-toggle="tab">举报不成立：${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, //请求数据地址url
  height: getHeight(), //获取行高
  striped: true, //设置为 true 会有隔行变色效果
  search: true, //为true会有搜索框
  showRefresh: true, //为true有刷新按钮
  showColumns: true, //是否显示 内容列下拉框
  minimumCountColumns: 2,//当列数小于此值时，将隐藏内容列下拉框
  clickToSelect: true, //点击行是checkbox或者rediobox选中
  detailView: true, //设置为 true 可以显示详细页面模式。table第一行会有+号，点击会出现更详细的该行信息
  detailFormatter: 'detailFormatter', //格式化详细页面模式的视图。
  pagination: true, //展示有分页
  paginationLoop: false, //循环分页
  sidePagination: 'server', //设置在哪里进行分页，可选值为 'client' 或者 'server'。设置 'server'时，必须设置 服务器数据地址（url）或者重写ajax方法
  silentSort: false, //设置为 false 将在点击分页按钮时，自动记住排序项。仅在 sidePagination设置为 server时生效19   escape: true, //转义HTML字符串，替换 &, <, >, ", `, 和 &#39; 字符.
  searchOnEnterKey: true, //设置为 true时，按回车触发搜索方法，否则自动触发搜索方法
  idField: &#39;systemId&#39;, //指定主键
  maintainSelected: true, //设置为 true 在点击分页按钮或搜索按钮时，将记住checkbox的选择项
  toolbar: &#39;#toolbar&#39;, //一个jQuery 选择器，指明自定义的toolbar 
  columns: [
    {field: &#39;complain_reason&#39;, title: &#39;举报类型&#39;,align: &#39;center&#39;},
    {field: &#39;nick_name&#39;, title: &#39;举报人&#39;,align: &#39;center&#39;},
    {field: &#39;create_time&#39;, title: &#39;举报时间&#39;,formatter:&#39;timeFormat&#39; },
    {field: &#39;complain_state&#39;, title: &#39;举报状态&#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!