Bootstrap Table erstellt die Codefreigabe für Backend-Verwaltungssysteme

Bootstrap Table ist ein auf Bootstrap basierendes jQuery-Tabellen-Plug-in. Mit einfachen Einstellungen können Sie leistungsstarke Funktionen wie Einzelauswahl, Mehrfachauswahl, Sortieren, Paging, Bearbeiten, Exportieren, Filtern (Erweiterung) usw. nutzen. Dieser Artikel stellt Ihnen vor allem vor, wie Sie mit Bootstrap Table schnell und perfekt ein Backend-Verwaltungssystem erstellen können. Ich hoffe, dass er Ihnen helfen kann.

Das App-Management- und Backend-Konfigurationssystem, das wir derzeit erstellen, erfordert benutzerdefinierte Konfigurationen für verschiedene Städte sowie einige Anzeigen und Vorgänge einiger Backend-Daten, sodass jedes Modul im Grunde genommen der Vorteil einer Tabellenpräsentation ist dass es intuitiv und einfach zu bedienen ist. Was das zu verwendende Tabellen-Plugin angeht, ist es zweifellos eine Bootstrap-Tabelle. Es verfügt über leistungsstarke Funktionen und eine vollständige Dokumentation, und unser Projekt basiert auch auf dem Bootstrap-Layout. Als Nächstes werde ich einen Projektcode veröffentlichen, um es zu zeigen (Nur als Referenz). Machen Sie sich Notizen.

Zuallererst wird der Bootstrap-Tab verwendet, um verschiedene Tabellen für die Anzeige zu wechseln. Der Umschaltmenücode lautet wie folgt:

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

Ich glaube es ist für Bootstrap nicht nützlich. Fügen Sie {data-toggle="tab"} zu jedem Tag hinzu, das gewechselt werden muss, und fügen Sie einen Ankerpunkt hinzu, der mit dem entsprechenden gewechselten Unterinhalt übereinstimmt {anchor point: href="#padding" rel="external nofollow" " ｝, der entsprechende Unterinhaltscode zum Umschalten lautet wie folgt:

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

Durch Festlegen der ID, die dem obigen Ankerpunkt entspricht für Jedes Unterinhaltselement, das gewechselt werden muss, {#padding}, Und vergessen Sie nicht, (Tab-Inhalt) zum äußeren Container und die Klasse (Tab-Bereich-Einblendung aktiv) zum Unterelement-Container hinzuzufügen mit aktiv sind standardmäßig ausgewählt. Jeder Unterinhalt hat ein Tabellenelement, daher ist hier die Tabelle, die wir benötigen. Durch das Wechseln der einzelnen Registerkarten werden die entsprechenden Tabellendaten aktualisiert und angezeigt. Hier laden wir Daten, indem wir dynamisch Tabellen generieren.

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

Das Obige ist die Funktion zum Initialisieren der Tabelle. Der Index wird übergeben, um beim Wechseln verschiedene Adressen zum Aktualisieren verschiedener Tabellen anzufordern, da es auf jeder Registerkarte einen Klick gibt Schaltmenü Ereignisfunktion RefreshTable (Index), ich habe alle in der Tabelle im obigen Code verwendeten Konfigurationen kommentiert. Wenn Sie die detaillierte Konfiguration sehen möchten, sehen Sie sich bitte die offizielle Website-Konfiguration an (http://bootstrap-table.wenzhixin). net.cn/zh -cn/documentation/). Spalten konfigurieren jede Zeile, Feld ist der entsprechende Feldschlüsselwert, der in jeder Spalte angezeigt werden soll, Titel entspricht der Überschrift jeder Spalte, Formatierer ist eine benutzerdefinierte Funktion zum Formatieren jeder Spalte, unten wird nur der Zeitformatierungsfunktionscode angezeigt:

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

Die Zeile, die dem Aktionsfeld entspricht, ist die Bedienschaltfläche. Der formatierte Bedienschaltflächencode lautet wie folgt:

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

Gleichzeitig stellt Paging Bootstrap die vollständige Konfiguration bereit (einschließlich der Anzahl der auf jeder Seite angezeigten Zeilen, Paging-Schaltflächen, Gesamtzahl der Elemente und Gesamtseiten usw.), springt jedoch nicht zu den angegebenen Zeile, also müssen wir es selbst schreiben. Der Stil ist in der entsprechenden Paging-Spalte positioniert, verfügt jedoch über verwandte Methoden.

selectPage dient dazu, zur angegebenen Seite zu springen:

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

Wenn Sie die Methode verwenden, verwenden Sie $table.bootstrapTable('selectPage',page).

Verwandte Empfehlungen:

Detailliertes Beispiel für den Aufbau eines Backend-Managementsystems mit React Family Bucket

Backend-Managementsystem basierend auf thinkphp Erstellen Sie schnell Vorlagen

Bootstrap Table erstellen Sie schnell ein Backend-Managementsystem

Das obige ist der detaillierte Inhalt vonBootstrap Table erstellt die Codefreigabe für Backend-Verwaltungssysteme. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!