jqgrid mvc

我在一個單頁面應用程序上工作，我想在使用Spring MVC的應用程序的一部分中使用網格功能。 自從我上次使用JQGrid以來已經有一段時間了，找到讓我起床所需的信息有點困難。 在這篇文章中，我想整理所有信息并將其放入教程中，以便后續使用，以便可能使用相同功能的任何人都可以發現設置JQGrid很有幫助 。

首先，我們將在Eclipse上設置一個示例Web項目，并如下定義web.xml；

<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5"><display-name>JQGridExample</display-name><welcome-file-list><welcome-file>index.html</welcome-file><welcome-file>index.htm</welcome-file><welcome-file>index.jsp</welcome-file><welcome-file>default.html</welcome-file><welcome-file>default.htm</welcome-file><welcome-file>default.jsp</welcome-file></welcome-file-list><servlet><servlet-name>JQGridExample</servlet-name><servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class><load-on-startup>1</load-on-startup></servlet><servlet-mapping><servlet-name>JQGridExample</servlet-name><url-pattern>/</url-pattern></servlet-mapping></web-app>

為了連接Spring MVC，我已經注冊了DispatcherServlet以便在啟動時加載。 基本上，這就是注冊任何Spring MVC應用程序的方式。 接下來，我們需要創建spring配置以注冊我們spring MVC應用程序所需的組件/元素。

在這種情況下，我將spring上下文文件名保留為web.xml上給出的“ servlet-name”，因為默認情況下，當spring容器加載時，它將查找格式為<servletname> -servlet的文件。 XML文件
如果您想為spring上下文配置文件使用其他名稱，則可以這樣做。 您只需要在web.xml上注冊上下文加載器 。

因此，讓我們看看我們的spring上下文配置文件是什么樣子；

<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:context="http://www.springframework.org/schema/context"xmlns:mvc="http://www.springframework.org/schema/mvc"xsi:schemaLocation="http://www.springframework.org/schema/beanshttp://www.springframework.org/schema/beans/spring-beans-2.5.xsdhttp://www.springframework.org/schema/mvchttp://www.springframework.org/schema/mvc/spring-mvc-3.2.xsdhttp://www.springframework.org/schema/contexthttp://www.springframework.org/schema/context/spring-context-3.0.xsd"><context:component-scan base-package="com.example.jqgrid.controller" /><bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"/><bean id="viewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver"><property name="prefix" value="/WEB-INF/jsp/" /><property name="suffix" value=".jsp" /></bean><mvc:resources mapping="/resources/**" location="/resources/"/><mvc:annotation-driven/></beans>

我們首先注冊包含所有控制器類的包。 在這種情況下，它將只是一個控制器。 使用component-scan元素，它將掃描“ controller”包下的所有類。

接下來，我們告訴Spring容器如何解析我們的JSP文件。 在這種情況下，將使用內部視圖解析器，并且我們提供JSP文件在應用程序上的駐留位置。

此配置的下一個有趣的部分是<mvc：resources>元素。 定義它的原因是讓Spring容器知道我們的靜態資源，例如javascript文件，圖像，樣式表。 如果我們不將它們定義為資源，那么每當您在應用程序中例如引用javascript文件時，spring mvc都將通過查看定義的URL模式來嘗試匹配現有的控制器。 在這種情況下，我所有的css，javascript，圖像文件都位于resources文件夾下。

然后，我定義index.jsp ，這是我們應用程序的入口點。 現在，我不想在此頁面上執行任何操作，而只是將其重定向到通過spring-mvc解決的另一頁面。 我們的index.jsp文件如下：

<script type="text/javascript">window.location.replace("jqGridExample"); </script>

我只是將URL 重定向到jqGridExample 。 現在，要了解如何通過spring-mvc解決此問題，我們將需要查看控制器類。 我們的控制器類如下：

package com.example.jqgrid.controller;import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse;import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod;import com.example.jqgrid.common.util.JsonUtil; import com.example.jqgrid.dto.JQGridDTO; import com.example.jqgrid.dto.SuperHeroDTO; import com.example.jqgrid.handler.JQGridHandler;/*** This class acts as the controller for JQGrid related functionality.* * @author Dinuka Arseculeratne* */ @Controller public class JQGridController {/*** This method will display the page used to display the grid.* * @param req* @param res* @return*/@RequestMapping(method = { RequestMethod.POST, RequestMethod.GET }, path = "/jqGridExample")public String jqGrid(HttpServletRequest req, HttpServletResponse res) {String forward = "jqgrid/jqGridData";return forward;}/*** This method will handle fetching data required for the JQGrid.* * @param req* @param res* @return*/@RequestMapping(method = { RequestMethod.POST, RequestMethod.GET }, path = "/loadData")public String loadData(HttpServletRequest req, HttpServletResponse res) {String forward = "common/formData";JQGridDTO<SuperHeroDTO> gridData = new JQGridHandler().loadSuperHeroes(req);req.setAttribute("formData", JsonUtil.toJsonObj(gridData));return forward;}}

因此，如果我們看第一種方法，可以看到我們只是返回了一個名為“ jqgrid / jqGridData”的文本。 現在要了解它的作用，我們需要回頭查看我們的spring上下文配置文件。 在此我們指定所有JSP文件都位于“ WEB-INF / jsp ”文件夾中，后綴為“ .jsp ”。 因此，在這種情況下，我們從此方法返回的路徑告訴spring容器，實際上要在“ WEB-INF / jsp / jqgrid / jqGridData.jsp ”中返回要返回的JSP。 注意，我們不需要將后綴指定為“ .jsp”，因為我們已經在spring上下文配置中對其進行了配置。

在查看定義了JQGrid的頁面之后，我們將回到第二種方法。 jqGridData.jsp如下；

<!DOCTYPE html> <html><head><title>JQGrid Example</title><link href="resources/css/jquery-ui.css" rel="stylesheet"><link href="resources/css/jquery-ui.theme.css" rel="stylesheet"><link href="resources/css/jquery-ui.structure.min.css" rel="stylesheet"><link rel="stylesheet" href="resources/css/ui.jqgrid.css"></head><body><div><table id="list"><tr><td /></tr></table><div id="pager"></div><div style="margin-top:10px;"><input type="button" id="showSelected" value="Show Selected"/></div></div><script src="resources/js/jquery-1.11.1.min.js"></script><script src="resources/js/jquery-ui.min.js"></script><script src="resources/js/i18n/grid.locale-en.js"></script><script src="resources/js/jquery.jqGrid.min.js"></script><script type="text/javascript">$(document).ready(function(){$("#list").jqGrid({url : "loadData",datatype : "json",mtype : 'POST',colNames : [ 'Name','Alias','Super Power'],colModel : [ {name : 'name',index : 'name',width : 150}, {name : 'alias',index : 'alias',width : 150,editable : false}, {name : 'power',index : 'power',width : 550,editable : false}],pager : '#pager',rowNum : 10,height: 'auto',rowList : [ 10 ],sortname : 'invid',sortorder : 'desc',viewrecords : true,gridview : true,multiselect: true,multiboxonly: false,caption : 'Super Heroes',jsonReader : {repeatitems : false,}});jQuery("#list").jqGrid('navGrid', '#pager', {edit : false,add : false,del : false,search : false});$('#showSelected').on('click',function(){var selRowArr = jQuery("#list").getGridParam('selarrrow');var selectedAppIds = [];for(var i=0;i<selRowArr.length;i++){var celValue = $('#list').jqGrid('getCell', selRowArr[i], 'alias');selectedAppIds.push(celValue);}alert(selectedAppIds);$('#list').trigger( 'reloadGrid' );});}); </script></body> </html>

首先，我們需要定義將在其上加載JQGrid的元素。 在這種情況下，這是ID為“ list ”HTML表格元素。 并且由于我們需要分頁功能，因此可以在網格下方定義分頁部分。 在這種情況下，分頁部分由div定義，其id為“ pager ”。

然后，我們將Java腳本代碼作為底部。 在這里，我們通過調用傳入所需屬性的方法jqGrid（）來加載JQGrid。 我將不解釋此處定義的所有屬性，因為在此實例中還有許多未使用的屬性。 將解釋本教程最相關的屬性。 首先， URL 。 這被定義為“ loadData ”。 我們需要返回控制器類以了解其映射方式。

在控制器上，我們將第二種方法定義為“ loadData ”，該方法獲取網格所需的數據。 現在有趣的部分是，JQGrid期望以特定格式發送數據。 為了遵守這種格式，我定義了一個類來保存此結構，該類定義為JQGridDTO 。 讓我們看看該類的樣子。

package com.example.jqgrid.dto;import java.io.Serializable; import java.util.List;/*** This class acts as common template for all pages that use the JQGrid.* * @author Dinuka Arseculeratne* * @param <T>*/ public class JQGridDTO < T extends Serializable > {private int page;private String total;private String records;private List<T> rows;public int getPage() {return page;}public void setPage(int page) {this.page = page;}public String getTotal() {return total;}public void setTotal(String total) {this.total = total;}public String getRecords() {return records;}public void setRecords(String records) {this.records = records;}public List<T> getRows() {return rows;}public void setRows(List<T> rows) {this.rows = rows;}}

這是JQGrid所需的數據結構。 為了使該類能夠根據需要將不同類型的數據傳遞到網格，我將行數據結構保持通用。 只要實現了Serializable接口，它就可以是任何類型的對象。

因此，我是超級英雄的忠實粉絲，因此在這種情況下，我將顯示一些有關超級英雄的信息。 我加入了DC和Marvel宇宙中的超級英雄，以使所有人開心。

因此，讓我們看一下數據對象和將加載數據的處理程序類；

package com.example.jqgrid.dto;import java.io.Serializable;/*** * @author Dinuka Arseculeratne**/ public class SuperHeroDTO implements Serializable {/*** */private static final long serialVersionUID = 1420635747715993129L;private String name;private String alias;private String power;public SuperHeroDTO(String name, String alias, String power) {this.name = name;this.alias = alias;this.power = power;}public String getName() {return name;}public void setName(String name) {this.name = name;}public String getAlias() {return alias;}public void setAlias(String alias) {this.alias = alias;}public String getPower() {return power;}public void setPower(String power) {this.power = power;}}package com.example.jqgrid.handler;import java.util.LinkedList; import java.util.List;import javax.servlet.http.HttpServletRequest;import com.example.jqgrid.dto.JQGridDTO; import com.example.jqgrid.dto.SuperHeroDTO;/*** The handler class used to fetch the data required.* * @author Dinuka Arseculeratne**/ public class JQGridHandler {/*** This method will fetch the super hero list. Of course i have mixed and* matched DC and Marvel in order to keep peace on the universe.* * @return*/public JQGridDTO<SuperHeroDTO> loadSuperHeroes(final HttpServletRequest req) {/*** The page and rows are sent from the JQGrid component with the Ajax* query.* */int page = Integer.valueOf(req.getParameter("page")).intValue();int pageSize = Integer.valueOf(req.getParameter("rows")).intValue();/*** I am not using the star index and end index in this case, but in an* ideal situation, you will be passing the start and end index to your* pagination SQL query.* */int startIndex = page == 1 ? 0 : (pageSize * (page - 1));int endIndex = page == 1 ? pageSize : pageSize * page;int total = -1;JQGridDTO<SuperHeroDTO> jqGridData = new JQGridDTO<SuperHeroDTO>();List<SuperHeroDTO> superHeroList = new LinkedList<SuperHeroDTO>();SuperHeroDTO flash = new SuperHeroDTO("Barry Allen", "Flash", "Super speed, Taping into the speed force");superHeroList.add(flash);SuperHeroDTO superMan = new SuperHeroDTO("Clark Kent", "Superman", "Flying, super speed");superHeroList.add(superMan);SuperHeroDTO batman = new SuperHeroDTO("Bruce Wayne", "Batman", "Cool toys, Intelligence");superHeroList.add(batman);SuperHeroDTO professorX = new SuperHeroDTO("Professor Xavier", "Professor X", "Mind control");superHeroList.add(professorX);/*** The total in the ideal situation would be the count of the records of* your SQL query from the table you want to fetch data from.* */total = superHeroList.size();jqGridData.setPage(page);jqGridData.setTotal(String.valueOf(Math.ceil((double) total / pageSize)));jqGridData.setRecords(String.valueOf(total));jqGridData.setRows(superHeroList);return jqGridData;} }

通常，您將使用數據庫來獲取數據。 為了保持本教程的簡潔，我剛剛加載了靜態數據。 在代碼注釋中，我提到了使用實際數據庫時如何傳遞數據。

在這種情況下，將JQGrid設置為接收JSON格式的數據。 因此，要將我們的超級英雄對象轉換為其等效的JSON，我使用了Google的GSON庫。 我編寫了一個幫助程序類，將JSON對象轉換為Java對象，并將Java對象轉換為JSON對象，這是我在以前的一篇文章中共享的，您可以在這里找到。

我尚未使用spring-mvc默認功能發送JSON響應。 在這個示例中，我要做的是在請求屬性中設置JSON輸出，然后將頁面轉發到一個普通頁面，在該頁面中，它只是打印出該屬性，并且響應由JQGrid組件發出的Ajax請求發送回去。 該公共頁面的定義如下：

<%=request.getAttribute("formData")%>

回到定義JQGrid的JSP文件，我要關注的下一個重要屬性是“ colModel ” 。 這會將在JSON輸出上發送的數據映射到顯示的網格列。 在這種情況下，您可以看到此處提到的名稱是在我們的超級英雄數據對象上定義的實例變量名稱。 其余屬性是不言自明的，因此我不會深入研究這些屬性的細節。

我需要的另一個重要用例是能夠將選定的行發送到后端。 為此，您可以使用內置的JQGrid函數。 以下代碼顯示了在所有選定行上檢索超級英雄名稱的代碼（在這種情況下，因為網格上啟用了多選功能），并將其放入Java腳本數組中。

$('#showSelected').on('click',function(){var selRowArr = jQuery("#list").getGridParam('selarrrow');var selectedAppIds = [];for(var i=0;i<selRowArr.length;i++){var celValue = $('#list').jqGrid('getCell', selRowArr[i], 'alias');selectedAppIds.push(celValue);}alert(selectedAppIds);$('#list').trigger( 'reloadGrid' );});

• 最后以關于如何使用Spring MVC和Gson設置JQGrid的教程結束。 工作代碼已簽入我的GIT存儲庫，可以在這里找到。

您可以根據需要克隆存儲庫并運行該應用程序。

翻譯自: https://www.javacodegeeks.com/2016/01/integrating-jqgrid-spring-mvc-gson.html

jqgrid mvc

總結

以上是生活随笔為你收集整理的jqgrid mvc_将JQGrid与Spring MVC和Gson集成的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。