javascript - JQWidgets - Jqxgrid "no data to display"，JSON 解析错误

Question

我按照这个例子的步骤(http://www.jqwidgets.com/jquery-widgets-documentation/documentation/java-integration/bind-jquery-grid-to-mysql-database-using-jsp.htm)，但是没有数据显示。

jqxgrid.jsp文件:

ResultSet result = state.executeQuery(sql1);
JsonArray recordsArray = new JsonArray();
while (result.next()) {
    JsonObject currentRecord = new JsonObject();
    currentRecord.add("id",
            new JsonPrimitive(result.getString("id")));
    currentRecord.add("name",
            new JsonPrimitive(result.getString("name")));
    recordsArray.add(currentRecord);
}

out.print(recordsArray);
out.flush();

在jsp文件中我可以得到JsonArray的结果:

[{"id":"57","name":"aa"},{"id":"58","name":"qq"},{"id":"59","name":"ii"},{"id":"60","name":"jenny"},{"id":"61","name":"candy"},{"id":"62","name":"f"},{"id":"63","name":"pp"},{"id":"66","name":"kkk"}]

jqxgrid.html文件:

 $(document).ready(function () {
        
        var source = {
            datatype: "json",
            datafields: [{name: 'id'}, 
                         {name: 'name'}],
           url:"jqxgrid.jsp"
        };
       
        var dataAdapter = new $.jqx.dataAdapter(source, {
            downloadComplete: function (data, status, xhr) { },
            loadComplete: function (data) { },
            loadError: function (xhr, status, error) {alert('Status ='+ status +',  Error ='+ error ); }
        });
        $("#jqxgrid").jqxGrid({
            width: 400,
            autoheight: true,
            source: dataAdapter,
            columns: [{
                text: 'ID',
                datafield: 'id',
                width: 200
            }, {
                text: 'Name',
                datafield: 'name',
                width: 200
            }]
        });
    });

输出中有网格，但没有显示数据。(抱歉，我无法发布图片。)

出现错误:

Status =parsererror, Error =SyntaxError: JSON Parse error: Unrecognized token '<'

我该如何解决这个问题？谢谢!

Answer 1

我认为您的问题是您没有输入源数据描述(客户端)。第 4 条记录的 ID 是 60，恰好是 < 字符。文档说 type 是必填字段(尽管他们的示例并不总是使用它。)

如果您将类型 datafields:[{name:'id',type:'int'}, 添加到 var source = { 这可能会解决您的问题。您还可以使用 'number' 作为 id 的类型。将 'string' 类型添加到 name 字段也可能是值得的。

希望这对你有用。