JTable jQuery与Spring MVC 3问题集成
问题内容:
我与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>
*_ __ _弹簧控制器 *_ __ _ __ ***
@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库,我也尝试单独添加所有库,但没有任何运气。
有什么建议吗?
问题答案:
在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
}
现在,您的控制器可能会说
List<Role> roleList = roleService.getAllRoles();
return new JTableJSONResponse<Role>("OK",roleList,roleList.size());
希望这可以帮助。