2

我在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 库，我也尝试单独添加所有库，但没有任何运气。

有什么建议吗？

4

4 回答 4

4

在 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());

希望这可以帮助。

于 2013-08-01T04:41:40.740 回答
3

JSON 区分大小写。所以它将无法将“结果”与“结果”匹配。我的应用程序也遇到了同样的问题。

因此，请确保您的 JSON 响应以正确的大小写返回 Result 和 Records。

于 2013-04-19T09:26:32.717 回答
2

问题是 JTable 需要区分大小写的 JSON 响应。

不是

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

但

   {
   "Result":"OK",
   "Records":[
   .......
   ]}
于 2013-01-15T22:59:14.750 回答
1

从您面临的错误类型来看，您缺少一些要导入的 js 文件。

您是否添加了json2.jsjtable 的外部依赖项

https://github.com/hikalkan/jtable/tree/master/lib/external

下面的 jtable 示例中提到了它，但您的代码中缺少它

http://www.jtable.org/Tutorials/UsingWithAspNetWebFormsPageMethods#CreatePage

还可以在 firebug 的帮助下检查所有 js 文件是否已加载。

于 2013-01-14T08:01:10.263 回答