Os componentes de tabela nativos da Bootstrap podem atender apenas a exibição de dados simples e não podem atender aos requisitos mais operacionais. Obviamente, você pode encontrar um componente de tabela baseado em inicialização chamado "Datatables-1.10.11", mas se você não souber muito sobre a API, será doloroso usar. No entanto, se você optar por usar o JQGrid, este tutorial trará uma solução para esta tabela operacional.
1. Exibição de efeito
OK, basta mostrar esta foto. Eu acredito que você se apaixonou pela versão de bootstrap do JQGrid. É muito compatível com o Bootstrap e é simplesmente perfeito. Obviamente, isso requer algumas alterações no JQGrid do motivo e para encapsular os componentes.
2. Download de recursos
Enfim, eu amo compartilhar. Você pode baixar o código do componente do JQGrid no site oficial do JQGrid, mas requer algumas alterações após o download. Em seguida, enviei diretamente o JQGrid modificado para o Git e você só precisa importar os arquivos fornecidos para o seu projeto correspondente.
Além disso, você também precisa baixar um jQuery-ui-1.10.0.custom.css , e não fornecerei o endereço de download, mas acredito que você definitivamente o encontrará. Mesmo se você usar uma garota do Baidu que freqüentemente tem acidentes, poderá encontrá -lo.
3. O que é este artigo sobre
Desde que eu criei o grupo QQ, alguns estudantes se juntaram ao grupo em um "fluxo incessante", mas também descobri que o primeiro passo do grupo veio a mim para pedir uma demonstração ou código do projeto. Eu não gosto disso. Faça você mesmo, implemente o seguinte e transforme -o, e será o seu próprio. Obviamente, você não receberá mais ajuda ao copiar meu código completamente. Espero que os alunos acima tomem a iniciativa quando estiverem estudando.
Depois de dizer a pequena bobagem acima, vamos voltar ao ponto e falar sobre o que nosso blog fala principalmente e qual é a chave para incorporar o JQGrid no Bootstrap. Eu resumi o seguinte:
Esquema de layout JQGrid no próprio parâmetros construtivos de bootstrap jqGrid
É provisoriamente dividido nas partes acima para ilustrar, mas deve -se notar que, devido a limitações de espaço, apenas idéias e algum código são fornecidos no blog.
①. O plano de layout do JQGrid no bootstrap
<! Doctype html> <html lang = "zh-cn"> <%@ página de página = "java" contentType = "text/html; charset = utf-8" PageEncoding = "utf-8"%> < file = "/componentes/common/cssslib.jsp"%> <head> <link type = "text/css" rel = "stylesheet" href = "$ {ctx} /css/deal/my_pay_list.css"/> </head> <body> <dorm> <form ID = "JQID" JQID "JQID" JQID ""/ Action = "$ {ctx}/reeR/dataablePayDealorDersList" Method = "post"> <div> <div> <gravador para = "name"> nomes do projeto: </cret> <div> <input type = "text" name = "name" id = "name" someholder = "por favor o nome do projeto" value = ""/> </> </> </> </> </> </> </> </" id = "searchbtn"> search </botão> </div> </div> <div> <div> <tabela id = "pageGrid" rel = "jqGridForm"> </tabela> <div id = "PageGridPager"> </miv> </div> </form> </div> <%@ iBred FILD = "/componentes/JSLIB/JSLIB/JSLIB. src = "$ {ctx} /js/deal/my_pay_list.js"> </script> </body> </html>Os projetos de cada pessoa variam muito. No código listado, focamos apenas na seção JQGrid:
id="jqgridForm" , aqui temos um formulário com uma camada de condições de pesquisa para JQGrid, ou seja, a peça de pesquisa listada nas renderizações. Ao clicar no botão de pesquisa, as condições de consulta do campo do formulário são enviadas ao controlador e os dados obtidos são obtidos. id="searchBtn" , define o botão de pesquisa, que será usado posteriormente na modularidade. <table id="pageGrid" rel="jqgridForm"></table> <div id="pageGridPager"></div> Defina o elemento da tabela do JQGrid e o elemento rodapé do JQGrid. As regras usadas pelo meu projeto concordam temporariamente com esta regra e você também pode ter suas próprias regras. Ao especificar o ID do formulário por Rel, é mais fácil usar o formulário de recuperação de tabela. ②, parâmetros construtivos do próprio JQGrid
Construindo os parâmetros, eu os extraí para my_pay_list.js em ①.
$(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 quantity', 'order status', 'operation'], colModel : [ { name : 'id', index : 'id', hidden : true }, { name : 'status', index : 'status', hidden : true }, { name : 'image_str', index : 'image_str', width : 140, resizable : false, sortable : false, formatter : function(cellvalue, options, rowObject) { if (CellValue == 'Custo total de pagamento:') {Return CellValue; = $ (rowObject) .find ("id"). text (); '/tras/showDealor/' + id + '"> visualize detalhes </a>';} if (status == 2) {return '<a target =" ajaxtodo "href ="' + Common.ctx + '/rei/receptder/' id + '"> confirmar o recibo </a>';}},}],}], xm], xeret: shreadr: shref), confirmar o receptor: "PageGrid", Row: "Map", Page: 'Page', Total: 'Total', Records: 'Records', Id: 'Id'}, ROWNUM: 50, Rowlist: [50, 100, 200, 300], Pager: "#PageGridPager", FootERRow: TrueRorror: Yunm.ajaxerror, GridComple ", GOODERROW: FUNCHERROR): YunM.Ajaxerror, $ ("#PageGrid"). Att ("rel")); Image_ST: "Custo total de pagamento:", Order_price: JSON.Message}); $ ("A [Target = Dialog]", $ ("#PageGrid")). Ajaxtodialog ();Os alunos que não estão familiarizados com o JQGrid recomendam a demonstração de JQGrid e os documentos oficiais do JQGrid primeiro. Obviamente, para estudantes que já estão familiarizados com JQGrid, Doc e Demo são definitivamente uma leitura obrigatória.
Existem muitos atributos listados no arquivo acima. Não vou apresentar muito o JQGrid. O tema principal deste artigo é introduzir como incorporar JQGrid no bootstrap. O ponto -chave é não introduzir JQGrid. Vou apresentar apenas alguns pontos -chave:
formatter: function(cellvalue, options, rowObject) { , Formatters ainda são usados com muita frequência, por isso é muito importante obter o valor da célula correspondente. Meu JQGRID usa o formato XML (Datatype: "XML"), para que você possa encontrar o valor da coluna doel_ID correspondente através de $(rowObject).find("deal_id").text() . xmlReader : { repeatitems : false, root : "PageGrid", Preste atenção aos valores dos parâmetros no XMLReader. Na próxima introdução, a operação de dados do JQGrid será introduzida em detalhes, que está relacionada ao encapsulamento de dados XML em segundo plano. $("#pageGrid").footerData("set", {image_str : "支付总花费：", order_price : json.message}); , Em relação ao método de Footerdata, também é muito conveniente de usar, e o efeito pode ser referenciado como efeito. initEnv(jqOption); método. Após a operação da página, passamos os parâmetros de inicialização do JQGrid para o método Initenv. Na modularização subsequente de JQGrid no bootstrap, apresentaremos o método Initenv. ③, modularidade jqGrid no bootstrap
Em ②, notamos o método Initenv, portanto esse método é construído com o trabalho modular de encapsulamento especificamente para JQGrid.
Método Initenv
função initenv (jqoption) {$ (window) .Resize (function () {initLayout ();}); initui (null, jqoption);}Neste método, veremos o método Initlayout e o método Initui, e o conteúdo específico será introduzido posteriormente.
initlayout
function initlayout () {$ ("tabela [rel = jqGridForm]"). cada (function () {var rel = $ (this) .attr ("rel"); if (rel) {var $ form = $ ("#" + rel); var tabelawidth = $ form.width (); $ (this).).Ou seja, quando a janela é dimensionada, reiniciamos a largura para o JQGrid se adaptar ao layout responsivo do Bootstrap. O método usado é o método setGridWidth do JQGrid.
initui
função initui (_box, jqoption) {var $ p = $ (_ box || document); if (jqoption) {yunm.debug ("InitializejqGrid"); var $ form = $ ("#" + $ ("#PageGrid"). att ("rel")); Yunm.debug (yunm.array2obj ($ form.SerializeArray ()); // inicialize var op = $ .extend ({url: $ form.attr ("ação"), pós -dados: yunm.array2obj ($ form.serializearray ()),}, jqOption); $ ("#PageGrid"). JQGrid (OP); // Botão de pesquisa $ ("#SearchBtn", $ form) .Click (function () {$ ("#PageGrid"). $ ("#PageGrid"). Trigger ("Reloadgrid"); // barra de ferramentas, remova o canto arredondado do botão $ (". btn", $ form) .Each (function () {var $ this = $ (this); $ this.css ({"borda-radius": "0px", "borda-bottom": "0",});}); }} Array2obj: function (Array) {var params = $ ({}); $ .ECH (Array, função (i) {var $ param = $ (this) [0]; params.attr ($ param.name, $ param.value);}); retornar params [0];},Se você leu minha série de artigos anteriores, não estará muito familiarizado com o método Initui. Amigos familiarizados com DWZ naturalmente não estarão familiarizados com isso. A maioria dos modelos do meu projeto ainda depende do DWZ. Obrigado a esses idosos.
var $form = $("#" + $("#pageGrid").attr("rel")); Como associamos a condição do formulário do formulário no JQGrid, podemos obter o objeto Formulário aqui. Quando obtemos o objeto de formulário, naturalmente obteremos o valor do campo de pesquisa ( $form.serializeArray() ). Depois de obter o valor do campo de pesquisa do formulário, você precisa fazer algum processamento no momento. Sabemos que quando o JQGrid passa parâmetros para o controlador, é necessário enviar paginação e campos relacionados classificados (página, linhas, sord, sidx). O método usado é $("#pageGrid").jqGrid({postData:xxx}); Normalmente, quando enviamos formulários, precisamos usar apenas $form.serializeArray() , mas se, no momento, apenas substituir o XXX por $form.serializeArray() , os campos relacionados a paginação e classificados (Page, linhas, SORD, SIDX) não serão obtidos no controlador. Este é um conflito. Como lidar com isso neste momento? A solução é objetivar os dados do formulário (método Array2obj) e, em seguida, enviamos o valor do campo de pesquisa junto com os campos relevantes de paginação e classificação para o controlador através var op =$.extend({url:$form.attr("action"),postData:YUNM.array2obj($form.serializeArray()),},jqOption);$("#pageGrid").jqGrid(op); $("#searchBtn", $form).click Recaro os dados do JQGrid, encapsulando o evento de clique. $(".btn", $form).each(function() { O método aqui recuperará o botão para remover os cantos para torná-lo mais adequado para JQGrid, consulte as renderizações. ④, operação de dados do JQGrid
Acho que a parte da operação de dados inclui a passagem dos parâmetros de pesquisa, a passagem dos parâmetros de classificação da paginação e a redação de instruções SQL.
Em relação à passagem de parâmetros, o encapsulamento do parâmetro front-end foi introduzido em ③. Vamos dar uma olhada em como os dados são processados no controlador.
Primeiro, vamos definir a PageGrid, que é a fonte de dados do XMLReader no JQGrid.
pacote com.honzh.common.page; importar java.util.list; importar com.thoughtworks.xstream.annotações.xstreamalias; @xstreamalias ("PageGrid")@supressorwarnings ("RawTypes") public class PageGrid {private int page; privado int total; registros privados int; dados de lista privada; public int getPage () {return this.page; } public void setPage (int página) {this.page = página; } 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; } list public getData () {return this.data; } public void setData (dados da lista) {this.data = data; }}O xstream.jar é necessário no projeto e faça o download sozinho.
XStreamComponent.java
pacote com.honzh.common.page; importar org.apache.commons.lang.stringutils; importar com.thoughtworks.xstream.xstream; import.thoughtworks.xstream.converters.converter; import com.thoughtworks.xstream.io.ml.efstriver; import.thoughtworks; com.thoughtworks.xstream.mapper.xstream11xmlfriendlymapper; public Classe XstreamComponent {private xStream XStream; public static xstreamComponent newInstance () {xstreamComponent xmlComponent = new xStreamComponent (); xmlComponent.alias (nova classe [] {PageGrid.class}); retornar xmlComponent; } public xStreamComponent () {this.xStream = new XStream (new Domdriver ()); } public string toxml (object obj) {return this.xstream.toxml (obj); } public String TOPAGAGEXML (Object Obj) {RegisterConverter (new MapCustomConverter (new DefaultMapper (xStream11xmlfriendlyMapper.class.getclassloader ()))); retornar toxml (obj); } public Object fromPagexml (String xml) {RegisterConverter (new MapCustomConverter (new DefaultMapper (xStream11xmlfriendlyMapper.class.getclassloader ()))); retornar dexml (xml); } public Object Fromxml (string xml) {return this.xstream.fromxml (xml); } @Suppresswarnings ("rawtypes") public void Processannotações (tipo de classe) {this.xstream.processannotações (tipo); } @Suppresswarnings ("RawTypes") Public void Processannotações (classe [] tipos) {this.xstream.processannotações (tipos); } @Suppresswarnings ("RawTypes") Alias public void (nome da string, tipo de classe) {this.xstream.alias (nome, tipo); } @Suppresswarnings ("RawTypes") Alias public void (classe [] tipos) {for (classe tipo: tipos) {string className = type.getName (); tente {string [] classNames = stringUtils.split (className, "."); this.xstream.alias (classNames [(classNames.Length - 1)], tipo); } catch (Exceção ex) {this.xstream.alias (className, tipo); }}} public void RegisterConverter (conversor conversor) {this.xstream.registerConverter (conversor); } @SUPletSwarnings ("RawTypes") public void useAttribute for (classe DefinedIn, string fieldName) {this.xstream.useAttribute for (DefinedIn, FieldName); }}O PageGrid é encapsulado principalmente como um objeto XML e depois passou para o front -end.
MapCustomConverter.java
pacote com.honzh.common.page; importar java.util.hashmap; importar java.util.hashtable; importar java.util.iterator; import java.util.map; import.thughtworks.xstream.CoNversters.MarshalingContext; import.thoughworks.xtream.xstream.Coverters.MarshalingContet; com.thoughtworks.xstream.io.hierchicalstreamreader; importar com.thoughtworks.xstream.io.hierchicalstreamwriter; importar com.thoughtworks.xstream.mapper.mapper; classe pública mapcustomConverter estende abstrataCollectionCoverter {public MapCustomConverter (; } @Suppresswarnings ("RawTypes") public boolean canConvert (tipo 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 marechal (fonte do objeto, escritor hierárquico -lriter, marshallingcontext contexto) {map map = (map) fonte; for (iterator iterator = map.entrySet (). iterator (); iterator.hasNext ();) {map.entry Entry = (map.entry) iterator.next (); writer.startNode (entradas.getKey () == null? writer.setValue (entradas.getValue () == null? "": Entry.getValue (). ToString ()); writer.endNode (); }} @Suppresswarnings ("RawTypes") Public Object UNARSHAL (leitor hierárquico do leitor do READOR, UNMARSHALLINGCONTEXT) {map map = (map) createCollection (context.getRequiredType ()); populatemap (leitor, contexto, mapa); mapa de retorno; } @Suppresswarnings ({"RawTypes", "desmarcado"}) Void protegido Populatemap (leitor hierárquico do Reader, UNMARSHALLINGCONTEXT contexto, mapa mapa) {while Chave de objeto = leitor.getNodename (); Valor do objeto = leitor.getValue (); map.put (chave, valor); leitor.moveup (); }}}Ele converte principalmente o hashmap recuperado no banco de dados em dados de formato XML padrão.
BasEconditionvo.java
pacote com.honzh.common.persistence; importar java.util.hashmap; importar java.util.map; importar org.apache.ibatis.session.rowbounds;/** * 2.Pagenum── Qual página. <br> * 3.NumPage─--como é mostrado uma página? Quando está vazio, Page_Show_Count é exibido. <br> * 4.TotalCount── Total Number. TOTALCOUNT/NUMPERPAGE = quantas páginas <br> * 5.OrmingField── colunas de derrotas. <br> * 6.Orderdirectionsto - a direção da classificação. * </p> */public class BasEconditionvo {public final static int Page_show_count = 50; private int pagenum = 1; private int numPage = 0; Private Long TotalCount = 0; Private String orderfield = ""; private string orderdirection = ""; /*** @fields ps: encapsule os tipos de parâmetros. */ mapa privado <string, objeto> mo = new hashmap <string, object> (); public int getPagenum () {return pagenum; } public void setPagenum (int pagenum) {this.pagenum = pagenum; } public int getNumPerpage () {return numPage> 0? NUMPERPAGE: Page_Show_Count; } public void setNumPage (int numPage) {this.numPerpage = numPerpage; } public String getOrderfield () {return orderfield; } public void Setorderfield (String Orderfield) {this.orderfield = Orderfield; } public string getOrderDirection () {return "desc" .equals (ordem de ordem)? "Desc": "ASC"; } public void setOrderDirection (String OrderDirection) {this.OrderDirection = OrderDirection; } public long getTotalCount () {return totalCount; } public void SettalTalCount (Long TotalCount) {this.TotalCount = TotalCount; } public int getstartIndex () {int pagenum = this.getpagenum ()> 0? this.getpagenum () - 1: 0; retornar pagenum * this.getNumPerpage (); } public RowBounds CRESEROWBOUNDS () {rowbounds ro = new RowBounds (this.getStartIndex (), this.getNumPerpage ()); retornar ro; } / ** * @title: addParams * @Description: Adicione condições de consulta * @Param Key * @param Valor * / public void AddParams (tecla String, Valor do objeto) {this.getMo (). Put (chave, valor); } / ** * @title: getParams * @Description: Obtenha condições de consulta * @param key * @return * / public Object getParams (chave de string) {return this.getmo (). Get (key); } / ** * @return the mo * / public map <string, object> getMo () {return mo; } / ** * @param mo * o MO para definir * / public void setMo (map <string, object> mo) {this.mo = mo; } @Override public string tostring () {return "condition:" + pagenum + "," + numPage + "," + totalCount + "," + orderfield + "," + orderdirection + "," + mo; }}O objeto de dados de consulta para paginação, incluindo campos de paginação, classificação e pesquisa.
protegido baseconditionvo getBaseConditionVorTable () {BasEconditionVo Vo = new BaseConditionVo (); // parâmetros de paginação int currentpage = getParatoint ("página"); tamanhos int = getParatoint ("linhas"); String sortorder = getPara ("sord"); String sortCol = getPara ("SIDX"); Vo.setNumPage (tamanhos); Vo.setPagenum (CurrentPage); Vo.setorderfield (SortCol); Vo.setOrderDirection (Sortorder); retornar vo; } Converta os parâmetros passados pelo JQGrid para o objeto de consulta de paginação BasEconditionvo. Void protegido 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); }}Grava XML no fluxo de saída.
Depois de definir esses objetos básicos, começaremos a obter e passar dados.
@Suppresswarnings ("RawTypes") @RequestMapping (value = "DATABLEPAYDEALORDERSLIST") public void DataPayDealorDersList (httpServletResponse Response) {Try {Logger.debug ("Get the Ordem que paguei"); XStreamComponent xStreamComponent = xStreamComponent.NewInstance (); // Obtenha parâmetros da lista BASECONDITIONVO VO = getBaseConditionVorTable (); vo.addparams ("nome", getpara ("nome")); Logger.debug ("Eu paguei a consulta do pedido" + VO); // O projeto que eu criei LIST myDealordeers = revendedores.getbybyisseuid (vo, vo.crerowBounds ()); Long count = revendederservice.searchissuetotalCount (VO); String xmlResponse = xStreamComponent.topagexml (createPageGrid (MyDealorders, vo, count.intValue ())); renderxml (resposta, xmlResponse.Replaceall ("__", "_")); } Catch (UncategorizedSqLexception e) {Logger.error (e.getMessage ()); Logger.error (e.getMessage (), e); renderxml (resposta, constantes.query_error); } catch (Exceção e) {Logger.error (e.getMessage ()); Logger.error (e.getMessage (), e); renderxml (resposta, constantes.Server_error); }}Vamos explicar em detalhes:
1. XStreamComponent.newInstance() cria um objeto XML Stream.
2. BaseConditionVO vo = getBaseConditionVOForTable(); Crie um objeto de parâmetro de consulta de paginação.
3. vo.addParams("name", getPara("name")); Coloque o valor do campo de pesquisa no objeto de consulta.
4. dealOrderService.getByIssueUid(vo, vo.createRowBounds()); O método de consulta de paginação de Mybatis é super simples. Um amigo do grupo costumava criar especialmente um componente de paginação de Mybatis. Eu acho que usar o método de consulta Mybatis original é mais eficiente. Depois disso, escreveremos o método de escrita SQL correspondente do XML em Mybatis.
5. renderXml(response, xmlResponse.replaceAll("__", "_")); Escreva dados no fluxo de saída de saída do JSP.
Por fim, vamos introduzir como obter dados de paginação por meio do Mybatis.
mappper.java
pacote com.honzh.biz.database.mapper; importar java.math.bigdecimal; importar java.util.hashmap; importar java.util.list; import org.apache.ibatis.sesse.rowbounds; @Suppresswarnings ("RawTypes") Lista <Hashmap> getByisseuid (BasEconditionvo Vo, Rowbounds CreaterowBounds);}Os dois objetos que você deseja passar o mapero.xml são BasEconditionVo e Paging Relbounds. O SQL no XML paga automaticamente.
mappper.xml
<select id = "getByissueUid" resultType = "hashmap" parameterType = "map"> selecione * de daa onde is_delete = 0 <se test = "mo.name! = null e mo.name! Orderfield! = '' "> encomendar por $ {Orderfield} <se test =" OrderDirection! = NULL e OrderDirection! = '' "> $ {OrderDirection} </se> </When> <bem>Você nunca pode prestar atenção às lateiras, o Mybatis encapsulará automaticamente o limite para você. O nome do domínio de pesquisa pode ser obtido diretamente através do mo.name ou. Orderfield e OrderDirection também são aprovados.
Até agora, toda a bootstrap incorporada no JQGrid terminou com sucesso. Ok, torne sua mesa incrível!