jqgrid mvc_jqGrid，REST，AJAX和Spring MVC集成

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）：