国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

Heim Web-Frontend js-Tutorial Bootstrap Table erstellt die Codefreigabe für Backend-Verwaltungssysteme

Bootstrap Table erstellt die Codefreigabe für Backend-Verwaltungssysteme

Feb 07, 2018 pm 02:13 PM
bootstrap table Managementsystem

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

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}$/,&#39; &#39;);
 }

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=$(&#39;#pageNum&#39;).val();
  $table.bootstrapTable(&#39;selectPage&#39;,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!

Erkl?rung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Hei?e KI -Werkzeuge

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem v?llig kostenlosen KI-Gesichtstausch-Tool aus!

Hei?e Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Hei?e Themen

PHP-Tutorial
1502
276
So verwenden Sie Bootstrap in Vue So verwenden Sie Bootstrap in Vue Apr 07, 2025 pm 11:33 PM

Die Verwendung von Bootstrap in Vue.js ist in fünf Schritte unterteilt: Startstrap installieren. Bootstrap in main.js. Verwenden Sie die Bootstrap -Komponente direkt in der Vorlage. Optional: benutzerdefinierter Stil. Optional: Verwenden Sie Plug-Ins.

So schreiben Sie geteilte Zeilen auf Bootstrap So schreiben Sie geteilte Zeilen auf Bootstrap Apr 07, 2025 pm 03:12 PM

Es gibt zwei M?glichkeiten, eine Bootstrap -Split -Zeile zu erstellen: Verwenden des Tags, das eine horizontale Split -Linie erstellt. Verwenden Sie die CSS -Border -Eigenschaft, um benutzerdefinierte Style Split -Linien zu erstellen.

So überprüfen Sie das Bootstrap -Datum So überprüfen Sie das Bootstrap -Datum Apr 07, 2025 pm 03:06 PM

Befolgen Sie die folgenden Schritte, um Daten in Bootstrap zu überprüfen: Führen Sie die erforderlichen Skripte und Stile ein. Initialisieren Sie die Datumsauswahlkomponente; Legen Sie das Data-BV-Datatattribut fest, um die überprüfung zu erm?glichen. Konfigurieren von überprüfungsregeln (z. B. Datumsformate, Fehlermeldungen usw.); Integrieren Sie das Bootstrap -Verifizierungs -Framework und überprüfen Sie automatisch die Datumseingabe, wenn das Formular eingereicht wird.

So sehen Sie das Datum der Bootstrap So sehen Sie das Datum der Bootstrap Apr 07, 2025 pm 03:03 PM

ANTWORT: Sie k?nnen die Datumsauswahlkomponente von Bootstrap verwenden, um Daten auf der Seite anzuzeigen. Schritte: Stellen Sie das Bootstrap -Framework ein. Erstellen Sie ein Eingangsfeld für Datumsauswahl in HTML. Bootstrap fügt dem Selektor automatisch Stile hinzu. Verwenden Sie JavaScript, um das ausgew?hlte Datum zu erhalten.

So erhalten Sie die Bootstrap -Suchleiste So erhalten Sie die Bootstrap -Suchleiste Apr 07, 2025 pm 03:33 PM

So verwenden Sie Bootstrap, um den Wert der Suchleiste zu erhalten: Bestimmt die ID oder den Namen der Suchleiste. Verwenden Sie JavaScript, um DOM -Elemente zu erhalten. Holen Sie sich den Wert des Elements. Führen Sie die erforderlichen Ma?nahmen aus.

So verwenden Sie die Bootstrap -Taste So verwenden Sie die Bootstrap -Taste Apr 07, 2025 pm 03:09 PM

Wie benutze ich die Bootstrap -Taste? Führen Sie Bootstrap -CSS ein, um Schaltfl?chenelemente zu erstellen, und fügen Sie die Schaltfl?che "Bootstrap" hinzu, um Schaltfl?chentext hinzuzufügen

10 neueste Tools für Webentwickler 10 neueste Tools für Webentwickler May 07, 2025 pm 04:48 PM

Web Development Design ist ein vielversprechendes Karrierefeld. Diese Branche steht jedoch auch vor vielen Herausforderungen. Da sich mehr Unternehmen und Marken auf den Online -Markt wenden, haben Webentwickler die M?glichkeit, ihre F?higkeiten zu demonstrieren und ihre Karriere erfolgreich zu machen. Da die Nachfrage nach Webentwicklung weiter w?chst, nimmt auch die Zahl der Entwickler zu, was zu einem immer heftigen Wettbewerb führt. Aber es ist aufregend, dass Sie, wenn Sie über das Talent und den Willen verfügen, immer neue M?glichkeiten finden, einzigartige Designs und Ideen zu erstellen. Als Webentwickler müssen Sie m?glicherweise weiter nach neuen Tools und Ressourcen suchen. Diese neuen Tools und Ressourcen machen Ihren Job nicht nur bequemer, sondern verbessern auch die Qualit?t Ihrer Arbeit, wodurch Sie mehr Unternehmen und Kunden gewinnen k?nnen. Die Trends der Webentwicklung ?ndern sich st?ndig.

So richten Sie das Framework für Bootstrap ein So richten Sie das Framework für Bootstrap ein Apr 07, 2025 pm 03:27 PM

Um das Bootstrap -Framework einzurichten, müssen Sie die folgenden Schritte befolgen: 1. Verweisen Sie die Bootstrap -Datei über CDN; 2. Laden Sie die Datei auf Ihrem eigenen Server herunter und hosten Sie sie. 3.. Fügen Sie die Bootstrap -Datei in HTML hinzu; 4. Kompilieren Sie Sass/weniger bei Bedarf; 5. Importieren Sie eine benutzerdefinierte Datei (optional). Sobald die Einrichtung abgeschlossen ist, k?nnen Sie die Grid -Systeme, -Komponenten und -stile von Bootstrap verwenden, um reaktionsschnelle Websites und Anwendungen zu erstellen.

See all articles