1. Accueil
  2. Question et réponse
  3. Jqgrid n'affiche pas les données

Jqgrid n'affiche pas les données

2010-11-01 5 views
0

J'utilise le fichier * .ashx pour obtenir des données de la base de données. Quand j'alerter jsondata.responseText, il montre chaîne JSONJqgrid n'affiche pas les données

texte Respond est:

{ 
"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":["","","",""]} 
] 
}

Mais jqGrid pas afficher les données.

S'il vous plaît consulter mon code et m'aider s'il vous plaît!

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>

fichier javascript pour 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(); 
});

S'il vous plaît aidez-moi

Sincères salutations

Source

2010-11-01 Nguyen

Répondre

0

Votre texte responce est erroné:

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

cela devrait être (noter le: au lieu de «après la "déclaration cellulaire"):

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

.. comme la ligne vide vous entrez dans la dernière, il est correct:

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

évitez également d'utiliser "dans les valeurs, vous devriez les remplacer par quelque chose d'autre parce que certains navigateurs ne peuvent pas gérer" échapper ... IE 6 ... :))

Source

2010-11-01 09:24:18

0

Désolé mais votre code a tellement d'erreurs, qu'il est difficile de ré Ecrivez tous ensemble. La première erreur dans les données JSON avec le devis (") au lieu de :. Les données après la modification seront

{ 
    "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": ["","","",""]} 
    ] 
}

où vous avez des données comme "i": 2 au lieu de "id": 2.

Dans la liste des fichiers JavaScript inclus dans l'élément <head>, le chaos est total. Vous avez inclus jqGrid plus comme une fois les fichiers JavaScript sous forme compressée et non compressée. De plus vous avez utilisé un mauvais ordre de fichiers: vous devez inclure jquery-1.4.2.min.js avant jquery-ui-1.8.5.custom.min.js qui l'utilise et inclure grid.locale-en.j avant jquery.jqGrid .min.js. Le fichier grid.loader.js inclut d'ailleurs toutes les versions développeur des fichiers une fois de plus. De plus, vous devriez inclure dans la tête l'élément méta comme <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> (voir example).

Vous devriez lire la partie How to Install de la documentation, décider quelle version de jqGrid (version compressée ou développeur) vous voulez utiliser et l'inclure.

MISE À JOUR: Je pourrais continuer avec la liste des erreurs. Le fichier JavaScript principal app.grid.js est écrit aussi très sale. Il contient des erreurs claires comme type: "'POST'" au lieu de type: 'POST' ou type: "POST", utilisez la fonction eval au lieu de JSON.parse et ainsi de suite.

L'utilisation de ashx pour fournir les données que je trouve également pas la meilleure idée.Beaucoup mieux peut être utilisé service Web ASMX, service svc WCF ou application ASP.NET MVC avec le contrôleur renvoie des données JSON. Regardez mon old answer où vous trouverez des liens vers des exemples de code de travail.

L'utilisation de jQuery(function($) {/**/} et de jQuery(document).ready(function() {/**/}); dans le même code n'est également pas bonne.

Je vous recommande de vérifier les données JSON dans http://www.jsonlint.com/ et de vérifier votre code JavaScript dans http://www.jslint.com/.

Source

2010-11-01 10:31:49 Oleg

Questions connexes

 Questions connexes