Les composants de table natifs de bootstrap ne peuvent répondre qu'à un affichage de données simple et ne peuvent pas répondre aux exigences opérationnelles plus. Bien sûr, vous pouvez trouver un composant de table basé sur bootstrap appelé "dataTables-1.10.11", mais si vous ne savez pas grand-chose sur l'API, ce sera douloureux à utiliser. Cependant, si vous choisissez d'utiliser JQGrid, ce tutoriel vous apportera une solution à cette table opérationnelle.
1. Affichage d'effet
Ok, montrez simplement cette image. Je crois que vous êtes tombé amoureux de la version bootstrap de JQGrid. Il est très compatible avec Bootstrap et est tout simplement parfait. Bien sûr, cela nécessite quelques modifications du JQGrid de la raison et encapsuler les composants.
2. Téléchargement des ressources
Quoi qu'il en soit, j'aime partager. Vous pouvez télécharger le code des composants de JQGrid à partir du site officiel de JQGrid, mais il nécessite quelques modifications après le téléchargement. Ensuite, je télécharge directement le JQGrid modifié sur GIT, et vous n'avez qu'à importer les fichiers fournis dans votre projet correspondant.
De plus, vous devez également télécharger un jQuery-Ui-1.10.0.custom.css , et je ne fournirai pas l'adresse de téléchargement, mais je crois que vous le trouverez certainement. Même si vous utilisez une fille Baidu qui a fréquemment des accidents, vous pouvez le trouver.
3. De quoi parle cet article
Depuis que j'ai créé le groupe QQ, certains étudiants ont rejoint le groupe dans un "flux incessant", mais j'ai également constaté que la première étape du groupe m'est venue pour demander un code de démonstration ou de projet. Je n'aime pas ça. Faites-le vous-même, implémentez ce qui suit et transformez-le, et ce sera votre propre truc. Vous n'obtiendrez évidemment pas plus d'aide en copie complètement mon code. J'espère que les étudiants ci-dessus prendront l'initiative lorsqu'ils étudieront.
Après avoir dit les petites bêtises ci-dessus, revenons au point et parlons de ce dont notre blog parle principalement et de la clé pour intégrer JQGrid dans Bootstrap. Je le résume comme suit:
Schéma de mise en page JQGrid dans Bootstrap de JQGrid Paramètres constructifs de JQGrid JQGrid Data Operation dans Bootstrap
Il est provisoirement divisé en parties ci-dessus à illustrer, mais il faut noter qu'en raison des limitations de l'espace, seules les idées et des code sont fournis dans le blog.
①. Le plan de mise en page de JQGrid en bootstrap
<! Doctype html> <html lang = "zh-cn"> <% @ page linguisse = "java" contentType = "text / html; charset = utf-8" pageencoding = "utf-8"%> <% @ include file = "/ components / commun / taglib.jsp"%> <% @ include include = " file = "/ Components / Common / Csslib.jsp"%> <A-head> <link type = "text / css" rel = "stylesheet" href = "$ {ctx} /css/deal/my_pay_list.css" /> </ head> <body> <v> <form id = "jqgridform" role = "form" form " Action = "$ {ctx} / deal / datationablepaydealordersList" Method = "Post"> <div> <div> <label for = "name"> Nom du projet: </ laboratoire id = "searchbtn"> search </ button> </ div> </ div> <div> <div> <table id = "pagegrid" rel = "jqgridform"> </ table> <div id = "pagegridpager"> </ div> </ div> </ form> </ div> <% @ include file = "/ composants / commun / jslib.jsp" %> src = "$ {ctx} /js/deal/my_pay_list.js"> </ script> </ body> </html>Les projets de chaque personne varient considérablement. Dans le code répertorié, nous nous concentrons uniquement sur la section JQGrid:
id="jqgridForm" , nous avons ici un formulaire avec une couche de conditions de recherche pour JQGrid, c'est-à-dire la pièce de recherche indiquée sur les rendus. Lorsque vous cliquez sur le bouton de recherche, les conditions de requête du champ de formulaire de formulaire sont soumises au contrôleur et les données obtenues sont obtenues. id="searchBtn" , définit le bouton de recherche, qui sera utilisé plus tard sur la modularité. <table id="pageGrid" rel="jqgridForm"></table> <div id="pageGridPager"></div> Définissez l'élément de table de jqgrid et l'élément de pied de page de JQGrid. Les règles utilisées par mon projet sont temporairement d'accord avec cette règle, et vous pouvez également avoir vos propres règles. En spécifiant l'ID du formulaire par REL, il est plus facile d'utiliser le formulaire de récupération de table. ②, les propres paramètres constructifs de JQGrid
Construisant les paramètres, je les ai extraits dans my_pay_list.js dans ①.
$ (function () {var jqoption = {dataType: "xml", mType: "Post", ShrinkToFit: true, ViewRecords: false, RownUmbers: false, Autowidth: true, "100%", Colnames: [`` STATO '', ',' Project Information ',' Project Status ',' Order Number ',' Project Name ',', ',', le projet Montant du projet '', "Order Number ',' Project Name ','. Quantité ',' Order Status ',' Operation '], ColModel: [{nom:' id ', index:' id ', Hidden: true}, {name:' status ', index:' status ', Hidden: true}, {name:' image_str ', index:' Image_str ' (CellValue == 'Coût de paiement total:') {return CellValue;}}, align: 'Left'}, {name: 'opér parseint ($ (rowObject) .Find ("Status"). Text ()); {return '<a Target = "_ Blank" href = "' + Common.ctx + '/ Deal / showDealor /' + id + '"> Détails de la vue </a>'; ], XmlReader: {répéterms: false, root: "pagegrid", ligne: "map", page: 'page', total: 'total', enregistrements: 'enregistrements', id: 'id'}, rownum: 50, rowlist: [50, 100, 200, 300], Pager: "#PageGrorror,, ploderrow: true, chargeror: yunr function () {var $ form = $ ("#" + $ ("# pagegrid"). att ("rel")); $ ("# PageGrid"). FooterData ("set", {image_stral: "Coût de paiement total:", Ordre_Price: JSON.MESSAGE}); } // Dialogue if ($ .fn.ajaxtodialog) {$ ("a [Target = Dialog]", $ ("# pagegrid"). Ajaxtodialog ();},};Les étudiants qui ne connaissent pas du tout JQGrid recommandent de lire la démo de JQGrid et les documents officiels de JQGrid en premier. Bien sûr, pour les étudiants qui connaissent déjà JQGrid, Doc et Demo sont définitivement une lecture incontournable.
Il existe de nombreux attributs répertoriés dans le fichier ci-dessus. Je ne présenterai pas trop JQGrid. Le thème principal de cet article est de présenter comment intégrer JQGrid dans Bootstrap. Le point clé n'est pas d'introduire JQGrid. Je ne présenterai que quelques points clés:
formatter: function(cellvalue, options, rowObject) { , les formateurs sont encore très souvent utilisés, il est donc très important d'obtenir la valeur de la cellule correspondante. Mon JQGrid utilise le format de données XML (DataType: "XML"), afin que vous puissiez trouver la valeur de la colonne de Deal_id correspondante via $(rowObject).find("deal_id").text() . xmlReader : { repeatitems : false, root : "PageGrid", faites attention aux valeurs des paramètres dans xmlReader. Dans la prochaine introduction, le fonctionnement des données de JQGrid sera introduit en détail, qui est lié à l'encapsulation de données XML d'arrière-plan. $("#pageGrid").footerData("set", {image_str : "支付总花费：", order_price : json.message}); , En ce qui concerne la méthode de pieddata, il est également très pratique à utiliser, et l'effet peut être référencé comme l'effet. initEnv(jqOption); méthode. Après la page Onload, nous passons les paramètres d'initialisation de JQGrid à la méthode INTENV. Dans la modularisation ultérieure de JQGrid dans Bootstrap, nous présenterons la méthode INTENV. ③, modularité JQGrid dans Bootstrap
Dans ②, nous avons remarqué la méthode INTENV, donc cette méthode est construite avec un travail d'encapsulation modulaire spécifiquement pour JQGrid.
Méthode IniTENV
fonction initinv (jqoption) {$ (window) .resize (function () {initLayout ();}); IniTUI (NULL, JQOPTION);}Dans cette méthode, nous verrons la méthode InitLayout et la méthode IniTUI, et le contenu spécifique sera introduit plus tard.
InitLayout
fonction initLayout () {$ ("table [rel = jqgridform]"). chaque (fonction () {var rel = $ (this) .attr ("rel"); if (rel) {var $ form = $ ("#" + rel); var tableWidth = $ form.width (); $ (this) .setgridwidth (tablewidth, true);}});};Autrement dit, lorsque la fenêtre est mise à l'échelle, nous réduisons la largeur pour que JQGrid s'adapte à la disposition réactive de Bootstrap. La méthode utilisée est la méthode SetGridWidth de JQGrid.
initui
fonction initUi (_box, jqoption) {var $ p = $ (_ box || document); if (jQOption) {yunm.debug ("initializejqgrid"); var $ form = $ ("#" + $ ("# pagegrid"). att ("rel")); Yunm.debug (yunm.Array2OBJ ($ form.serializearray ())); // initialiser var op = $ .extend ({url: $ form.attr ("action"), postdata: yunm.array2oBj ($ form.serializEarray ()),}, jqoption); $ ("# pagegrid"). jqgrid (op); // Button de recherche $ ("# searchbtn", $ form) .click (function () {$ ("# pagegrid"). Jqgrid ('setGridParam', {url: $ form.attr ("action"), page: 1, postdata: yunm.array2obj ($ form.serialisearray ()),}); $ ("# pageGrid"). Trigger ("reloadgrid"); // barre d'outils, supprimez le coin arrondi du bouton $ (". btn", $ form) .each (function () {var $ this = $ (this); $ this.css ({"border-radius": "0px", "border-bottom": "0",});}); }} array2oBj: function (array) {var params = $ ({}); $ .each (array, fonction (i) {var $ param = $ (this) [0]; params.attr ($ param.name, $ param.value);}); return params [0];},Si vous avez lu ma précédente série d'articles, vous ne serez pas trop familier avec la méthode Initii. Les amis qui connaissent DWZ ne seront naturellement pas familiers. La plupart des modèles de mon projet reposent toujours sur DWZ. Merci à ces seniors.
var $form = $("#" + $("#pageGrid").attr("rel")); Puisque nous associons la condition de formulaire de formulaire sur JQGrid, nous pouvons obtenir l'objet de formulaire de formulaire ici. Lorsque nous obtiendrons l'objet de formulaire de formulaire, nous obtiendrons naturellement la valeur du champ de recherche ( $form.serializeArray() ). Après avoir obtenu la valeur du champ de recherche du formulaire, vous devez effectuer un certain traitement pour le moment. Nous savons que lorsque JQGrid transmet des paramètres au contrôleur, il est nécessaire d'envoyer des champs de pagination et de triés (page, lignes, Sord, Sidx). La méthode utilisée est $("#pageGrid").jqGrid({postData:xxx}); Normalement, lorsque nous envoyons des formulaires de formulaires, nous n'avons qu'à utiliser $form.serializeArray() , mais si pour le moment, remplacez simplement xxx par $form.serializeArray() , alors le paginateur et les champs apparentés triés (page, lignes, sord, sidx) ne seront pas obtenus dans le contrôleur. C'est un conflit. Comment y faire face en ce moment? La solution consiste à objectiver les données du formulaire de formulaire (méthode Array2OBJ), puis nous envoyons la valeur du champ de recherche avec les champs pertinents de pagination et de tri au contrôleur via var op =$.extend({url:$form.attr("action"),postData:YUNM.array2obj($form.serializeArray()),},jqOption);$("#pageGrid").jqGrid(op); $("#searchBtn", $form).click recharger les données de JQGrid en résumant l'événement de clic. $(".btn", $form).each(function() { La méthode ici récupérera le bouton pour désactiver les coins pour le rendre plus adapté à JQGrid, voir les rendus.
La partie de fonctionnement des données, je pense, inclut le passage des paramètres de recherche, le passage des paramètres de tri de pagination et la rédaction d'instructions SQL.
En ce qui concerne le passage des paramètres, l'encapsulation des paramètres frontaux a été introduite dans ③. Voyons comment les données sont traitées dans le contrôleur.
Tout d'abord, définissons PageGrid, qui est la source de données de XMLReader dans JQGrid.
package com.honzh.common.page; import java.util.list; import com.thoughtworks.xstream.annotations.xstreamalias; @xstreamalias ("pagegrid") @ suppresswarnings ("RawTypes") Public Class PageGrid {private int page; Int privé total; Records INT privés; données de liste privée; public int getPage () {return this.page; } public void setPage (int page) {this.page = page; } public int getTotal () {return this.total; } public void Settotal (int total) {this.total = total; } public int getRecords () {return this.records; } public void setRecords (int record) {this.records = record; } public list getData () {return this.data; } public void setData (list data) {this.data = data; }}xstream.jar est requis dans le projet et le téléchargez vous-même.
XstreamComponent.java
Package com.honzh.common.page; import org.apache.commons.lang.stringutils; import com.thoughtworks.xstream.xstream; import com.thoughtworks.xstream.converters.converter; import com.thoughtworks.xstream.io.xml.Diverm; import com.thoughtworks.xstream.mapper.defaultmapper; import com. com.thoughtworks.xstream.mapper.xstream11xmlfriendLyMapper; classe publique xstreamComponent {private xstream xstream; public static xstreamComponent NewInstance () {xstreamComponent xmlComponent = new XStreamComponent (); xmlComponent.alias (new class [] {pageGrid.class}); return xmlComponent; } public xstreamComponent () {this.xstream = new XStream (new DomDriver ()); } public String toxml (objet obj) {return this.xstream.toxml (obj); } public String topagexml (objet obj) {registreConverter (new MapCustomConverter (new defaultMapper (xstream11xmlfriendLyMapper.class.getClassLoader ()))); return TOXML (OBJ); } objet public frompagexml (String xml) {registerConverter (new MapCustomConverter (new defaultMapper (xstream11xmlfriendLyMapper.class.getClassLoader ()))); Retour dexml (xml); } Objet public FromXml (String xml) {return this.xstream.fromxml (xml); } @SuppressWarnings ("RawTypes") public void processannotations (type de classe) {this.xstream.processAnnotations (type); } @SuppressWarnings ("RawTypes") public void processAnnotations (classe [] types) {this.xstream.processannotations (types); } @SuppressWarnings ("RawTypes") public void alias (nom de chaîne, type de classe) {this.xstream.alias (name, type); } @SuppressWarnings ("RawTypes") public void alias (class [] types) {for (class type: types) {string classname = type.getName (); essayez {string [] classNames = stringUtils.split (className, "."); this.xstream.alias (classNames [(classNames.length - 1)], type); } catch (exception ex) {this.xstream.alias (className, type); }}} public void RegisterConverter (Converter Converter) {this.xstream.registerConverter (convertisseur); } @SuppressWarnings ("RawTypes") public void usetTributeFor (classe définiedin, string fieldName) {this.xstream.USEATTRIBOFFOR (définisin, fieldname); }}Le PageGrid est principalement encapsulé en tant qu'objet XML, puis transmis à l'extrémité avant.
MapCustomConverter.java
package com.honzh.common.page; import java.util.hashmap; import java.util.hashtable; import java.util.iterator; import java.util.map; importer com.thoughtworks.xstream.converters.marshallingContext; importer com.thoughtworking; com.thoughtworks.xstream.io.hierarchicalstreamreader; import com.thoughtworks.xstream.io.hierarchicalstreamwriter; import com.thoughtworks.xstream.mapper.mapper; public class MapCustomConverter étend AbstractCollectionConverter {public mapcustomConverter (maper mapper) {super (mavoir); } @SuppressWarnings ("RawTypes") Public Boolean CanConvert (Type de classe) {return (type.equals (hashmap.class)) || (type.equals (hashTable.class)) || (type.getName (). Equals ("java.util.linkedhashmap")) || (type.getName (). Equals ("Sun.font.AttributeMap")); } @SuppressWarnings ({"RawTypes"}) public void Marshal (Source d'objet, écrivain HierarchicalStreamWriter, MarshallingContext Context) {map map = (map) source; for (iterator iterator = map.entryset (). iterator (); iterator.hasnext ();) {map.entry entrée = (map.entry) iterator.next (); writer.startNode (entry.getKey () == null? "null": entry.getKey (). toString ()); writer.setValue (entry.getValue () == null? "": entrée.getValue (). toString ()); écrivain.endNode (); }} @SuppressWarnings ("RawTypes") Objet public Unmarshal (lecteur HierarchicalStreAmReader, UNMARSHALLINGCONTEXT Context) {map map = (map) CreateCollection (context.getRequiredType ()); PopulateMap (lecteur, contexte, carte); carte de retour; } @SuppressWarnings ({"RawTypes", "Unchecked"}) Protected void populatemap (HierarchicalStreamReader Reader, UnmarshallingContext Context, map Map) {while (Reader.HasmoreChildren ()) {Reader.MOVEWOWN (); Objet key = reader.getNodeName (); Valeur d'objet = Reader.getValue (); map.put (clé, valeur); Reader.MoveUp (); }}}Il convertit principalement HashMap récupéré dans la base de données en données de format XML standard.
Basonconditionvo.java
package com.honzh.common.persistence; importer java.util.hashmap; import java.util.map; import org.apache.ibatis.session.rowbounds; / ** * paramètre de paramètre pendant la question de pagination. <br> * * <p> * 1.Page_Show_CountuityQu, cours, la page par défaut affiche 10. 2.Pagenum proch - quelle page. <br> * 3.NUMPORDPAGED - Comment une page est-elle affiché? Lorsqu'il est vide, page_show_count s'affiche. <br> * 4.TotalCount - numéro total. TotalCount / numperpage = combien de pages <br> * 5.OrderFieldfiques - Colonnes. <br> * 6.OrderDirection proch - la direction du tri. * </p> * / classe publique BasEconditionvo {public final static int page_show_count = 50; Int privé int pagenum = 1; private int numperpage = 0; TotalCount long privé = 0; String privé orderField = ""; String privé orderDirection = ""; / ** * @fields ps: les types de paramètres encapsulées. * / map privé <chaîne, objet> mo = new hashmap <string, objet> (); public int getpagenum () {return pagenum; } public void SetPagenum (int pagenum) {this.pagenum = pagenum; } public int getNumperpage () {return numperpage> 0? numperpage: page_show_count; } public void setNumperPage (int numperpage) {this.numperpage = numperpage; } public String getOrderfield () {return OrderField; } public void setOrderField (String OrderField) {this.orderField = OrderField; } public String getOrderDirection () {return "desc" .equals (OrderDirection)? "Desc": "ASC"; } public void setOrderDirection (String OrderDirection) {this.orderDirection = OrderDirection; } public long getTotalCount () {return totalCount; } public void SettotalCount (long totalCount) {this.totalCount = totalCount; } public int getStartIndex () {int pagenum = this.getpagenum ()> 0? this.getpagenum () - 1: 0; return pagenum * this.getNumperPage (); } public Rowbounds CreaToWBounds () {RowBounds ro = new RowBounds (this.getStartIndex (), this.getNUrserPage ()); Retour RO; } / ** * @title: addParams * @Description: Ajouter des conditions de requête * @param key * @param valeur * / public void addParams (clé de chaîne, valeur d'objet) {this.getmo (). Put (key, valeur); } / ** * @title: getParams * @Description: obtenez des conditions de requête * @param key * @return * / objet public getParams (string key) {return this.getmo (). Get (key); } / ** * @return le mo * / public map <string, object> getmo () {return mo; } / ** * @param mo * le mo à définir * / public void setmo (map <string, objet> mo) {this.mo = mo; } @Override public String toString () {return "condition:" + pagenum + "," + numperpage + "," + totalCount + "," + orderField + "," + orderDirection + "," + mo; }}L'objet de données de requête pour la pagination, y compris les champs de pagination, de tri et de recherche.
protégé BasEconditionvo GetBasEconditionVoFortable () {BasEconditionvo Vo = new BasEconditionVo (); // paramètres de pagination int currentPage = getParAtOirt ("page"); int-tailles = getParAtInT ("lignes"); String sortOrder = getPara ("Sord"); String sortCol = getPara ("Sidx"); vo.setnumperPage (tailles); vo.setpagenum (currentPage); vo.setorderField (sortcol); vo.setorderDirection (Sordeorder); retourner vo; } Convertissez les paramètres passés par JQGrid en objet de requête de pagination BasEconditionvo. Protected void rendexml (httpServletResponse res, String xmlResponse) {try {res.SetcharAtterencoding ("utf-8"); res.sethEader ("contenu-type", "text / xml"); Printwriter out = res.getWriter (); out.print (xmlResponse); if (out! = null) {out.close (); }} catch (ioException e) {Logger.Error (e.getMessage ()); logger.error (e.getMessage (), e); }}Écrit XML au flux de sortie.
Après avoir défini ces objets de base, nous commencerons à obtenir et à passer des données.
@SuppressWarnings ("RawTypes") @RequestMapping (Value = "DatablePayDealordersList") public void DataPayDealordersList (HttpservletResponse Response) {try {logger.debug ("Obtenez l'ordre que j'ai payé"); XstreamComponent xstreamComponent = xstreamComponent.newInstance (); // Obtenez des paramètres de liste basonconditionvo vo = getBasEconditionVoFortable (); vo.addParams ("nom", getPara ("name")); Logger.debug ("I Payé Order Query" + VO); // Le projet que j'ai créé Liste MyDealorders = Dealorderservice.getByissueUid (Vo, vo.createrowBounds ()); Long Count = Dealorderservice.SearchissUetotalCount (VO); String xmlResponse = xstreamComponent.topagexml (CreatePageGrid (MyDealorders, vo, count.intvalue ())); RenderXml (réponse, xmlResponse.replaceALL ("__", "_")); } catch (non catégoriséSQLEXception e) {Logger.Error (e.getMessage ()); logger.error (e.getMessage (), e); renderXML (réponse, constants.query_error); } catch (exception e) {logger.error (e.getMessage ()); logger.error (e.getMessage (), e); renderXML (réponse, constants.server_error); }}Expliquons en détail:
1. XStreamComponent.newInstance() crée un objet Stream XML.
2. BaseConditionVO vo = getBaseConditionVOForTable(); Créez un objet de paramètre de requête de pagination.
3. vo.addParams("name", getPara("name")); Mettez la valeur du champ de recherche dans l'objet de requête.
4. dealOrderService.getByIssueUid(vo, vo.createRowBounds()); La méthode de requête de pagination de Mybatis est super simple. Un ami du groupe créait spécialement un composant de pagination de Mybatis. Je pense que l'utilisation de la méthode de requête MyBatis d'origine est plus efficace. Après cela, nous rédigerons la méthode d'écriture SQL correspondante de XML dans MyBatis.
5. renderXml(response, xmlResponse.replaceAll("__", "_")); Écrivez des données sur le flux de sortie hors de JSP.
Enfin, introduisons comment obtenir des données de pagination via MyBatis.
mappper.java
Package com.honzh.biz.database.mapper; import java.math.bigdecimal; import java.util.hashmap; import java.util.list; import org.apache.ibatis.ssion.basconditionws; Importer com.honzh.common.persistence.basconditionvo; Interface publique DoFFace Offrandeur { @SuppressWarnings ("RawTypes") List <Shmap> GetByissueUid (BasEconditionvo Vo, Rowbounds Createrowbounds);}Les deux objets que vous souhaitez transmettre Mapper.xml sont BasEconditionvo et Paging Rowbounds. SQL dans XML paginera automatiquement.
mappper.xml
<select id = "getByissueUid" resultType = "hashmap" ParameterType = "map"> select * from daa where is_delete = 0 <if test = "mo.name! = null et mo.name! = ''"> et y.name comme concat ('%', '$ {mo.name}', '%') </ if> OrderField! = '' "> Commandez par $ {OrderField} <if test =" OrderDirection! = NULL et OrderDirection! = '' "> $ {ORDERDIRECTVous ne pouvez jamais prêter attention aux Rowbounds, Mybatis résumera automatiquement la limite pour vous. Le nom du domaine de recherche peut être obtenu directement via mo.name ou. OrderField et OrderDirection sont également adoptés.
Jusqu'à présent, tout le bootstrap intégré à JQGrid s'est terminé avec succès. Ok, rendez votre table géniale!