如何使用 json 填充 jqGrid 表答案

【问题标题】：how to populate jqGrid table using json如何使用 json 填充 jqGrid 表
【发布时间】：2023-03-20 18:01:01
【问题描述】：

我正在从 json 字符串“http://www.ok-soft-gmbh.com/jqGrid/John.txt”创建一个 jqgrid

我写了类似于“http://www.ok-soft-gmbh.com/jqGrid/John.htm”和url的JavaScript 指向 john.txt 文件。

它给了我一张没有任何行的表格。请帮忙。

<!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">
<head>
    <title>Demonstration how to read simple JSON text</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/redmond/jquery-ui.css" />
    <link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.8.2/css/ui.jqgrid.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.8.2/js/i18n/grid.locale-en.js"></script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.8.2/js/jquery.jqGrid.min.js"></script>

        <script type="text/javascript">
        //<![CDATA[
            jQuery(document).ready(function () {
                $('#jqgrid').jqGrid({
                    url: 'http://www.ok-soft-gmbh.com/jqGrid/John.txt',
                    datatype: 'json',
                    colNames: ['Col1', 'Col2', 'Col3'],
                    colModel: [
                        { name: 'col1' },
                        { name: 'col2' },
                        { name: 'col3' }
                    ],
                    jsonReader: { repeatitems: false },
                    height: 'auto'
                });
                });
        //]]>
        </script>
    </head>
    <body>
        <table id="jqgrid"><tr><td/></tr></table>
    </body>
    </html>

这就是我的代码...
这就是我得到的

http://tinypic.com/view.php?pic=vqps1x&s=6

【问题讨论】：

您应该发布您的确切代码。 My old demo 有效。因此，为了能够理解您的问题，您应该了解您的代码。
请找到我试过的代码

标签： jquery json jqgrid

【解决方案1】：

首先你应该小心url在“http://www.ok-soft-gmbh.com/jqGrid/John.txt”形式中的使用，因为Same Origin Policy的限制。您只能对来自同一网站的数据使用ajax请求。所以要防止这种情况发生您应该使用 url 而不使用 协议、域和端口前缀。由于您尝试访问的数据来自另一个域，因此您无法将其直接传递给 @987654324 @ 参数。解决方法是你必须使用你自己的 json 数据来分配或你自己的域 url 来获取数据。或者你可以设置一个本地带有 json 数据的变量并将其分配给 jqGrid

【讨论】：

谢谢 mann.. 抱歉迟到的 cmets.. 它的 bcs json 位于不同的域中。当我将它们放在同一个域中时，它就起作用了。

【解决方案2】：

我认为这是因为，您正在对另一个域中的资源发出 ajax 请求。

试试这个，将下面给出的数据保存到文件 John.txt 并更改你的 URL 以指向这个

url: 'John.txt',

{
    "total": 2,
    "page": 1,
    "records": 12,
    "rows": [
        {
            "id": "1",
            "col1": "cell11",
            "col2": "cell12",
            "col3": "cell13" 
        },
        {
            "id": "2",
            "col1": "cell21",
            "col2": "cell22",
            "col3": "cell23" 
        } 
    ] 
}

【讨论】：