1. Die Einführung der Bootstrap -Tabelle
In Bezug auf die Einführung der Bootstrap -Tabelle gibt es im Allgemeinen zwei Methoden:
1. Laden Sie den Quellcode direkt herunter und fügen Sie ihn dem Projekt hinzu.
Da die Bootstrap -Tabelle eine Komponente von Bootstrap ist, hängt sie von Bootstrap ab. Wir müssen zunächst einen Verweis auf Bootstrap hinzufügen.
2. Verwenden Sie unsere magische Nuget
Öffnen Sie Nuget und suchen Sie nach diesen beiden Paketen
Bootstrap ist bereits die neueste 3.3.5, sodass wir ihn direkt installieren können.
Die Version der Bootstrap -Tabelle beträgt tatsächlich 0,4, was zu betrogen ist. Daher schlägt der Blogger vor, dass das Bootstrap -Tabellenpaket direkt im Quellcode heruntergeladen wird. Die neueste Version der Bootstrap -Tabelle scheint 1.9.0 zu sein.
Der Hintergrund dieses Artikels wird eingeführt:
Kürzlich hat der Kunde eine Nachfrage erhöht und wollte das ursprüngliche Managementsystem optimieren, das gut über Mobiltelefone angezeigt werden kann. Er dachte an zwei Lösungen:
Plan A: Halten Sie die Originalseite und entwerfen Sie einen neuen Satz von Seiten, die für Mobiltelefone geeignet sind. Geben Sie beim Zugriff auf das Mobiltelefon m.zhy.com (mobile Seite) ein und geben Sie beim Zugriff auf das PC -Gerät www.zhy.com (PC -Seite) ein.
Lösung B: Verwenden Sie das Bootstrap -Framework, um die Originalseite zu ersetzen und sich automatisch an Mobiltelefone, Tablets und PC -Geräte anzupassen
Unter Verwendung der Lösung A erfordert das Entwerfen einer Reihe von Schnittstellen und das Umschreiben der für die Seite geeigneten Schnittstelle. Unter Berücksichtigung der Zeit- und Kostenprobleme übernimmt das Projekt Lösung B
2. Effektanzeige
2. Eine kurze Einführung in die Bootstrap -Tabelle
Die Bootstrap-Tabelle ist ein leichtes Tabellen-Plug-In, das AJAX verwendet, um Daten im JSON-Format zu erhalten. Die Paginierung und die Datenfüllung sind sehr bequem und unterstützt die Internationalisierung.
3.. Wie man benutzt
1. Einführung von JS und CSS
<!-CSS Style-> <link href = "css/bootstrap/bootstrap.min src = "js/bootstrap/jQuery-1.12.0.min.js" type = "text/javaScript"> </script> <script src = "js/bootstrap/bootstrap.min.js"> </script Src = "js/bootstrap/bootstrap.js.js.js" src = "js/bootstrap/bootstrap-table.js"> </script> <script src = "js/bootstrap/bootstrap-table.js"> </script> <script src = "js/bootstrap/bootstrap-table-zh-cn.js"> </script>
2. Tischdatenfüllung
Es gibt zwei Möglichkeiten, Daten aus der Bootstrap -Tabelle zu erhalten. Einer besteht darin, die Datenquelle über die Daten-URL-Eigenschaft der Tabelle anzugeben, und der andere soll die URL beim Initialisieren der Tabelle über JavaScript angeben, um Daten zu erhalten.
<table data-toggle = "table"> <tead> ... </tead> </table> ...
$ ('#table'). bootstrappable ({url: 'data.json'});Die zweite Methode ist flexibler, wenn komplexe Daten verarbeitet als die erste Methode. Im Allgemeinen wird die zweite Methode verwendet, um Tabellendaten zu füllen.
$ (function () {// 1. Initialisieren Sie die Tabelle var otable = new tableInit (); otable.init (); // 2. Klicken Sie auf die Schaltfläche von der Schaltfläche initialisieren/ * var ObuttonInit = new buttonInit (); ObuttonInit.init (); */}); var tableInit = function () {var otableInit = new Object (); // Tabelle initialisieren otableInit.init = function () {$ ('#Tradelist'). Cache, Standard ist wahr. Im Allgemeinen müssen Sie diese Eigenschaft (*) Pagination festlegen: True, // Wo Paging (*) sortierbar: Falsch, // Sorten Sorte: "ASC", // Sortiermethode Queryparams: otableInit.QueryParams, // Pagination Parameter (*) Sidepagination (*) Sidepagination: Pagenumber: 1, // initialisieren Sie die erste Seite, um zu laden, die Standard -erste Seite PageSize: 50, // Die Anzahl der Zeilen pro Seite (*) Pagelist: [10, 25, 50, 100], // Die Anzahl der Zeilen pro Seite zu ausgewählt werden (*) StrictSearch: TRUE, TRUE, Klicktoselektion: TRUE. feels the height of the table according to the number of records, uniqueId: "id", //The unique identification of each row is generally the primary key column cardView: false, //Does the detailed view detailView: false, //Does the parent and child table columns: [{ field: 'id', title: 'serial number' }, { field: 'liushuiid', title: 'Transaction number' }, { field: 'orderid', title: 'Order number' }, { field: 'receivetime', title: 'Transaction time' }, { field: 'price', title: 'Amount' }, { field: 'coin_credit', title: 'Input coin' }, { field: 'bill_credit', title: 'Input banknote' }, { field: 'changes', title: 'changes' }, { field: 'tradetype', title: 'Transaction type' }, { field: 'goodmachineid', title: 'Freighter number' },{ field: 'inneridname', title: 'Cargo lane number' },{ field: 'goodsName', title: 'Product name' },{ field: 'changestatus', title: 'Payment' },{ field: 'sendstatus', title: 'Ship' },] }); }; // Die Abfrageparameter abrufen. Wenn dies geändert wird, muss der Controller auch in dieselbe Grenze geändert werden: params.limit, // Seitengröße Offset: Params.Offset, // Seitennummer SDATE: $ ("#stattime"). Val (), bearbeiten: $ ("#endzeit"). Val (), Sellerid: $ ("#Sellerid". Val (). Val (). $ ("#CardNumber"). Val (), MaxRows: Params.Limit, PageIndex: Params.Pagenumber, Portid: $ ("#portid"). Val (), CardNumber: $ ("#CardNumber"). Val (), Tradetype: $ ('Input: Radio [name = "tradetype"]: überprüft. Erfolg: $ ('Eingabe: Radio [name = "Erfolg"]: geprüft'). Val (),}; Temperatur zurückgeben; }; return otableInit; };Das Feld Feld muss dem vom Server zurückgegebenen Feld entsprechen, bevor die Daten angezeigt werden.
3. Nehmen Sie Daten im Hintergrund ab
A. Servlet erhält Daten
BufferedReader buf = new bufferedReader (neuer InputStreamReader (Request.GetInputStream (), "UTF-8"); StringBuilder sbuilder = new StringBuilder (""); String temp = ""; while ((temp = bufr.readline ())! = null) {sbuilder.append (temp); } buffr.close (); String json = sbuilder.toString (); JsonObject json1 = jsonObject.fromObject (JSON); String sdate = json1.getString ("SDate"); // Den Front-End-Daten über diese Methode abrufen ...B. Die entsprechende Methode im SpringMVC -Controller erhält Daten
public JsonResult getDepartment (int limit, int offset, String orderId, String sellerid, portid, kartennummer, Erfolg, Maxrows, Tradetyp) {...}4. Paginierung (diejenige, die die meisten Probleme begegnet)
Unter Verwendung von Pagination müssen die von der Serverseite zurückgegebenen Daten Zeilen und insgesamt enthalten. Der Code lautet wie folgt:
... <br> gblst = sqlado.getTradelist (SQL, PageIndex, MaxRows); jsonArray jSondata = new JsonArray (); JsonObject jo = null; für (int i = 0, len = gblst.size (); i <len; i ++) {TradeBean tb = gblst.get (i); if (tb == null) {Fortsetzung; } jo = new JsonObject (); jo.put ("id", i+1); jo.put ("liushuiid", tb.getliushuiid ()); jo.put ("preis", string.format ("%1.2f", tb.getPrice ()/100.0)); jo.put ("Mobilephone", tb.getMobilephone ()); jo.put ("forderungen", toolbox.getymdhms (tb.getReceivetime ())); jo.put ("tradetype", clsconst.trade_type_des [tb.getTradetype ()]); jo.put ("Changestatus", (tb.getChangestatus ()! = 0)? "Erfolg": "fehlgeschlagen"); jo.put ("Changestatus", (tb.getChangestatus ()! = 0)? "Erfolg": "fehlgeschlagen"); jo.put ("sendStatus", (tb.getSendStatus ()! = 0)? "Erfolg": "fehlgeschlagen"); jo.put ("bill_credit", string.format ("%1.2f", tb.getbill_credit ()/100.0)); jo.put ("Änderungen", string.format ("%1.2f", Tb.getCanges ()/100.0)); jo.put ("Goodroadid", tb.getGoodroadId ()); jo.put ("smscontent", tb.getSmscontent ()); jo.put ("orderid", tb.getorderid ()); jo.put ("GoodsName", tb.getGoodsname ()); jo.put ("Inneridname", tb.getInneridName ()); jo.put ("xmlstr", tb.getXmlstr ()); JSondata.Add (Jo); } int totalCount = sqlado.getTraderScount (SQL); JsonObject jsonObject = new JSONObject (); jsonObject.put ("rows", jSondata); // JsonArray jsonObject.put ("Total", TotalCount); // Total Records Out.print (jsonObject.toString ()); <br> ...5. Einführung in den Inhalt der Paginationsschnittstelle
Das Front-End erhält die PAGED-Daten, der Code ist wie folgt:
... <br> otableInit.Queryparams = Funktion (Params) {var temp = {// Der Schlüsselname hier und der Controller -Variable -Name muss immer sein. Wenn dies geändert wird, muss der Controller auch in dieselbe Grenze geändert werden: params.limit, // Wie viele Datensätze sind ausgeglichen: params.offset, // Zeigen Sie an, wie viele Datensätze auf einer Seite SDATE aufgezeichnet werden: $ ("#Strattime"). Val (),}; Temperatur zurückgeben; }; <br> ...Das Backend erhält die ausgelasteten Daten, der Code lautet wie folgt:
... <br> int pageIndex = 0; int offset = toolbox.filterint (json1.getString ("offset")); int limit = toolbox.filterint (json1.getString ("limit")); if (offset! = 0) {pageIndex = offset/limit;} pageIndex+= 1; // Wie viele Seiten <br> ...4. Andere
Bootstrap3 ist mit IE8 -Browser kompatibel! Sehen Sie sich den Artikel an: //www.vevb.com/article/83366.htm
Wenn Sie nicht genug gelernt haben, können Sie hier klicken, um Ihnen ein wundervolles Thema zu lernen: Bootstrap -Lern -Tutorial
Das obige dreht sich alles um diesen Artikel. Ich hoffe, es kann Ihnen helfen, die JS -Tabellenkomponenten -Artefakt -Bootstrap -Tabelle besser zu lernen.