jqgrid mvc

兩年多以前，我寫了一篇關于如何在Struts2中實現優雅的CRUD的文章。 實際上，我必須就該主題寫兩篇文章，因為該主題如此廣泛。 今天，我采用了一套更為流行的，完善的框架和庫，采用了更為輕量級的現代方法。 也就是說，我們將在后端使用Spring MVC為我們的資源提供REST接口，為jQuery提供出色的jqGrid插件以呈現表格網格（還有更多！），并且我們將使用少量JavaScript和AJAX來連接所有內容。

后端實際上是該展示柜中最不有趣的部分，它可以使用能夠處理RESTful請求的任何服務器端技術來實現，現在也許應該將JAX-RS視為該領域的標準。 我沒有任何理由就選擇了Spring MVC，但這對于這個任務也不是一個壞選擇。 我們將通過REST接口公開CRUD操作； 歷史上最暢銷的書籍清單將是我們的領域模型（您能猜出誰登上領獎臺嗎？）

@Controller @RequestMapping(value = "/book") public class BookController {private final Map<Integer, Book> books = new ConcurrentSkipListMap<Integer, Book>();@RequestMapping(value = "/{id}", method = GET)public @ResponseBody Book read(@PathVariable("id") int id) {return books.get(id);}@RequestMapping(method = GET)public @ResponseBody Page<Book> listBooks(@RequestParam(value = "page", required = false, defaultValue = "1") int page,@RequestParam(value = "max", required = false, defaultValue = "20") int max) {final ArrayList<Book> booksList = new ArrayList<Book>(books.values());final int startIdx = (page - 1) * max;final int endIdx = Math.min(startIdx + max, books.size());return new Page<Book>(booksList.subList(startIdx, endIdx), page, max, books.size());}}

幾乎沒有什么需要解釋的。 首先，出于這個簡單展示的目的，我沒有使用任何數據庫，所有書籍都存儲在控制器內部的內存映射中。 原諒我。 第二個問題更加微妙。 由于在如何使用RESTful Web服務處理分頁方面似乎尚未達成共識 ，因此我使用了簡單的查詢參數。 您可能會發現它很丑陋，但是我發現濫用Accept-Ranges和Range標頭以及206 HTTP響應代碼更加丑陋。

最后一個值得注意的細節是Page wrapper類：

@XmlRootElement public class Page<T> {private List<T> rows;private int page;private int max;private int total;//...}

我可以返回原始列表（或更確切地說，返回列表的請求部分），但是我還需要一種方法來向視圖層提供方便的元數據（例如記錄總數），更不用說在編組/解組原始列表時遇到的一些困難。

現在，我們準備開始我們的應用程序并使用curl進行一些測試：

<!-- $ curl -v "http://localhost:8080/books/rest/book?page=1&max=2" --><?xml version="1.0" encoding="UTF-8" standalone="yes"?> <page><total>43</total><page>1</page><max>3</max><rows xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:type="book"><author>Charles Dickens</author><available>true</available><cover>PAPERBACK</cover><id>1</id><publishedYear>1859</publishedYear><title>A Tale of Two Cities</title></rows><rows xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:type="book"><author>J. R. R. Tolkien</author><available>true</available><cover>HARDCOVER</cover><id>2</id><publishedYear>1954</publishedYear><title>The Lord of the Rings</title></rows><rows xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:type="book"><author>J. R. R. Tolkien</author><available>true</available><cover>PAPERBACK</cover><id>3</id><publishedYear>1937</publishedYear><title>The Hobbit</title></rows> </page>

如果未指定響應類型，則響應類型默認為XML，但是如果我們將Jackson庫添加到CLASSPATH，Spring會選擇它并允許我們也使用JSON：

// $ curl -v -H "Accept: application/json" "http://localhost:8080/books/rest/book?page=1&max=3"{"total":43,"max":3,"page":1,"rows":[{"id":1,"available":true,"author":"Charles Dickens","title":"A Tale of Two Cities","publishedYear":1859,"cover":"PAPERBACK","comments":null},{"id":2,"available":true,"author":"J. R. R. Tolkien","title":"The Lord of the Rings","publishedYear":1954,"cover":"HARDCOVER","comments":null},{"id":3,"available":true,"author":"J. R. R. Tolkien","title":"The Hobbit","publishedYear":1937,"cover":"PAPERBACK","comments":null}] }

很好，現在我們可以在前端工作了，希望不會使手太臟。 關于HTML標記，這就是我們所需要的，認真的是：

<table id="grid"></table> <div id="pager"></div>

請記住，我們將實現所有CRUD操作，但這仍然是我們所需要的。 沒有更多HTML。 多虧了出色的jqGrid庫，其余的魔術才得以實現。 這是一個基本設置：

$("#grid").jqGrid({url:'rest/book',colModel:[{name:'id', label: 'ID', formatter:'integer', width: 40},{name:'title', label: 'Title', width: 300},{name:'author', label: 'Author', width: 200},{name:'publishedYear', label: 'Published year', width: 80, align: 'center'},{name:'available', label: 'Available', formatter: 'checkbox', width: 46, align: 'center'}],caption: "Books",pager : '#pager',height: 'auto'}).navGrid('#pager', {edit:false,add:false,del:false, search: false});

從技術上講，這就是我們所需要的。 用來獲取數據的URL，指向我們的控制器（jqGrid將為我們執行所有AJAX魔術）和數據模型（您可能會識別書本字段及其描述）。 但是，由于jqGrid是高度可定制的，因此我進行了一些調整以使網格看起來更好。 另外，我也不喜歡元數據的建議名稱，例如，從服務器返回的字段總數應該是頁面總數，而不是記錄總數，這很違反直覺。 這是我調整過的選項：

$.extend($.jgrid.defaults, {datatype: 'json',jsonReader : {repeatitems:false,total: function(result) {//Total number of pagesreturn Math.ceil(result.total / result.max);},records: function(result) {//Total number of recordsreturn result.total;}},prmNames: {rows: 'max', search: null},height: 'auto',viewrecords: true,rowList: [10, 20, 50, 100],altRows: true,loadError: function(xhr, status, error) {alert(error);}});

渴望看到結果嗎？ 這是瀏覽器的屏幕截圖：

漂亮的外觀，可自定義的分頁，輕巧的刷新……而且我們的手還是比較干凈的！ 但是我答應了CRUD ...如果您小心的話，您可能已經注意到了一些navGrid屬性，并且很想打開它：

var URL = 'rest/book'; var options = {url: URL,editurl: URL,colModel:[{name:'id', label: 'ID',formatter:'integer',width: 40,editable: true,editoptions: {disabled: true, size:5}},{name:'title',label: 'Title',width: 300,editable: true,editrules: {required: true}},{name:'author',label: 'Author',width: 200,editable: true,editrules: {required: true}},{name:'cover',label: 'Cover',hidden: true,editable: true,edittype: 'select',editrules: {edithidden:true},editoptions: {value: {'PAPERBACK': 'paperback', 'HARDCOVER': 'hardcover', 'DUST_JACKET': 'dust jacket'}}},{name:'publishedYear',label: 'Published year',width: 80,align: 'center',editable: true,editrules: {required: true, integer: true},editoptions: {size:5, maxlength: 4}},{name:'available',label: 'Available',formatter: 'checkbox',width: 46,align: 'center',editable: true,edittype: 'checkbox',editoptions: {value:"true:false"}},{name:'comments',label: 'Comments',hidden: true,editable: true,edittype: 'textarea',editrules: {edithidden:true}}],caption: "Books",pager : '#pager',height: 'auto' }; $("#grid").jqGrid(options).navGrid('#pager', {edit:true,add:true,del:true, search: false});

配置變得非常冗長，但是并沒有什么復雜的事情–對于每個字段，我們都添加了一些額外的屬性來控制在編輯模式下應如何處理該字段。 這包括應該代表哪種類型HTML輸入，驗證規則，可見性等。但是說實話，我認為這是值得的：

jqGrid根據上面提到的我們的編輯選項（包括驗證邏輯）完全生成了一個外觀漂亮的編輯窗口。 我們可以使某些字段在網格中可見（在編輯對話框中為隱藏/不活動）（例如id），反之亦然（封面和注釋不在網格中，但是您可以對其進行修改）。 還要注意，在網格的左下角可見的新圖標很少。 添加和刪??除也是可能的-而且我們還沒有編寫一行HTML / JSP / JavaScript（jqGrid配置對象除外）。

當然，我們都知道用戶界面就是應用程序 ，我們的界面還不錯，但是有時候我們真的想要一個漂亮且可以運行的應用程序。 當前，后一個要求是我們的致命弱點。 不是因為后端尚未準備好，而是相當簡單的：

@Controller @RequestMapping(value = "/book") public class BookController {private final Map<Integer, Book> books = new ConcurrentSkipListMap<Integer, Book>();@RequestMapping(value = "/{id}", method = GET)public @ResponseBody Book read(@PathVariable("id") int id) {//...}@RequestMapping(method = GET)public@ResponseBodyPage<Book> listBooks(@RequestParam(value = "page", required = false, defaultValue = "1") int page,@RequestParam(value = "max", required = false, defaultValue = "20") int max) {//...}@RequestMapping(value = "/{id}", method = PUT)@ResponseStatus(HttpStatus.NO_CONTENT)public void updateBook(@PathVariable("id") int id, @RequestBody Book book) {//...}@RequestMapping(method = POST)public ResponseEntity<String> createBook(HttpServletRequest request, @RequestBody Book book) {//...}@RequestMapping(value = "/{id}", method = DELETE)@ResponseStatus(HttpStatus.NO_CONTENT)public void deleteBook(@PathVariable("id") int id) {//...}}

服務器端已經準備就緒，但是當涉及到客戶端的數據操作時，jqGrid揭示了其骯臟的秘密–到服務器的所有流量都使用POST發送，如下所示：

Content-Type: application/x-www-form-urlencoded in the following format: id=&title=And+Then+There+Were+None&author=Agatha+Christie&cover=PAPERBACK&publishedYear=1939&available=true&comments=&oper=add

最后一個屬性（oper = add）是至關重要的。 不是真正的慣用REST，您不覺得嗎？ 如果我們只能適當地使用POST / PUT / DELETE并使用JSON或XML序列化數據……修改服務器以使其與某些JavaScript庫兼容（無論它有多酷），那似乎是不得已的方法。 值得慶幸的是，只需少量的工作就可以自定義所有內容。

$.extend($.jgrid.edit, {ajaxEditOptions: { contentType: "application/json" },mtype: 'PUT',serializeEditData: function(data) {delete data.oper;return JSON.stringify(data);}}); $.extend($.jgrid.del, {mtype: 'DELETE',serializeDelData: function() {return "";}});var URL = 'rest/book'; var options = {url: URL,//... }var editOptions = {onclickSubmit: function(params, postdata) {params.url = URL + '/' + postdata.id;} }; var addOptions = {mtype: "POST"}; var delOptions = {onclickSubmit: function(params, postdata) {params.url = URL + '/' + postdata;} };$("#grid").jqGrid(options).navGrid('#pager',{}, //optionseditOptions,addOptions,delOptions,{} // search options );

我們為每個操作自定義了HTTP方法，使用JSON處理序列化，最后，用于編輯和刪除操作的URL現在帶有/ record_id后綴。 現在它不僅看起來，而且可以工作！ 查看瀏覽器與服務器的交互（注意不同的HTTP方法和URL）：

這是在瀏覽器端創建新資源的示例：

為了盡可能嚴格地遵循REST原則，我返回201 Created響應代碼以及Location標頭，該標頭指向新創建的資源。 如您所見，數據現在以JSON格式發送到服務器。

總而言之，這種方法具有很多優點：

• GUI非常敏感，頁面會立即顯示（它可以是CDN提供的靜態資源），而數據則是通過AJAX以輕量級JSON格式異步加載的
• 我們免費獲得CRUD操作
• 其他系統的REST接口也是免費的

將此與任何Web框架進行比較。 我是否在JavaScript結霜方面提到了這個小問題：jqGrid完全符合jQuery UI主題 ，還支持國際化。 這是具有更改的主題和語言的同一應用程序：

完整的源代碼可在Tomek的GitHub帳戶上獲得 。 該應用程序是自包含的，只需構建它并將其部署到某個servlet容器即可。

參考： 窮人的CRUD：jQGrid，REST，AJAX和Spring MVC在我們的JCG合作伙伴 Tomek Nurkiewicz的NoBlogDefFound博客中合而為一 。

相關文章 ：

• Spring 3 RESTful Web服務
• Tomcat 7上具有RESTeasy JAX-RS的RESTful Web服務– Eclipse和Maven項目
• Spring MVC3 Hibernate CRUD示例應用程序
• Spring MVC開發–快速教程
• 具有Spring和Maven教程的JAX–WS

翻譯自: https://www.javacodegeeks.com/2011/07/jqgrid-rest-ajax-spring-mvc-integration.html

jqgrid mvc

總結

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

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