Question

我正在使用JAX-RS和JQGrid。现在我从服务器获取Json数据，但我想以JQGrid表格式显示它。我已应用JQGrid表，但服务器中的内容未显示在表中。

这是我来自服务器的Json数据

[{"country":"US","id":61,"name":"mahabali"},{"country":"america","id":63,"name":"swamy"},{"country":"hjj","id":64,"name":"fg"},{"country":"hjj","id":65,"name":"fg"},{"country":"hjj","id":66,"name":"fg"}]

这是我的HTML页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title><center>My First Grid</center></title>

<link rel="stylesheet" type="text/css" media="screen" href="../css/jquery-ui-1.8.2.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="../css/ui.jqgrid.css" />

<style type="text/css">
html, body {
    margin: 0;
    padding: 0;
    font-size: 75%;
}
</style>

<script src="../js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="../js/grid.locale-en.js" type="text/javascript"></script>
<script src="../js/jquery.jqGrid.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(function () {
    $("#list").jqGrid({
        url: "http://localhost:8080/jsf_jaxrs/webapi/persons/add",
        datatype: "local",
        mtype: "GET",
        colNames: ["Country", "Id", "Name"],
        colModel: [
            { name: "country", width: 300, align: "right"},
            { name: "id", width: 300, align: "right"},
            { name: "name",  width: 300, align: "right"}
        ],
        pager: '#pager',
        rowNum:10,
        rowList:[10,20,30],
        sortname: 'id',
        sortorder: 'desc',
        height: '300',
        loadonce: true,
        caption: 'My first grid',
        sortable: true
    }); 
}); 
</script> 
</head>
<body>
    <table id="list"><tr><td></td></tr></table> 
    <div id="pager"></div> 
</body>
</html>

Answer 1

我尝试使用本地数据选项在this JSFiddle中验证您的代码。您的HTML和JS代码似乎没问题。我认为问题可能是在加载JSON数据时或加载JS / CSS资源时。请检查浏览器控制台中的任何错误。

<title>
    <center>My First Grid</center>
</title>
<body>
    <table id="list">
        <tr>
            <td></td>
        </tr>
    </table>
    <div id="pager"></div>
</body>


$(function () {
var mydata = [{
    "country": "US",
        "id": 61,
        "name": "mahabali"
}, {
    "country": "america",
        "id": 63,
        "name": "swamy"
}, {
    "country": "hjj",
        "id": 64,
        "name": "fg"
}, {
    "country": "hjj",
        "id": 65,
        "name": "fg"
}, {
    "country": "hjj",
        "id": 66,
        "name": "fg"
}];


$("#list").jqGrid({
    data: mydata,
    datatype: "local",
    colNames: ["Country", "Id", "Name"],
    colModel: [{
        name: "country",
        width: 300,
        align: "right"
    }, {
        name: "id",
        width: 300,
        align: "right"
    }, {
        name: "name",
        width: 300,
        align: "right"
    }],
    pager: '#pager',
    rowNum: 10,
    rowList: [10, 20, 30],
    sortname: 'id',
    sortorder: 'desc',
    height: '300',
    loadonce: true,
    caption: 'My first grid',
    sortable: true
});
});

我想在jqGrid表中显示Json数据

1 个答案: