Los componentes de la tabla nativa de Bootstrap solo pueden cumplir con la pantalla de datos simple y no pueden cumplir con más requisitos operativos. Por supuesto, puede encontrar un componente de tabla basado en Bootstrap llamado "Datateable-1.10.11", pero si no sabe mucho sobre la API, será doloroso de usar. Sin embargo, si elige usar JQGRID, este tutorial le traerá una solución a esta tabla operativa.
1. Muestra de efecto
Ok, solo muestra esta imagen. Creo que te has enamorado de la versión Bootstrap de JQGrid. Es muy compatible con Bootstrap y es simplemente perfecto. Por supuesto, esto requiere algunos cambios en el JQGrid de la razón y encapsular los componentes.
2. Descarga de recursos
De todos modos, me encanta compartir. Puede descargar el código de componente de JQGRID del sitio web oficial de JQGRID, pero requiere algunos cambios después de la descarga. Luego cargue directamente el JQGRID modificado en GIT, y solo necesita importar los archivos proporcionados a su proyecto correspondiente.
Además, también debe descargar un jQuery-UI-1.10.0.custom.css , y no proporcionaré la dirección de descarga, pero creo que definitivamente la encontrará. Incluso si usas una chica Baidu que con frecuencia tiene accidentes, puedes encontrarlo.
3. ¿De qué se trata este artículo?
Desde que creé el grupo QQ, algunos estudiantes se han unido al grupo en una "transmisión incesante", pero también descubrí que el primer paso en el grupo vino a pedirme una demostración o código de proyecto. No me gusta esto. Hazlo tú mismo, implementa lo siguiente y transformarlo, y será lo tuyo. Obviamente no obtendrá más ayuda al copiar mi código por completo. Espero que los estudiantes anteriores tomen la iniciativa cuando estén estudiando.
Después de decir las pequeñas tonterías anteriores, volvamos al grano y hablemos sobre lo que nuestro blog habla principalmente y cuál es la clave para integrar JQGrid en Bootstrap. Lo resumo de la siguiente manera:
Esquema de diseño JQGRID en los parámetros constructivos de Bootstrap JQGRID Operación de datos JQGRID modular de JQGRID en Bootstrap
Se divide tentativamente en las partes anteriores para ilustrar, pero debe tenerse en cuenta que, debido a limitaciones de espacio, solo se proporcionan ideas y algún código en el blog.
①. El plan de diseño de JQGrid en Bootstrap
<! Doctype html> <html lang = "zh-cn"> <%@ page lenguaje = "java" contentType = "text/html; charset = utf-8" pageEncoding = "Utf-8"%> <%@ include file = "/componentes/common/taglib.jsp"%> <%@ include file = "/componentes/comunes/csslib.jsp"%> <fead> <link type = "text/css" rel = "stylesheet" href = "$ {ctx} /css/deal/my_pay_list.css"/> </head> <body <nid> <form id = "jqgridform" rol = "formy =" formy "" Action = "$ {ctx}/trast/dataablePayDeAlordersList" método = "post"> <div> <div> <etiqueta for = "name"> nombre del proyecto: </sel etiqueta> <div> <input type = "text" name = "name" id = "name" placeholder = "por favor ingrese el nombre del proyecto" valor = ""/> </div> </div> </div> <div> <div> <div> <divs> <butinón " id = "SearchBtn"> Seech </boton> </div> </div> <viv> <viv> <table id = "pageGrid" rel = "jqgridform"> </table> <div id = "pageGridpager"> </div> </div> </form> src = "$ {ctx} /js/deal/my_pay_list.js"> </script> </body> </html>Los proyectos de cada persona varían mucho. En el código listado, solo nos centramos en la sección JQGRID:
id="jqgridForm" , aquí tenemos un formulario de formulario con una capa de condiciones de búsqueda para JQGrid, es decir, la parte de búsqueda enumerada en las representaciones. Al hacer clic en el botón de búsqueda, las condiciones de consulta del campo Formulario se envían al controlador y se obtienen los datos obtenidos. id="searchBtn" , define el botón de búsqueda, que se utilizará más adelante en la modularidad. <table id="pageGrid" rel="jqgridForm"></table> <div id="pageGridPager"></div> Defina el elemento de tabla de JQGrid y el elemento de pie de página de JQGRID. Las reglas utilizadas por mi proyecto están temporalmente de acuerdo con esta regla, y también puede tener sus propias reglas. Al especificar la identificación del formulario por REL, es más fácil usar el formulario de recuperación de la tabla. ②, los propios parámetros constructivos de Jqgrid
Construyendo los parámetros, los extraí en my_pay_list.js en ①.
$(function() { var jqOption = { datatype : "xml", mtype : "POST", shrinkToFit : true, viewrecords : false, rownumbers : false, autowidth : true, height : "100%", colNames : [ 'id', 'status', 'project information', 'project status', 'order number', 'project name', 'order time', 'payment amount', 'supported cantidad ',' status de orden ',' operación '], colmodel: [{name:' id ', index:' id ', hidden: true}, {name:' status ', index:' status ', hidden: true}, {name:' image_str ', index:' image_str ', width: 140, resisable: false, false: false, formatter: function (cellvalue, row) row) (CellValue == 'Costo total de pago:') {return CellValue; parseInt ($ (RowObject) .find ("status"). Text ()); {return '<a target = "_ en blanco" href = "' + común.ctx + '/trato/showdealor/' + id + '"> Ver detalles </a>'; ], xmlReader: {repetitems: false, root: "pageGrid", fila: "map", página: 'página', total: 'total', registros: 'registros', id: 'id'}, rOwnum: 50, rowList: [50, 100, 200, 300], pROGER: "#pagegridPager", pie: verdadero, load, loaderRor: yunm.aRoMor, granMor, yunm. function () {var $ form = $ ("#" + $ ("#PageGrid"). attr ("rel")); $ ("#PageGrid"). FooterData ("set", {image_str: "Costo de pago total:", Order_Price: Json.message}); // Dialog if ($ .fn.AJAXTODIALOG) {$ ("A [Target = Dialog]", $ ("#PageGrid"). Ajaxtodialog ();Los estudiantes que no están familiarizados con JQGrid recomiendan leer primero la demostración de JQGRID y los documentos oficiales de JQGRID. Por supuesto, para los estudiantes que ya están familiarizados con JQGrid, DOC y Demo son definitivamente una lectura obligada.
Hay muchos atributos enumerados en el archivo anterior. No presentaré demasiado a JQGrid. El tema principal de este artículo es introducir cómo incrustar a JQGrid en Bootstrap. El punto clave no es introducir JQGRID. Solo presentaré algunos puntos clave:
formatter: function(cellvalue, options, rowObject) { , los formatters todavía se usan muy a menudo, por lo que es muy importante obtener el valor de la celda correspondiente. My JQGrid usa el formato de datos XML (DataType: "XML"), por lo que puede encontrar el valor de la columna Deal_ID correspondiente a través de $(rowObject).find("deal_id").text() . xmlReader : { repeatitems : false, root : "PageGrid", presta atención a los valores de los parámetros en XMLReader. En la próxima introducción, la operación de datos de JQGRID se introducirá en detalle, que está relacionada con la encapsulación de datos XML de fondo. $("#pageGrid").footerData("set", {image_str : "支付总花费：", order_price : json.message}); , Con respecto al método de pie de página, también es muy conveniente de usar, y el efecto puede referenciarse como el efecto. initEnv(jqOption); método. Después de la página de carga, pasamos los parámetros de inicialización de JQGRID al método InitenV. En la posterior modularización de JQGrid en Bootstrap, presentaremos el método InitenV. ③, JQGrid Modularidad en Bootstrap
En ②, notamos el método InitenV, por lo que este método está construido con trabajo de encapsulación modular específicamente para JQGRID.
Método InitenV
function initenv (jqOption) {$ (ventana) .resize (function () {initLayout ();}); initui (nulo, jqOption);}En este método, veremos el método InitLayout y el método initui, y el contenido específico se introducirá más adelante.
initlayout
function initLayout () {$ ("table [rel = jqGridForm]"). Cada (function () {var rel = $ (this) .Attr ("rel"); if (rel) {var $ form = $ ("#" + rel); var tableWidth = $ form.width (); $ (this) .setgridwidth (tablewidth, verdadero);});});});});})Es decir, cuando se escala la ventana, volvemos a dibujar el ancho para que JQGrid se adapte al diseño receptivo de Bootstrap. El método utilizado es el método SetGridWidth de JQGRID.
initui
función initui (_box, jqOption) {var $ p = $ (_ box || documento); if (jqOption) {yunm.debug ("inicializeJqGrid"); var $ form = $ ("#" + $ ("#PageGrid"). attr ("rel")); Yunm.debug (yunm.array2obj ($ form.serializearray ())); // Inicializar var op = $ .extend ({url: $ form.attr ("acción"), postdata: yunm.array2obj ($ form.SerializearRay ()),}, jqOption); $ ("#PageGrid"). JqGrid (OP); // Botón de búsqueda $ ("#SearchBtn", $ form) .Click (function () {$ ("#PageGrid"). JqGrid ('SetGridParam', {url: $ form.attr ("Action"), Page: 1, postdata: yunm.array2obj ($ form.serializearRay ()); $ ("#PageGrid"). Trigger ("ReloadGrid"); // barra de herramientas, elimine la esquina redondeada del botón $ (". Btn", $ form) .each (function () {var $ this = $ (this); $ this.css ({"border-radius": "0px", "border-bottom": "0",});}); }} array2obj: function (array) {var params = $ ({}); $ .each (array, function (i) {var $ param = $ (this) [0]; params.attr ($ param.name, $ param.value);}); return params [0];},Si ha leído mi serie anterior de artículos, no estará demasiado familiarizado con el método initui. Los amigos que están familiarizados con DWZ, naturalmente, no se desconocen con él. La mayoría de las plantillas en mi proyecto aún dependen de DWZ. Gracias a estos seniors.
var $form = $("#" + $("#pageGrid").attr("rel")); Dado que asociamos la condición de formulario de formulario en JQGRID, podemos obtener el objeto de formulario de formulario aquí. Cuando obtenemos el objeto de formulario de formulario, naturalmente obtendremos el valor del campo de búsqueda ( $form.serializeArray() ). Después de obtener el valor del campo de búsqueda del formulario del formulario, debe procesar en este momento. Sabemos que cuando JQGrid pasa los parámetros al controlador, es necesario enviar campos relacionados con paginación y ordenados (página, filas, sord, sidx). El método utilizado es $("#pageGrid").jqGrid({postData:xxx}); Normalmente, cuando enviamos formularios de formulario, solo necesitamos usar $form.serializeArray() , pero si en este momento, simplemente reemplace xxx con $form.serializeArray() , entonces los campos relacionados con paginación y clasificados (página, filas, sord, sidx) no se obtendrán en el controlador. Este es un conflicto. ¿Cómo lidiar con eso en este momento? La solución es objetificar los datos del formulario (Método Array2OBJ), y luego enviamos el valor del campo de búsqueda junto con los campos relevantes de la paginación y la clasificación al controlador a través de var op =$.extend({url:$form.attr("action"),postData:YUNM.array2obj($form.serializeArray()),},jqOption);$("#pageGrid").jqGrid(op); $("#searchBtn", $form).click Haga clic en Recarga los datos de JQGrid encapsulando el evento de clic. $(".btn", $form).each(function() { El método aquí recuperará el botón para eliminar las esquinas para que sea más adecuada para JQGrid, consulte las representaciones.
La parte de operación de datos, creo, incluye el paso de los parámetros de búsqueda, el paso de parámetros de clasificación de paginación y la redacción de declaraciones SQL.
Con respecto al paso de los parámetros, la encapsulación de parámetros front-end se ha introducido en ③. Echemos un vistazo a cómo se procesan los datos en el controlador.
Primero, definamos PageGrid, que es la fuente de datos de XMLReader en JQGRID.
paquete com.honzh.common.page; import java.util.list; import com.thoughtworks.xstream.annotations.xstreamalias; @xstreamalias ("pageGrid")@supresswarnings ("rawtypes") public class pagegrid {private int página; privado int total; Registros de intes privados; datos de la lista privada; public int getPage () {return this.page; } public void setPage (int página) {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 registros) {this.Records = registros; } lista pública getData () {return this.data; } public void setData (datos de lista) {this.data = data; }}Xstream.jar se requiere en el proyecto y descárguelo usted mismo.
Xstreamcomponent.java
paquete com.honzh.common.page; import org.apache.commons.lang.stringutils; import com.thoughtworks.xstream.xstream; import com.thoughtworks.xstream.converters.converter; import.thoughtworks.xstream.io.xml.domdriver; import.theathworks.xstream.mapper.mapper. com.thoughtworks.xstream.mapper.xstream11xmlfiendlyMapper; public class xstreamComponent {private xstream xstream; public static xstreamComponent NewInStance () {xStreamComponent XMLCOMPONENT = new XStreamComponent (); xmlComponent.alias (nueva clase [] {PageGrid.class}); return xmlComponent; } public xStreamComponent () {this.xstream = new XStream (new DomDriver ()); } public String tOxml (object obj) {return this.xstream.toxml (obj); } public String TopAxml (Object obj) {RegisterConverter (new MapCustomConverter (new DefaultMapper (xstream11xmlfriendlyMapper.class.getClassLoader ()))); return toxml (obj); } objeto público fromPageXml (String xml) {RegisterConverter (new MapCustomConverter (new DefaultMapper (xstream11xmlfriendlymapper.class.getClassLoader ())); return dexml (xml); } objeto público fromxml (string xml) {return this.xstream.fromxml (xml); } @SupplesWarnings ("RawTypes") public void Processannotations (tipo de clase) {this.xstream.processannotations (type); } @SupplesWarnings ("RawTypes") public void Processannotations (class [] tipos) {this.xstream.processannotations (tipos); } @SupplesWarnings ("RawTypes") public void alias (nombre de cadena, tipo de clase) {this.xstream.alias (nombre, tipo); } @SupplesSwarnings ("RawTypes") public void alias (class [] tipos) {para (type de clase: tipos) {string className = type.getName (); intente {string [] classnames = stringUtils.split (classname, "."); this.xstream.alias (classnames [(classnames.length - 1)], type); } catch (excepción ex) {this.xstream.alias (classname, type); }}} public void registerConverter (convertidor convertidor) {this.xstream.registerConverter (convertidor); } @SupplesWarnings ("RawTypes") public void useAtTributeFor (clase definida, string fieldName) {this.xstream.USeAtTributeFor (DefinedIn, fieldName); }}El PageGrid se encapsula principalmente como un objeto XML y luego se pasa al extremo frontal.
MapCustomConverter.java
paquete com.honzh.common.page; import java.util.hashmap; import java.util.hashtable; import java.util.iterator; import java.util.map; import com.thoughtworks.xstream.converters.marshallingcontext; import com.thoughtworks.xstream.io.hierchicalstreamReader; import com.thoughtworks.xstream.io.hierchicalstreamwriter; import com.thoughtworks.xstream.mapper.mapper; clase public mapcustomConverter extiende abstractCollectionConverter {public mapcustomConverter (mapper) {super (mapper (mapper); } @SupplesWarnings ("RawTypes") public boolean CanConvert (tipo de clase) {return (type.equals (hashmap.class)) || (type.equals (hashtable.class)) || (type.getName (). Equals ("java.util.linkedhashmap")) || (type.getName (). Equals ("sun.font.attributeMap")); } @SupplesSwarnings ({"RawTypes"}) public void Marshal (fuente de objetos, escritor jerárquico de escritores de escritores, contexto marshallingcontext) {map map = (map) fuente; for (iterator iterator = map.entryset (). iterator (); iterator.hasNext ();) {map.entry entry = (map.entry) iterator.next (); escritor.startnode (entry.getKey () == NULL? "NULL": Entry.getKey (). ToString ()); Writer.SetValue (Entry.getValue () == NULL? "": Entry.getValue (). ToString ()); Writer.endNode (); }} @SupessWarnings ("RawTypes") Objeto público UNMARSHAL (HERARCHICICALSTREAMERACE Reader, unmarshallingContext context) {MAP MAP = (MAP) CreateCollection (context.getRequiredType ()); populatemap (lector, contexto, mapa); mapa de retorno; } @SupplesWarnings ({"RawTypes", "sin control"}) protegido Void PopulatEmap (HerarchicalStreamReader Reader, UnmarshallingContext Context, Map Map) {while (Reader.hasmorechildren ()) {Reader.MovedOwn (); Key de objeto = Reader.getNodeName (); Valor de objeto = lector.getValue (); map.put (clave, valor); Reader.MoveUp (); }}}Convierte principalmente el hashmap recuperado en la base de datos en datos de formato XML estándar.
Baseconditionvo.java
paquete com.honzh.common.persistence; import java.util.hashmap; import java.util.map; importar org.apache.ibatis.session.rowbounds;/** * La clase de configuración de parámetros durante la consulta de paginación. <br> * * <p> * 1.Page_Show_Count─f Course, la página predeterminada muestra 10. 2.Pagenum──whha Page. <br> * 3.numperpage─ ¿HOW MUCHO muestra una página? Cuando está vacío, se muestra Page_Show_Count. <br> * 4.TotalCount── Número Total. TotalCount/NumperPage = cuántas páginas <br> * 5.Orderfield── columnas sentadas. <br> * 6. Orientación de ordenadores. La dirección de la clasificación. * </p> */public class BaseconditionVo {public final static int page_show_count = 50; privado int pagenum = 1; privado int numperPage = 0; Private Long TotalCount = 0; String private String Orderfield = ""; String private ordendirection = ""; /*** @fields PS: tipos de parámetros encapsulados. */ private map <string, object> mo = new Hashmap <String, Object> (); 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 ordenfield; } 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 creeeroWBounds () {RowBounds RO = new RowBounds (this.getStartIndex (), this.getNumperPage ()); devolver ro; } / ** * @title: addParams * @Description: Agregar condiciones de consulta * @param clave * @param valor * / public void addParams (tecla de cadena, valor de objeto) {this.getmo (). Put (Key, Value); } / ** * @title: getParams * @Description: obtenga condiciones de consulta * @param Key * @return * / public object getParams (tecla de cadena) {return this.getmo (). Get (key); } / ** * @return the mo * / public map <string, object> getmo () {return mo; } / ** * @param mo * el mo para establecer * / public void setmo (map <string, object> mo) {this.mo = mo; } @Override public String toString () {return "condición:" + pagenum + "," + numperPage + "," + totalCount + "," + Orderfield + "," + OrderDirection + "," + Mo; }}El objeto de datos de consulta para la paginación, incluidos los campos de paginación, clasificación y búsqueda.
protegido baseconditionvo getBaseconditionVofortable () {baseconditionVo vo = new BaseConditionVo (); // Parámetros de paginación int currentPage = getParatoint ("página"); tames int = getParatoint ("filas"); String sortOrder = getpara ("sord"); String sortCol = getpara ("sidx"); vo.setNumperPage (tamaños); Vo.setPagenum (CurrentPage); Vo.setOrderfield (sortCol); vo.setOrderDirection (sortOrder); regresar vo; } Convierta los parámetros pasados por JQGrid a BaseconditionVo Pagination Consult Object. protegido void renderXml (httpServletResponse Res, string xmlResponse) {try {res.setcharacterEncoding ("utf-8"); res.setheader ("Content-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); }}Escribe XML en la transmisión de salida.
Después de definir estos objetos básicos, comenzaremos a obtener y aprobar datos.
@SupplesSwarnings ("RawTypes") @RequestMapping (value = "datablePayDealorDersList") public void dataPayDealorDersList (httpServletResponse respuesta) {try {logger.debug ("Obtener el orden que pagué"); XstreamComponent xStreamComponent = xStreamComponent.NewinStance (); // Obtener parámetros de lista BaseConditionVo vo = getBaseconditionVofortable (); vo.addparams ("nombre", getpara ("nombre")); logger.debug ("Pagué la consulta de pedidos" + Vo); // El proyecto que creé list myDealorders = Dealorderservice.getBySeSeUid (Vo, Vo.CreaterowBounds ()); Long Count = DealorderService.SearchIsSuetotalCount (Vo); String xmlResponse = xStreamComponent.TOPAGEXML (createPageGrid (mydealorders, vo, count.intvalue ())); renderXml (respuesta, xmlResponse.replaceAll ("__", "_")); } Catch (UncategorizeSQLException e) {logger.error (e.getMessage ()); logger.error (e.getMessage (), e); renderXml (respuesta, constants.query_error); } catch (excepción e) {logger.error (e.getMessage ()); logger.error (e.getMessage (), e); renderXml (respuesta, constants.server_error); }}Expliquemos en detalle:
1. XStreamComponent.newInstance() crea un objeto de flujo XML.
2. BaseConditionVO vo = getBaseConditionVOForTable(); Cree un objeto de parámetro de consulta de paginación.
3. vo.addParams("name", getPara("name")); Coloque el valor del campo de búsqueda en el objeto de consulta.
4. dealOrderService.getByIssueUid(vo, vo.createRowBounds()); El método de consulta de paginación de mybatis es súper simple. Un amigo del grupo solía crear especialmente un componente de paginación de mybatis. Creo que usar el método original de consulta MyBatis es más eficiente. Después de eso, escribiremos el método de escritura SQL correspondiente de XML en MyBatis.
5. renderXml(response, xmlResponse.replaceAll("__", "_")); Escriba datos en el flujo de salida de salida de JSP.
Finalmente, presentemos cómo obtener datos de paginación a través de MyBatis.
mappper.java
paquete com.honzh.biz.database.mapper; import java.math.bigDecimal; import java.util.hashmap; import java.util.list; import org.apache.ibatis.session.rowbounds; import.honzh.common.persistence.basecondition; @SupessWarnings ("RawTypes") Lista <S Hashmap> GetBySeSeUid (BaseConditionVo VO, RowBounds CreeLEnBounds);}Los dos objetos que desea pasar mapper.xml son BaseconditionVo y Paging Rowbounds. SQL en XML se realizará automáticamente.
mappper.xml
<select id = "getByIssuid" dentType = "hashmap" parametertype = "map"> select * de daa donde es_delete = 0 <if test = "Mo.name! = null y mo.name! = '' '"> y y.name Like concaT ('%',' $ {mo.name} ','%') </if> <elegir> <when when test! ! = '' "> Orden por $ {ordenfield} <if test =" ordendirection! = Null y orderDirection! = '' '' "> $ {OrderDirection} </if> </when> <lo contrario> Order por d.order_time descif </lo contrario> </elige> </select>Nunca puede prestar atención a Rowbounds, MyBatis encapsulará automáticamente el límite para usted. El nombre del dominio de búsqueda se puede obtener directamente a través de Mo.Name o. Orderfield y OrderDirection también se pasan.
Hasta ahora, todo el bootstrap integrado en JQGrid ha terminado con éxito. Ok, ¡haz que tu mesa sea increíble!