2
我有JTable整合的问题了Spring MVC的JTable jQuery的使用Spring MVC 3问题整合
** * *** 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"
}
]
}
ISSUE * ** * ** * ** * ** * ****
我可以使用萤火虫控制台获得给定的JSON响应。
但是当页面加载它抛出萤火控制台上的错误，即使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的库，我试图将所有的库单独也是如此，没有任何运气。
任何含义？
嗨Meherzad， 所有js文件都正确加载。我也添加了json2.js，但没有运气，但仍然是相同的错误。 – Sanath