Bootstrap Table baut schnell ein Backend-Verwaltungssystem auf

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. In diesem Artikel wird hauptsächlich detailliert beschrieben, wie man mithilfe von Bootstrap Table schnell und perfekt ein Backend-Verwaltungssystem erstellt. Interessierte Freunde können sich auf das Bootstrap-Tutorial beziehen kann jedem helfen.
Nehmen Sie entsprechende benutzerdefinierte Konfigurationen für verschiedene Städte vor und führen Sie auch einige Anzeigen und Vorgänge für einige Hintergrunddaten durch, sodass jedes Modul grundsätzlich über eine Tabellenanzeigeform verfügt. Dies hat den Vorteil, dass es intuitiv ist bequeme Bedienung. 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:

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

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.

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

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:

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

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

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

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.

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

selectPage dient dazu, zur angegebenen Seite zu springen:

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

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

Verwandte Empfehlungen:

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

Backend-Managementsystem basierend auf thinkphp Schnelle Vorlagenkonstruktion

Javascript – einige Probleme bei der Entwicklung von Backend-Managementsystemen

Das obige ist der detaillierte Inhalt vonBootstrap Table baut schnell ein Backend-Verwaltungssystem auf. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!