Question

我使用文件* .ashx从数据库中获取数据。当我提醒jsondata.responseText时，它会显示json字符串

回复文字是：

{
 "total":2,
 "page":5,
 "record":10,
 "row":[
     {"i":0, "cell""["1","Desktop","Desktop Description","200"]},
     {"i":1, "cell""["2","Laptop","Laptop Description","1000"]},
     {"i":2, "cell""["2","DVD","DVD Description","100"]},
     {"i":3, "cell":["","","",""]}
 ]
}

但是jqgrid没有显示数据。

请查看我的代码并帮助我！

Default.aspx的

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Sample_Json_Jqgrid._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>

    <%--<link rel="stylesheet" type="text/css" href="Resources/themes/coffee/grid.css" title="steel" media="screen" />
    <link rel="stylesheet" type="text/css" media="screen" href="Resources/themes/jqModal.css" />--%>
    <link href="Resources/css/ui.jqgrid.css"  media="screen" rel="stylesheet" type="text/css" />
    <link href="Resources/themes/redmond/jquery-ui-1.8.5.custom.css" rel="stylesheet" type="text/css" />

    <link href="Resources/src/css/jquery.searchFilter.css" media="screen" rel="stylesheet" type="text/css" />
    <link href="Resources/src/css/ui.jqgrid.css" media="screen" rel="stylesheet" type="text/css" />
    <link href="Resources/src/css/ui.multiselect.css" media="screen" rel="stylesheet" type="text/css" />

    <script src="Resources/js/jquery-ui-1.8.5.custom.min.js" type="text/javascript"></script>
    <script src="Resources/js/jquery-1.4.2.min.js" type="text/javascript"></script>
    <script src="Resources/js/jquery.jqGrid.min.js" type="text/javascript"></script>
    <script src="Resources/js/i18n/grid.locale-en.js" type="text/javascript"></script>
    <script src="Resources/src/grid.base.js" type="text/javascript"></script>
    <script src="Resources/src/ui.multiselect.js" type="text/javascript"></script>
    <script src="Resources/src/grid.celledit.js" type="text/javascript"></script>
    <script src="Resources/src/grid.common.js" type="text/javascript"></script>
    <script src="Resources/src/grid.custom.js" type="text/javascript"></script>
    <script src="Resources/src/grid.formedit.js" type="text/javascript"></script>
    <script src="Resources/src/grid.grouping.js" type="text/javascript"></script>
    <script src="Resources/src/grid.import.js" type="text/javascript"></script>
    <script src="Resources/src/grid.inlinedit.js" type="text/javascript"></script>
    <script src="Resources/src/grid.jqueryui.js" type="text/javascript"></script>
    <script src="Resources/src/grid.loader.js" type="text/javascript"></script>
    <script src="Resources/src/grid.postext.js" type="text/javascript"></script>
    <script src="Resources/src/grid.setcolumns.js" type="text/javascript"></script>
    <script src="Resources/src/grid.subgrid.js" type="text/javascript"></script>
    <script src="Resources/src/grid.tbltogrid.js" type="text/javascript"></script>
    <script src="Resources/src/grid.treegrid.js" type="text/javascript"></script>
    <script src="Resources/src/jqDnR.js" type="text/javascript"></script>
    <script src="Resources/src/jqModal.js" type="text/javascript"></script>
    <script src="Resources/src/jquery.fmatter.js" type="text/javascript"></script>
    <script src="Resources/src/jquery.searchFilter.js" type="text/javascript"></script>
    <script src="Resources/src/JsonXml.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">  
    <div>
        <table id="grid" cellpadding="0" cellspacing="0">
        </table>
        <div id="pager" style="text-align: center;">
        </div>
    </div>
    <script src="Resources/js/app.grid.js" type="text/javascript"></script>
    </form>
</body>
</html>

将javascript文件传送到jqgrid：app.grid.js

var mydata ;
function CreateGrid()
{     
   jQuery("#grid").jqGrid({
        datatype: "local",
        colNames:['ProductId','ProductName','Description','Price'], 
        colModel:[ 
            {name:'ProductId',index:'ProductId',sorttype:"text",hidden:false},
            {name:'ProductName',index:'ProductName',sorttype:"text",resizable:false,
             width:100,sortable:true,align:'left',editable:true},
            {name:'Description',index:'Description',sorttype:"text",resizable:false,
             width:1000,sortable:true,align:'left',editable:true}, 
            {name:'Price',index:'designation',sorttype:"int",resizable:false,
             width:100,sortable:true,align:'left',editable:true}
        ],
        rowNum: 1,
        rowList: [5, 10, 15],
        pager: jQuery('#pager'),
        imgpath: 'themes/redmond/images',
        sortname: 'ProductId',
        viewrecords: true,
        sortorder: "desc",
        caption: 'Products'
    }).jqGrid('navGrid','#pager',{edit:true,add:true,del:true});
    BinDataGrid();
}

function BinDataGrid()
{
    $("#grid").clearGridData();
    jQuery(function($) {
        $.ajax({
            type: "'POST'",
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            url: "GetDataHandler.ashx",
            data: "{}",
            complete:  function(jsondata, stat)
            {
                window.alert("Status received is " + stat);
                window.alert("Response text is: " + jsondata.responseText);
                if (stat == "success")
                {
                    var thegrid = jQuery("#grid")[0];
                    thegrid.addJSONData(eval("(" + jsondata.responseText + ")"));
                }
            }
        });
    })
}
    jQuery(document).ready(function() {
    CreateGrid();
});

请帮帮我

最好的关注

Answer 1

您的回复文字错误：

"cell""["1","Desktop","Desktop Description","200"]

这应该是（注意：而不是“在”单元格“声明之后）：

"cell":["1","Desktop","Desktop Description","200"]

..作为您最后输入的空白行，它是正确的：

"cell":["","","",""]

也避免使用“在值中，你应该用其他东西替换它们，因为有些browsera无法处理”转义... IE 6 ......：））

Answer 2

抱歉，您的代码有很多错误，很难一起描述。带有引号（"）而不是:的JSON数据中的第一个错误。修改后的数据将是

{
    "total": 2,
    "page": 5,
    "record": 10,
    "row": [
        {"i": 0,"cell": ["1","Desktop","Desktop Description","200"]},
        {"i": 1,"cell": ["2","Laptop","Laptop Description","1000"]},
        {"i": 2,"cell": ["2","DVD","DVD Description","100"]},
        {"i": 3,"cell": ["","","",""]} 
    ]
}

您有"i": 2而不是"id": 2等数据。

在<head>元素中包含的JavaScript文件列表中，您将完全混乱。您将jqGrid更多地包含在压缩和未压缩形式的JavaScript文件中。此外，您使用了错误的文件顺序：您必须在使用jquery-ui-1.8.5.custom.min.js之前包含jquery-1.4.2.min.js，并在jquery.jqGrid之前包含grid.locale-en.j .min.js。顺便提一下，文件grid.loader.js包含了文件的所有开发者版本。此外，您应该在头部包含<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />之类的元素（请参阅example）。

您应该阅读文档的How to Install部分，确定要使用的jqGrid版本（压缩版或开发人员版）并将其包含在内。

更新：我可以继续处理错误列表。主要的JavaScript文件app.grid.js也写得很脏。它包含明确错误，例如type: "'POST'"而不是type: 'POST'或type: "POST"，使用eval函数代替JSON.parse等等。

使用ashx提供我发现的数据也不是最好的主意。更好的是可以使用ASMX Web服务，svc WCF服务或ASP.NET MVC应用程序与控制器返回JSON数据。查看我的old answer，您可以在其中找到一些指向工作代码示例的链接。

同一代码中jQuery(function($) {/**/}和jQuery(document).ready(function() {/**/});的使用情况也不佳。

我建议您验证http://www.jsonlint.com/中的JSON数据，并在http://www.jslint.com/中验证您的JavaScript代码。

Jqgrid不显示数据

2 个答案: