1. L'introduction de la table bootstrap
En ce qui concerne l'introduction de la table bootstrap, il existe généralement deux méthodes:
1. Téléchargez directement le code source et ajoutez-le au projet.
Étant donné que la table bootstrap est un composant de bootstrap, cela dépend de bootstrap. Nous devons d'abord ajouter une référence à Bootstrap.
2. Utilisez notre Nuget magique
Ouvrez Nuget et recherchez ces deux packages
Bootstrap est déjà le dernier 3.3.5, nous pouvons donc l'installer directement.
La version de la table bootstrap est en fait de 0,4, ce qui est trop arnaqué. Le blogueur suggère donc que le package de table bootstrap soit téléchargé directement dans le code source. La dernière version de la table bootstrap semble être de 1.9.0.
Le contexte de cet article est introduit:
Récemment, le client a soulevé une demande et a voulu optimiser le système de gestion d'origine, qui peut être bien affiché via les téléphones mobiles. Il a pensé à deux solutions:
Plan A: Gardez la page d'origine et concevez un nouvel ensemble de pages adaptées aux téléphones mobiles. Lorsque vous accédez au téléphone mobile, entrez M.Zhy.com (page mobile) et lorsque vous accédez à l'appareil PC, entrez www.zhy.com (page PC)
Solution B: Utilisez Bootstrap Framework pour remplacer la page d'origine et s'adaptez automatiquement aux téléphones mobiles, tablettes et appareils PC
L'utilisation de la solution a nécessite la conception d'un ensemble d'interfaces et la réécriture de l'interface adaptée à la page. Compte tenu des problèmes de temps et de coût, le projet adopte la solution B
2. Affichage d'effet
2. Une brève introduction à la table de bootstrap
Bootstrap Table est un plug-in de table léger qui utilise AJAX pour obtenir des données au format JSON. Sa pagination et son remplissage des données sont très pratiques et soutient l'internationalisation.
3. Comment utiliser
1. Présenter JS et CSS
<! - CSS Style -> <link href = "css / bootstrap / bootstrap.min.css" rel = "Stylesheet"> <link href = "css / bootstrap / bootstrap-pable.css" rel = "Stylesheet"> <! - JS -> <script src = "js / bootstrap / jquery-1.12.0.min.js" type = "text / javascrip src = "js / bootstrap / bootstrap-table.js"> </ script> <script src = "js / bootstrap / bootstrap-table.js"> </ script> <script src = "js / bootstrap / bootstrap-bset-zh-cn.js"> </scripteur>
2. Remplissage des données de table
Il existe deux façons d'obtenir des données à partir de la table bootstrap. L'un consiste à spécifier la source de données via la propriété Data-URL de la table, et l'autre est de spécifier l'URL lors de l'initialisation du tableau via JavaScript pour obtenir des données.
<table data-toggle = "Table"> <dead> ... </pead> </ table> ...
$ ('# table'). bootstaptable ({url: 'data.json'});La deuxième méthode est plus flexible lors du traitement des données complexes que la première méthode. Généralement, la deuxième méthode est utilisée pour remplir les données de la table.
$ (function () {// 1. Initialiser la table var otable = new TableInit (); otable.init (); // 2. Initialiser l'événement de clic du bouton / * var obuttonInit = new ButtonInit (); obuttoninit.init (); * /}); var tableInit = function () {var otableInit = new Object (); // Initialiser la table OtableInit.Init = function () {$ ('# TradeList'). Bootstraptable ({URL: '/ VenderManager / TradeList', // Request Url (*) Méthode: 'Post', // Demande Méthode (*) Barre d'outils: '#toolbar', // CHEAUX CONTEETER Stripted Bouton Outo Pour utiliser Cache, la valeur par défaut est vraie, donc en général, vous devez définir cette propriété (*) Pagination: true, // où afficher la pagine (*) Sortable: FALSE, // SORT SORTORDERD: "ASC", // Tri Method QueryParams: OtableInit.QueryParams, // Pagination Paramètres (*) Server Pagination: "Server", // Méthode de la client pageNumber:1, //Initialize the first page to load, the default first page pageSize: 50, //The number of rows recorded per page (*) pageList: [10, 25, 50, 100], //The number of rows per page to be selected (*) strictSearch: true, clickToSelect: true, //Whether click select row height: 460, //Line height, if the height attribute is not set, the table automatically feels the Hauteur du tableau en fonction du nombre d'enregistrements, UNIQUEID: "ID", // L'identification unique de chaque ligne est généralement la principale colonne de clé de clé CardView: false, // La vue détaillée est-elle détaillée: Title: 'Numéro de série'}, {champ de table }, {field: 'receivetime', title: 'transaction time'}, {field: 'prix', titre: 'montant'}, {champ: 'coin_credit', title: 'input coin'}, {field: 'bill_credit', title: ' }, {Field: 'GoodMachineid', titre: 'Numéro de cargo'}, {Field: 'InneridName', Title: 'Cargo Lane Number'}, {Field: 'GoodsName', Title: 'Nom du produit'}, {Field: 'ChangeStatus', Title: 'Payment'}, {Field: 'Sendstatus', Title: Title: 'Ship'},]}); }; // Obtenez les paramètres de requête otableInit.QueryParams = fonction (params) {var temp = {// Le nom de clé ici et le nom de variable du contrôleur doivent toujours être. Si cela est modifié, le contrôleur doit également être changé dans la même limite: params.limit, // la taille de la page Offset: params.offset, // numéro de page sdate: $ ("# stratTime"). Val (), edit: $ ("# end"). Val (), Sellerid: $ ("# venderid"). $ ("# Cardnumber"). Val (), maxrows: params.limit, pageIndex: params.pageNumber, portid: $ ("# portid"). Val (), cardnumber: $ ("# cardnumber"). Val (), TradeType: $ ('entrée: radio [nom = "TradeType"]: vérifié'). Succès: $ ('entrée: radio [name = "Success"]: vérifié'). Val (),}; Tempère de retour; }; retour OtableInit; };Le champ de champ doit correspondre au champ renvoyé par le serveur avant que les données ne soient affichées.
3. Obtenez des données en arrière-plan
un. Servlet obtient des données
BufferedReader bufr = new BufferedReader (new InputStreamReader (request.getInputStream (), "UTF-8")); StringBuilder sbuilder = new StringBuilder (""); String temp = ""; while ((temp = bufr.readline ())! = null) {sbuilder.append (temp); } bufr.close (); String JSON = sbuilder.toString (); JSONObject JSON1 = JSONObject.FromObject (JSON); String sdate = json1.getString ("sdate"); // Obtenez des données frontales via cette méthode ...né La méthode correspondante du contrôleur SpringMVC obtient des données
public JSonResult GetDepartment (int limit, into offset, String OrderId, String Sellerid, PORID, CardNumber, Success, Maxrows, TradeType) {...}4. Pagination (celle qui rencontre le plus de problèmes)
En utilisant la pagination, les données renvoyées par le côté serveur doivent inclure des lignes et un total, le code est le suivant:
... <br> gblst = sqlado.getTradelist (sql, pageIndex, maxrows); jsonArray jSondata = new JSONArray (); JSONObject Jo = null; for (int i = 0, len = gblst.size (); i <len; i ++) {TradeBean tb = gblst.get (i); if (tb == null) {continue; } Jo = new JSONObject (); jo.put ("id", i + 1); jo.put ("liushiiid", tb.getliushiiid ()); JO.PUT ("Price", String.Format ("% 1.2f", tb.getprice () / 100.0)); Jo.put ("Mobilephone", tb.getMobilePhone ()); jo.put ("receivetime", toolbox.getyMDhms (tb.getReceIveTime ())); JO.PUT ("TradeType", ClSconst.Trade_Type_DES [tb.getTradeType ()]); jo.put ("ChangeStatus", (tb.getChangeStatus ()! = 0)? "Success": "a échoué"); jo.put ("ChangeStatus", (tb.getChangeStatus ()! = 0)? "Success": "a échoué"); JO.PUT ("SendStatus", (tb.getSendStatus ()! = 0)? "Success": "Échec"); jo.put ("bill_credit", string.format ("% 1.2f", tb.getbill_credit () / 100.0)); jo.put ("change", string.format ("% 1.2f", tb.getchanges () / 100.0)); JO.PUT ("Goodrodid", tb.getgoodrodid ()); 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.getTraDerOwsCount (SQL); JSONObject JSONObject = new JSONObject (); jsonObject.put ("Rows", jSondata); // JSONArray JSONObject.put ("Total", TotalCount); // Total Records Out.print (JSONObject.ToString ()); <br> ...5. Introduction au contenu de l'interface de pagination
Le front-end obtient les données Paged, le code est le suivant:
... <br> otableInit.QueryParams = fonction (params) {var temp = {// Le nom de clé ici et le nom de variable du contrôleur doivent toujours être. Si cela est modifié, le contrôleur doit également être modifié à la même limite: params.limit, // combien d'enregistrements sont décalés: params.offset, // affiche le nombre d'enregistrements enregistrés sur une page sdate: $ ("# stratrattime"). Val (),}; Tempère de retour; }; <br> ...Le backend obtient les données Paged, le code est le suivant:
... <br> int pageIndex = 0; int offset = toolsbox.filterrint (json1.getString ("offset"); int limite = tools.filterrint (json1.getString ("limite")); if (offset! = 0) {pageIndex = offset / limite;} pageIndex + = 1; // combien de pages <br> ...4. Autres
Bootstrap3 est compatible avec le navigateur IE8! Voir l'article: //www.vevb.com/article/83366.htm
Si vous n'avez pas assez appris, vous pouvez cliquer ici pour apprendre et ensuite vous attacher un sujet merveilleux: Tutoriel d'apprentissage bootstrap
Ce qui précède concerne cet article. J'espère que cela peut vous aider à mieux apprendre la table de bootstrap d'artefacts de composant JS Table.