Jqgrid не показывает данные - PullRequest
0 голосов
/ 01 ноября 2010

Я использую файл * .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();
});

Пожалуйста, помогите мне

С наилучшими пожеланиями

Ответы [ 2 ]

0 голосов
/ 01 ноября 2010

Извините, но в вашем коде так много ошибок, что их сложно описать вместе.Первая ошибка в данных 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.

В списке файлов JavaScript, включенных в элемент <head>, выиметь полный хаос.Вы включили jqGrid как один раз файлы JavaScript в сжатой и несжатой форме.Более того, вы использовали неправильный порядок файлов: вы должны включить jquery-1.4.2.min.js перед jquery-ui-1.8.5.custom.min.js, которые его используют, и включить grid.locale-en.j перед jquery.jqGrid.min.js.Файл grid.loader.js, кстати, включает в себя все версии разработчика файлов еще раз.Более того, вы должны включить в заголовок мета-элемент, например <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> (см. пример ).

Вы должны прочитать Как установить часть документации, решитькакую версию jqGrid (сжатую или версию для разработчика) вы хотите использовать и включить ее.

ОБНОВЛЕНО : я мог бы продолжить со списком ошибок.Основной файл JavaScript app.grid.js написан тоже очень грязно.Он содержит явные ошибки, такие как type: "'POST'" вместо type: 'POST' или type: "POST", используйте функцию eval вместо JSON.parse и т. Д.

Использование ashx для предоставления данных, которые я нахожу также нелучшая идеяГораздо лучше можно использовать веб-сервис ASMX, сервис WCF svc или приложение ASP.NET MVC с контроллером, возвращающим данные JSON.Посмотрите на мой старый ответ , где вы найдете несколько ссылок на примеры с рабочим кодом.

Использование jQuery(function($) {/**/} и jQuery(document).ready(function() {/**/}); в одном и том же коде также не годится.

Я рекомендую вам проверить данные JSON в http://www.jsonlint.com/ и подтвердить свой код JavaScript в http://www.jslint.com/.

0 голосов
/ 01 ноября 2010

Ваш ответ неверный:

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

это должно быть (обратите внимание на: вместо "после объявления" cell "):

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

.. как пустая строка, которую вы вводите последней, это правильно:

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

также избегайте использования "в значениях, вы должны заменить их на что-то другое, потому что некоторые браузеры не могут обработать" escape ... IE 6 ...:))

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...