我想在 jqGrid 表中显示 Json 数据答案

【问题标题】：I want to display Json data in jqGrid table我想在 jqGrid 表中显示 Json 数据
【发布时间】：2015-08-23 04:29:44
【问题描述】：

我正在将 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>

【问题讨论】：

您使用datatype: "local" 而不是datatype: "json"。如果您希望 jqGrid 进行 Ajax 调用并从 url 加载 JSON 数据，那么您必须更改 datatype。
是的，我将数据类型更改为本地但没有用。你能建议如何在 jqgrid 中加载 json 数据意味着还有其他方法可以加载 json 数据吗？
加载数据有许多不同的方法。所有可能性的描述太长。因此，您应该更清楚地指定您已经实施的内容。 URL "/jsf_jaxrs/webapi/persons/add" 是否返回您包含的 JSON 数据？您使用哪个 jqGrid 分支（free jqGrid、Guriddo jqGrid JS 或版本
我认为'url'没有命中意味着它没有加载。但我不明白为什么它没有加载.....请给出一些建议以在 JQGrid 表中显示 json 数据
抱歉，如果您希望得到帮助，您应该回答问题（请参阅我之前的评论）。例如，您是否在 URL 中使用 "http://localhost:8080/ 前缀。如果您从同一个网站加载数据，那么您可以使用相对路径，如"/jsf_jaxrs/webapi/persons/add"。如果您尝试从 foreign 网站加载数据，由于安全原因，它将无法与 datatype: "json" 一起使用，并且必须使用 datatype: "jsonp" 并在服务器端具有相应的 JSONP 支持.此外，您包含来自服务器的 JSON 数据，但现在您写道：'url' is not hit

标签： html jqgrid jax-rs

【解决方案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
});
});

【讨论】：

以上代码（硬编码）也没有显示除空数据表之外的内容。并且控制台没有错误。是什么导致了问题？