JTable jQuery与Spring 3集成

Question

我对Spring的JTable集成有一个问题

****** 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库没有正确添加而造成的。

当我将- 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库，我也尝试单独添加所有库，但没有任何结果。

有什么暗示吗？

Answer 1

在pom.xml中添加杰克逊库，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());

希望这能有所帮助。

Answer 2

JSON对大小写很敏感。因此，它将无法匹配“结果”和“结果”。我的应用程序也面临着同样的问题。

因此，请确保您的JSON响应返回正确的结果和记录。

Answer 3

问题是，JSON响应是JTable区分大小写所必需的。

不

 {
 "result":"OK",
 "records":[
  .......
  ]}

但

   {
   "Result":"OK",
   "Records":[
   .......
   ]}