jquery-ui - JTable jQuery 与 Spring MVC 3 集成问题

Question

我在 JTable 与 Spring MVC 集成方面遇到问题

****** JSP 代码 <强>***********

<link href="http://www.jtable.org/Scripts/jtable/themes/metro/blue/jtable.css" rel="stylesheet" type="text/css" />
<link href="http://www.jtable.org/Content/themes/metroblue/jquery-ui.css" rel="stylesheet" type="text/css" />

<script src="http://www.jtable.org/Scripts/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="http://www.jtable.org/Scripts/jquery-ui-1.9.2.min.js" type="text/javascript"></script>
<script src="http://www.jtable.org/Scripts/jtable/jquery.jtable.js" type="text/javascript"></script>

<script>
$(document).ready(function() {

//setup the jtable that will display the results
$('#PeopleTableContainer').jtable({
        title: 'Table of people',

        actions: {
            listAction: '/admin/getalltherole',
            createAction: '/admin/addRole',
            updateAction: '/admin/updateRole',
            deleteAction: '/admin/deleteRole'
        },
        fields: {
         custId: {
                key: true,
                list: false
            },
            name: {
                title: 'Full Name',
                width: '30%'
            },
            birthYear: {
                title: 'Birth Year',
                width: '15%'
            },
            employer: {
                title: 'Employer',
                width: '25%'
            },
            infoAsOfDate: {
                title: 'As Of Date',
                width: '15%'
            },
            disabled: {
                title: 'Status',
                width: '15%'
            }
        }
    });
    $('#PeopleTableContainer').jtable('load');
});

</script>

<div id="PeopleTableContainer" style="width: 600px;"></div>

***** Spring Controller ************

@RequestMapping(value = "/admin/getalltherole", method = RequestMethod.POST)
@ResponseBody
public JsonJtableResponse getalltherole(){
    JsonJtableResponse jstr = new JsonJtableResponse();
    jstr.setResult("OK");
    List<Role> roleList = testService.getAllRoles();
    jstr.setRecords(roleList);
    return jstr;
}

@RequestMapping(value = "/admin/addRole", method = RequestMethod.POST)
@ResponseBody
public JsonJtableResponse insert(@ModelAttribute Role role, BindingResult result) {
    JsonJtableResponse jsonJtableResponse = new JsonJtableResponse();
    if (result.hasErrors()) {
        jsonJtableResponse.setResult("ERROR");
    }
    try {
        Role newRole = testService.saveRole(role);
        //jsonJtableResponse.setRole(newRole);
    } catch (Exception e) {
        jsonJtableResponse.setResult(e.getMessage());
    }
    return jsonJtableResponse;
}

@RequestMapping(value = "/admin/updateRole", method = RequestMethod.POST)
@ResponseBody
public JsonJtableResponse update(@ModelAttribute Role role, BindingResult result) {
    JsonJtableResponse jsonJtableResponse = new JsonJtableResponse();
    if (result.hasErrors()) {
        jsonJtableResponse.setResult("Error");
        return jsonJtableResponse;
    }
    try {
        testService.updateRole(role);
        jsonJtableResponse.setResult("OK");
    } catch (Exception e) {
        jsonJtableResponse.setResult(e.getMessage());          
    }
    return jsonJtableResponse;
}

@RequestMapping(value = "/admin/deleteRole", method = RequestMethod.POST)
@ResponseBody
public JsonJtableResponse delete(@RequestParam Integer custId) {
    JsonJtableResponse jsonJtableResponse = new JsonJtableResponse();
    try {
        testService.deleteRole(custId);
        jsonJtableResponse.setResult("OK");
    } catch (Exception e) {
        jsonJtableResponse.setResult(e.getMessage());            
    }
    return jsonJtableResponse;
}


JSON response object

public class JsonJtableResponse {

    private String Result;

    private List<Role> Records;

    public String getResult() {
        return Result;
    }

    public void setResult(String Result) {
        this.Result = Result;
    }

    public List<Role> getRecords() {
        return Records;
    }

    public void setRecords(List<Role> Records) {
        this.Records = Records;
    }   
}

****** 获取 JSON 响应 *********

    {
   "result":"OK",
   "records":[
      {
         "custId":"1",
         "name":"aaa",
         "birthYear":"1982",
         "employer":"xxx",
         "infoAsOfDate":"20130110",
         "disabled":"true"
      },
      {
         "custId":"2",
         "name":"bbb",
         "birthYear":"1982",
         "employer":"xxx",
         "infoAsOfDate":"20130111",
         "disabled":"true"
      },
      {
         "custId":"3",
         "name":"ccc",
         "birthYear":"1982",
         "employer":"xxx",
         "infoAsOfDate":"20130108",
         "disabled":"false"
      },
      {
         "custId":"4",
         "name":"ddd",
         "birthYear":"1981",
         "employer":"xxx",
         "infoAsOfDate":"20130107",
         "disabled":"true"
      }
   ]
}

问题******** *********

我可以使用 firebug 控制台获取给定的 JSON 响应。

但是当页面加载时，即使正确加载了 JSON 数据，它也会在 Firebug 控制台上抛出此错误，

   "NO Data available" 

消息显示在数据表上。

控制台上也出现错误。

   "TypeError: this._$errorDialogDiv.html(message).dialog is not a function"

正如我所搜索的，此错误通常是由于未正确添加 jquery UI 库造成的。

当我将 - listAction: '/admin/getalltherole' 更改为某个不存在的 URL

 "An error occured while communicating to the server." is displayed in a dialog box.

jquery-ui-1.9.2.min.js 包含所有必需的 jquery UI 库，我也尝试单独添加所有库，但没有任何运气。

有什么建议吗？

Answer 1

在 pom.xml 中添加 Jackson 库、maven 依赖项:

<properties>
    <jackson.version>1.9.10</jackson.version>
</properties>
<dependency>
    <groupId>org.codehaus.jackson</groupId>
    <artifactId>jackson-mapper-asl</artifactId>
    <version>${jackson.version}</version>
</dependency>

现在您可以向类中的字段添加 json 属性注释，以便按照您的预期呈现 json 输出。您可以编写一个通用类(问题中的 JsonJtableResponse )，如下所示:

public class JTableJSONResponse<T> {
    @JsonProperty("Result")
    private String result;

    @JsonProperty("Records")
    private List<T> records;

    @JsonProperty("Message")
    private String message;

    @JsonProperty("TotalRecordCount")
    private int totalRecordCount;

    public JTableJSONResponse(String result, List<T> records, int totalRecordCount) {
        super();
        this.result = result;
        this.records = records;
        this.totalRecordCount = totalRecordCount;
    }
    //getters and setters
}

现在，您的 Controller 可能会说

List<Role> roleList = roleService.getAllRoles();
return new JTableJSONResponse<Role>("OK",roleList,roleList.size());

希望这有帮助。