jquery-ui - JTable jQuery は Spring MVC 3 の問題と統合します

Question

JTableSpring 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 ライブラリが含まれており、すべてのライブラリを個別に追加しようとしましたが、うまくいきませんでした。

提案はありますか？

score 4 · Accepted Answer

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

お役に立てれば。

score 2 · Accepted Answer

問題は、JTableで大文字と小文字を区別するために必要なJSON応答でした。

いいえ

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

しかし

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

score 1 · Accepted Answer

直面しているエラーのタイプから、インポートする js ファイルが不足しています。

json2.jsjtableの外部依存関係であるを追加しましたか

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

次の jtable の例で言及されていますが、コードにはありません

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

また、すべてのjsファイルがロードされているかどうかをfirebugの助けを借りて確認してください。

jquery-ui - JTable jQuery は Spring MVC 3 の問題と統合します

4 に答える 4

Related

Reference