我有一个问题与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响应。
但是当页面加载时，它会在firebug控制台抛出这个错误，即使JSON数据正确加载，
"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库，我也尝试单独添加所有库，没有任何运气。
suggessions吗?
在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输出。你可以写一个泛型类(jsonjtablerresponse在你的问题)如下所示:
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());
JSON区分大小写。因此，它将无法匹配"结果"与"结果"。我的应用也遇到了同样的问题。
因此请确保您的JSON响应以正确的大小写返回Result和Records。
问题是JTable需要区分大小写的JSON响应。
不 {
"result":"OK",
"records":[
.......
]}
,
{
"Result":"OK",
"Records":[
.......
]}
从你面临的错误类型来看，你缺少一些要导入的js文件。
您是否添加了json2.js，这是jtable的外部依赖项
在下面的jtable示例中提到了它，但在您的代码中没有
http://www.jtable.org/Tutorials/UsingWithAspNetWebFormsPageMethods CreatePage
在firebug的帮助下检查是否加载了所有的js文件