Нативные компоненты таблицы Bootstrap могут соответствовать лишь простому отображению данных и не могут соответствовать более эксплуатационным требованиям. Конечно, вы можете найти компонент таблицы на основе начальной загрузки под названием «DataTables-1.10.11», но если вы не знаете много об API, его будет больно использовать. Однако, если вы решите использовать JQGRID, то этот урок принесет вам решение этой операционной таблицы.
1. Эффект дисплея
Хорошо, просто покажи эту картинку. Я считаю, что вы влюбились в начальную версию JQGrid. Он очень совместим с начальной загрузкой и просто идеально. Конечно, это требует некоторых изменений в JQGrid по причине и инкапсулировать компоненты.
2. Скачать ресурс
В любом случае, я люблю делиться. Вы можете скачать код компонента JQGrid с официального сайта JQGrid, но после загрузки требуется некоторые изменения. Затем я напрямую загружаю модифицированный JQGrid в GIT, и вам нужно только импортировать предоставленные файлы в соответствующий проект.
Кроме того, вам также необходимо скачать jquery-ui-1.10.0.custom.css , и я не буду предоставлять адрес загрузки, но я считаю, что вы обязательно найдете его. Даже если вы используете девушку из Байду, у которой часто случаются аварии, вы можете найти ее.
3. Что это за статью о
С тех пор, как я создал QQ Group, некоторые студенты присоединились к группе в «непрекращающемся потоке», но я также обнаружил, что первый шаг в группе пришел ко мне, чтобы попросить демонстрацию или код проекта. Мне это не нравится. Сделайте это самостоятельно, реализуйте следующее и преобразуйте его, и это будет вашей собственной делом. Вы, очевидно, не получите больше помощи от копирования моего кода. Я надеюсь, что вышеупомянутые студенты примут инициативу, когда они будут учиться.
Сказав приведенную выше чушь, давайте вернемся к делу и поговорим о том, о чем в основном говорит наш блог, и что является ключом к внедрению JQGrid в начальную загрузку. Я суммирую это следующим образом:
Схема макета JQGRID в Bootstrap собственных конструктивных параметров JQGRID
Он предварительно разделен на приведенные выше части, чтобы проиллюстрировать, но следует отметить, что из -за пространственных ограничений, только идеи и некоторые коды представлены в блоге.
①. План макета JQGrid в начальной загрузке
<! Doctype html> <html lang = "zh-cn"> <%@ page language = "java" contentype = "text/html; charset = utf-8" pageencoding = "utf-8"%> <%@ inclod file = "/components/common/csslib.jsp"%> <head> <link type = "text/css" rel = "stylesheet" href = "$ {ctx} /css/deal/my_pay_list.css"/> </head> <body> <div> <form id = "jqgridform" rol = "form" action="${ctx}/deal/dataablePayDealOrdersList" method="post"> <div> <div> <label for="name">Project name: </label> <div> <input type="text" name="name" id="name" placeholder="Please enter the project name" value="" /> </div> </div> </div> <div> <div> <button type="button" id = "searchbtn"> search </button> </div> </div> <div> <div> <table id = "pagegrid" rel = "jqgridform"> </table> <div id = "pagegridpager"> </div> </div> </form> </div> <%@ include file = "/components/jslib/jslib. src = "$ {ctx} /js/deal/my_pay_list.js"> </script> </body> </html>Проекты каждого человека сильно различаются. В перечисленном коде мы сосредоточены только на разделе JQGRID:
id="jqgridForm" , здесь у нас есть форма формы со слоем условий поиска для JQGrid, то есть поисковой части, перечисленной на визуализациях. При нажатии на кнопку поиска условия запроса поля формы формы отправляются на контроллер, и получены полученные данные. id="searchBtn" , определяет кнопку поиска, которая будет использоваться позже для модульности. <table id="pageGrid" rel="jqgridForm"></table> <div id="pageGridPager"></div> Определить элемент таблицы jqgrid и элемент нижнего колонтитула jqgrid. Правила, используемые моим проектом, временно согласуются с этим правилом, и вы также можете иметь свои собственные правила. Указав идентификатор формы REL, легче использовать форму поиска таблицы. ②, собственные конструктивные параметры JQGrid
Построив параметры, я извлек их в my_pay_list.js в ①.
$(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 Количество ',' Status worts ',' Operation '], Colmodel: [{name:' id ', index:' id ', hidden: true}, {name:' status ', index:' status ', hidden: true}, {name:' image_str ', index:' image_str ', width: 140, resizizable: falseable: forsater: formater: formater: formater: formater: formater: formater: formatere {if (cellvalue == 'Общая стоимость оплаты:') {return cellvalue; Parseint ($ (rowobject) .find ("status"). Text ()); {return '<a target = "_ blank" href = "' + common.ctx + '/deal/showdealor/' + id + '"> просмотреть детали </a>'; ], xmlreader: {repeatItems: false, root: «pagegrid», row: «map», page: 'page', total: 'total', records: 'records', id: 'id'}, rownum: 50, rowlist: [50, 100, 200, 300], pager: "#pagegridpager", toneerrow: trueerror: yunm. {var $ form = $ ("#" + $ ("#pagegrid"). attr ("rel")); $ ("#pageGrid"). COOTERDATA ("SET", {Image_str: "Общая стоимость оплаты:", order_price: json.message}); } // диалог if ($ .fn.ajaxtodialog) {$ ("a [target = dialog]", $ ("#pagegrid")). ajaxtodialog ();Студенты, которые не знакомы с JQGrid, вообще рекомендуют прочитать демо JQGrid и официальные документы JQGrid в первую очередь. Конечно, для студентов, которые уже знакомы с JQGRID, DOC и DEMO, безусловно, обязательно обязательно прочитайте.
Есть много атрибутов, перечисленных в приведенном выше файле. Я не буду вводить JQGrid слишком много. Основная тема этой статьи - представить, как внедрить JQGrid в начальную загрузку. Ключевой момент не в том, чтобы ввести JQGrid. Я представлю только несколько ключевых моментов:
formatter: function(cellvalue, options, rowObject) { , форматеры все еще очень часто используются, поэтому очень важно получить значение соответствующей ячейки. Мой JQGrid использует формат данных XML (DataType: "xml"), так что вы можете найти значение соответствующего столбца deal_id через $(rowObject).find("deal_id").text() . xmlReader : { repeatitems : false, root : "PageGrid", , обратите внимание на значения параметров в XmlReader. В следующем введении будут подробно представлены операция данных JQGRID, что связано с фоновой инкапсуляцией данных XML. $("#pageGrid").footerData("set", {image_str : "支付总花费：", order_price : json.message}); Что касается метода TooerData, он также очень удобен в использовании, и эффект может быть назван как эффект. initEnv(jqOption); метод После нагрузки страницы мы передаем параметры инициализации JQGRID методу initenv. В последующей модуляризации JQGRID в начальной загрузке мы представим метод initenv. ③, модульность JQGRID в начальной загрузке
В ② мы заметили метод initenv, поэтому этот метод построен с модульной инкапсуляционной работой специально для JQGrid.
Метод initenv
function initenv (jqoption) {$ (window) .resize (function () {initlayout ();}); initui (null, jqoption);}В этом методе мы увидим метод initlayout и метод initui, и конкретный контент будет введен позже.
initlayout
function initlayout () {$ ("table [rel = jqgridform]"). Каждый (function () {var rel = $ (this) .attr ("rel"); if (rel) {var $ form = $ ("#" + rel); var tablewidth = $ form.width (); $ (this) .setgridwidth (tablewidth,);То есть, когда окно масштабируется, мы повторно вырвали ширину для JQGrid, чтобы адаптироваться к отзывчивому макету Bootstrap. Используемый метод является методом jQgrid SetGridWidth.
initui
function initui (_box, jqoption) {var $ p = $ (_ box || document); if (jqoption) {yunm.debug ("initiazizejqgrid"); var $ form = $ ("#" + $ ("#pagegrid"). attr ("rel")); Yunm.debug (yunm.array2obj ($ form.serializearray ())); // инициализировать var op = $. $ ("#pagegrid"). jqgrid (op); // кнопка поиска $ ("#searchbtn", $ form) .click (function () {$ ("#pagegrid"). Jqgrid ('setgridparam', {url: $ form.attr ("action"), page: 1, postdata: yunm.array2obj ($ form.serializearray ()),}); $ ("#pageGrid"). Trigger ("ReloadGrid"); // панель инструментов, удалите округлый угол кнопки $ (". Btn", $ form). }} array2obj: function (array) {var params = $ ({}); $. вернуть параметры [0];},Если вы прочитали мою предыдущую серию статей, вы не будете слишком незнакомы с методом initui. Друзья, которые знакомы с DWZ, естественно, не будут незнакомы с этим. Большинство шаблонов в моем проекте по -прежнему полагаются на DWZ. Спасибо этим пожилым людям.
var $form = $("#" + $("#pageGrid").attr("rel")); Поскольку мы связываем условие формы формы формы на JQGRID, мы можем получить объект формы формы здесь. Когда мы получим объект формы формы, мы, естественно, получим значение поля поиска ( $form.serializeArray() ). После того, как вы получите значение поля поиска формы, вам нужно сделать некоторую обработку в настоящее время. Мы знаем, что, когда JQGRID передает параметры контроллеру, необходимо отправлять пластинку и сортированные связанные поля (страница, ряды, Sord, SIDX). Используемый метод $("#pageGrid").jqGrid({postData:xxx}); Обычно, когда мы отправляем формы форм, нам нужно только использовать $form.serializeArray() , но если в настоящее время просто замените xxx на $form.serializeArray() , то в контроллере не будут получены поля под пейджинг и сортированными (страница, ряды, sord, sidx). Это конфликт. Как справиться с этим в это время? Решение var op =$.extend({url:$form.attr("action"),postData:YUNM.array2obj($form.serializeArray()),},jqOption);$("#pageGrid").jqGrid(op); в том, чтобы объективировать данные формы формы (метод Array2OBJ), а затем мы отправляем значение поля поиска вместе с соответствующими полями пейджинг var op =$.extend({url:$form.attr("action"),postData:YUNM.array2obj($form.serializeArray()),},jqOption);$("#pageGrid").jqGrid(op); $("#searchBtn", $form).click Reloads Data JQGrid, инкапсулируя событие Click. $(".btn", $form).each(function() { метод здесь получает кнопку, чтобы отключить углы, чтобы сделать ее более подходящим для JQGrid, см. рендеринг.
Я думаю, что операция данных включает в себя передачу параметров поиска, передачу параметров сортировки страниц и написание операторов SQL.
Что касается прохождения параметров, инкапсуляция параметров фронта была введена в ③. Давайте посмотрим, как данные обрабатываются в контроллере.
Во -первых, давайте определим PageGrid, который является источником данных XMLreader в JQGrid.
Пакет com.honzh.common.page; import java.util.list; import com.thoughtworks.xstream.annotations.xstreamalias; @xstreamalias ("pagegrid")@suppresswarnings ("ravtypes") public pagegrid {private int page; частный общий общий; Private Int Records; частные данные; public int getPage () {return this.page; } public void set -page (int page) {this.page = page; } public int getTotal () {return this.total; } public void centotal (int total) {this.total = otal; } public int getRecords () {return this.records; } public void setRecords (int records) {this.records = Records; } public List getData () {return this.data; } public void setData (list data) {this.data = data; }}xstream.jar требуется в проекте и загрузите его самостоятельно.
Xstreamcomponent.java
пакет com.honzh.common.page; import org.apache.commons.lang.stringutils; импорт com.thoughtworks.xstream.xstream; import com.thoughtworks.xstream.converters.converter; import com.thoughtworks.xstream.io.xml.domdrire; импорт com.thoustworks.xstream. com.thoughtworks.xstream.mapper.xstream11xmlfriendlymapper; public class xstreamcomponent {private xstream xstream; public static xstreamcomponent newinstance () {xstreamcomponent xmlcomponent = new XstreamComponent (); xmlcomponent.alias (новый класс [] {pagegrid.class}); вернуть XmlComponent; } public xStreamComponent () {this.xstream = new Xstream (new Domdriver ()); } public String toxml (Object obj) {return this.xstream.toxml (obj); } public String topagexml (Object obj) {RegisterConverter (New MapCustomConverter (New DefaultMapper (xstream11xmlfriendlyMapper.class.getClassLoader ()))); вернуть toxml (obj); } public object fromPagexml (String xml) {RegisterConverter (New MapCustomConverter (New DefaultMapper (xStream11xmlfriendlyMapper.class.getClassLoader ()))); вернуть fromxml (xml); } public Object fromxml (string xml) {return this.xstream.fromxml (xml); } @Suppresswarnings ("rawtypes") public void processannotations (class type) {this.xstream.processannotations (type); } @Suppresswarnings ("rawtypes") public void processannotations (class [] types) {this.xstream.processannotations (types); } @Suppresswarnings ("ravtypes") public void псевдоним (название строки, тип класса) {this.xstream.alias (name, type); } @Suppresswarnings ("rawtypes") public void псевдоним (класс [] типы) {for (class type: types) {string classname = type.getName (); try {string [] classnames = stringutils.split (classname, "."); this.xstream.alias (classnames [(classnames.length - 1)], type); } catch (Exception ex) {this.xstream.alias (classname, type); / } @Suppresswarnings ("rawtypes") public void useatTribute (class definedin, String Fieldname) {this.xstream.useattribute (definedin, fieldname); }}PageGrid в основном инкапсулируется в виде объекта XML, а затем передается на переднюю часть.
MapCustomConverter.java
package 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.converters.collections.AbstractCollectionConverter;import com.thoughtworks.xstream.io.hierarchicalStreamReader; Import Com.TheatchWorks.xStream.io.hierarcyStreamWriter; Import Com.Theathingworks.xstream.Mapper.Mapper; Public Class MapCustomConverter расширяет AbstractCollectionConverter {publicCustomConverter (mapper) {SuperCollectionConverter {publicCustomConverter (mapper); } @Suppresswarnings ("rawtypes") public boolean canconvert (class type) {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 (источник объекта, иерархический писатель -писатель, контекст MarshallingContext) {map map = (map) source; for (iterator iterator = map.entryset (). iterator (); iterator.hasnext ();) {map.entry entry = (map.entry) iterator.next (); writer.startnode (entry.getkey () == null? writer.setValue (entry.getValue () == null? writer.endnode (); }} @Suppresswarnings ("rawtypes") открытый объект Unmarshal (hierarchicalstreamreder Reader, контекст UnmarshallingContext) {map map = (map) createCollection (context.getRequiredType ()); PopulateMap (читатель, контекст, карта); карта возврата; } @Suppresswarnings ({"rawtypes", "unchecked"}) Защищенная void populatemap (hierarchicalstreamreder Reader, контекст UnmarshallingContext, карта карты) {while (reader.hasmorechildren ()) {reader.modaynown (); Object Key = reader.getNoDeName (); Значение объекта = reader.getValue (); map.put (ключ, значение); reader.moveup (); }}}В основном он преобразует HashMap, полученный в базе данных в стандартные данные формата XML.
Baseconditionvo.java
Пакет com.honzh.common.persistence; import java.util.hashmap; import java.util.map; import org.apache.ibatis.session.rowbounds;/** * Настройка параметров во время класса страницы. страница. <br> * 3.numperpage-как много показывает страница? Когда он пуст, отображается page_show_count. <br> * 4.totalcount--s. TotalCount/NumperPage = сколько страниц <br> * 5.Orderfieldâdouped Колонны. <br> * 6. dorderDirection--s определяет сортировку. * </P> */public Class Baseconditionvo {public final Static int page_show_count = 50; Частный pagenum = 1; private int numperpage = 0; частный длинный тотальный костюм = 0; частная строка orderfield = ""; Private String OrderDirection = ""; /*** @fields PS: инкапсулируйте типы параметров. */ 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 orderfield; } public void setorderfield (String orderfield) {this.orderfield = orderfield; } public String getOrderDirection () {return "desc" .equals (orderdirection)? "Desc": "ASC"; } public void setOrderDirection (строка order -andirection) {this.orderDirection = order -andirection; } public long getTotalCount () {return TotalCount; } public void CetTotOtalCount (Long TotalCount) {this.TotalCount = totalCount; } public int getStartIndex () {int pagenum = this.getPagenum ()> 0? this.getPagenum () - 1: 0; вернуть Pagenum * this.getNumperPage (); } public Rowbounds createRowBounds () {rowbounds ro = new Rowbounds (this.getStartIndex (), this.getNumperPage ()); вернуть Ro; } / ** * @title: addparams * @description: добавить условия запроса * @param key * @param value * / public void addParams (String Key, значение объекта) {this.getmo (). Put (key, value); } / ** * @title: getParams * @Description: получить условия запроса * @param key * @return * / public Object getParams (String Key) {return this.getmo (). Get (key); } / ** * @return the mo * / public map <string, object> getmo () {return mo; } / ** * @param mo * mo для установки * / public void setmo (map <string, object> mo) {this.mo = mo; } @Override public String toString () {return "условие:" + pagenum + "," + numperpage + "," + totalCount + "," + orderfield + "," + order -andirection + "," + mo; }}Объект данных запроса для страниц, в том числе пейджинг, сортировку и поисковые поля.
Защищенное базовое соревнование getBaseConditionVofortable () {BaseConditionvo Vo = new BaseConditionVo (); // Параметры страниц int currentpage = getParatoint ("page"); int размеры = getParatoint ("Rows"); String sortOrder = getPara ("sord"); String sortcol = getPara ("sidx"); vo.setnumperpage (размеры); vo.setpagenum (CurrentPage); vo.setorderfield (sortcol); vo.setorderdirection (sortorder); вернуть vo; } Преобразовать параметры, передаваемые JQGRID в объект запроса на страницу BaseConditionVO. Protected void renderxml (httpservletresponse res, string xmlresponse) {try {res.setcharacterencoding ("utf-8"); res.setheader ("контент-тип", "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); }}Пишет XML в выходной поток.
После определения этих основных объектов мы начнем получать и передавать данные.
@Suppresswarnings ("ravtypes") @requestmapping (value = "datablepaydealerderslist") public void datapaydealerderslist (httpservletresponse response) {try {logger.debug («Получите заказ, который я заплатил»); Xstreamcomponent xstreamcomponent = xstreamcomponent.newinstance (); // Получить параметры списка BaseConditionvo vo = getBaseConditionVofortable (); vo.addparams ("name", getpara ("name")); logger.debug («Я оплачивал запрос на заказ» + vo); // Проект, который я создал, список myDealorders = diederderservice.getbyissueuid (vo, vo.createrowbounds ()); Long count = diederderservice.searchissuetotalcount (vo); String xmlresponse = xstreamcomponent.topagexml (createPageGrid (myDealorders, vo, count.intvalue ())); renderxml (ответ, xmlresponse.replaceall ("__", "_")); } catch (uncategorizedsqlexception e) {logger.error (e.getMessage ()); logger.error (e.getMessage (), e); renderxml (ответ, constants.query_error); } catch (Exception e) {logger.error (e.getMessage ()); logger.error (e.getMessage (), e); renderxml (ответ, constants.server_error); }}Давайте подробно объясним:
1. XStreamComponent.newInstance() создает объект потока XML.
2. BaseConditionVO vo = getBaseConditionVOForTable(); Создайте объект параметра запроса страниц.
3. vo.addParams("name", getPara("name")); Поместите значение поля поиска в объект запроса.
4. dealOrderService.getByIssueUid(vo, vo.createRowBounds()); Метод запроса на страницы Mybatis очень прост. Друг в группе специально создавал компонент страниц Mybatis. Я думаю, что использование оригинального метода запроса mybatis более эффективен. После этого мы напишем соответствующий метод написания SQL XML в Mybatis.
5. renderXml(response, xmlResponse.replaceAll("__", "_")); Напишите данные в выходной поток вывода JSP.
Наконец, давайте представим, как получить данные под пейджингом через Mybatis.
mappper.java
пакет com.honzh.biz.database.mapper; import java.math.bigdecimal; импорт java.util.hashmap; import java.util.list; import org.apache.ibatis.session.rowbounds; импорт com.honzhmon.persistence.basecondition. @Suppresswarnings ("rawtypes") list <hashmap> getbyissueuid (baseconditionvo vo, rowbounds createrowbounds);}Два объекта, которые вы хотите передать mapper.xml, являются базовыми и подвижными рядными рядами. SQL в XML будет автоматически поддерживать.
mappper.xml
<select id="getByIssueUid" resultType="hashmap" parameterType="map"> select * from daa WHERE is_delete=0 <if test="mo.name != null and mo.name != ''"> and y.name like CONCAT('%','${mo.name}','%') </if> <choose> <when test="orderField != null and orderfield! = '' "> order by $ {orderfield} <if test =" order -andirection! = null и order -andirection! = '' '> $ {order -andirection} </if> </when> <exut> order by d.order_time desc </inether> </select> </select>Вы никогда не сможете обратить внимание на Rowbounds, Mybatis автоматически инкапсулирует лимит для вас. Имя поискового домена может быть получено непосредственно через mo.name или. Порядок и Order -Direction также передаются.
До сих пор вся начальная загрузка, встроенная в JQGrid, успешно закончилась. Хорошо, сделай свой стол потрясающим!