JqGrid addJSONData + ASP.NET 2.0 WS
https://stackoverflow.com/questions/545714
-
23-08-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
Je suis un peu perdu. J'ai essayé de mettre en œuvre une solution basée sur jqGrid et essayé d'utiliser la fonction comme type de données. J'ai tous setted par le livre que je suppose, je reçois WS invoqué et obtenir JSON retour, je suis arrivé sur clientside à succés appel ajax et je « bind » jqGrid en utilisant addJSONData mais la grille reste vide. Je n'ai pas la moindre idée ... maintenant d'autres échantillons « locaux » sur les pages mêmes fonctionne sans problème (jsonstring ...)
Ma méthode WS ressemble à:
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public string GetGridData()
{
// Load a list
InitSessionVariables();
SA.DB.DenarnaEnota.DenarnaEnotaDB db = new SAOP.SA.DB.DenarnaEnota.DenarnaEnotaDB();
DataSet ds = db.GetLookupForDenarnaEnota(SAOP.FW.DB.RecordStatus.All);
// Turn into HTML friendly format
GetGridData summaryList = new GetGridData();
summaryList.page = "1";
summaryList.total = "10";
summaryList.records = "160";
int i = 0;
foreach (DataRow dr in ds.Tables[0].Rows)
{
GridRows row = new GridRows();
row.id = dr["DenarnaEnotaID"].ToString();
row.cell = "[" + "\"" + dr["DenarnaEnotaID"].ToString() + "\""
+ "," + "\"" + dr["Kratica"].ToString() + "\""
+ "," + "\"" + dr["Naziv"].ToString() + "\""
+ "," + "\"" + dr["Sifra"].ToString() + "\""
+ "]";
summaryList.rows.Add(row);
}
return JsonConvert.SerializeObject(summaryList);
}
mon code ASCX est la suivante:
jQuery(document).ready(function(){
jQuery("#list").jqGrid({
datatype : function (postdata) { jQuery.ajax({ url:'../../AjaxWS/TemeljnicaEdit.asmx/GetGridData',
data:'{}',
dataType:'json',
type: 'POST',
contentType: "application/json; charset=utf-8",
complete: function(jsondata,stat){
if(stat=="success")
{
var clearJson = jsondata.responseText;
var thegrid = jQuery("#list")[0];
var myjsongrid = eval('('+clearJson+')');
alfs
thegrid.addJSONData(myjsongrid.replace(/\\/g,''));
}
}
}
);
},
colNames:['DenarnaEnotaID','Kratica', 'Sifra', 'Naziv'],
colModel:[
{name:'DenarnaEnotaID',index:'DenarnaEnotaID', width:100},
{name:'Kratica',index:'Kratica', width:100},
{name:'Sifra',index:'Sifra', width:100},
{name:'Naziv',index:'Naziv', width:100}],
rowNum:15,
rowList:[15,30,100],
pager: jQuery('#pager'),
sortname: 'id',
// loadtext:"Nalagam zapise...",
// viewrecords: true,
sortorder: "desc",
// caption:"Vrstice",
// width:"800",
imgpath: "../Scripts/JGrid/themes/basic/images"});
});
de WS je reçois JSON comme ceci:
{”page”:”1″,”total”:”10″,”records”:”160″,”rows”:[{"id":"18","cell":"["18","BAM","Konvertibilna marka","977"]“},{”id”:”19″,”cell”:”["19","RSD","Srbski dinar","941"]“},{”id”:”20″,”cell”:”["20","AFN","Afgani","971"]“},{”id”:”21″,”cell”:”["21","ALL","Lek","008"]“},{”id”:”22″,”cell”:”["22","DZD","Alžirski dinar","012"]“},{”id”:”23″,”cell”:”["23","AOA","Kvanza","973"]“},{”id”:”24″,”cell”:”["24","XCD","Vzhodnokaribski dolar","951"]“},{”id”:”25″,”cell”:”
………………
["13","PLN","Poljski zlot","985"]“},{”id”:”14″,”cell”:”["14","SEK","Švedska krona","752"]“},{”id”:”15″,”cell”:”["15","SKK","Slovaška krona","703"]“},{”id”:”16″,”cell”:”["16","USD","Ameriški dolar","840"]“},{”id”:”17″,”cell”:”["17","XXX","Nobena valuta","000"]“},{”id”:”1″,”cell”:”["1","SIT","Slovenski tolar","705"]“}]}
Je suis inscrit ce JavaScript:
clientSideScripts.RegisterClientScriptFile("prototype.js", CommonFunctions.FixupUrlWithoutSessionID("~/WebUI/Scripts/prototype-1.6.0.2.js"));
clientSideScripts.RegisterClientScriptFile("jquery.js", CommonFunctions.FixupUrlWithoutSessionID("~/WebUI/Scripts/JGrid/jquery.js"));
clientSideScripts.RegisterClientScriptFile("jquery.jqGrid.js", CommonFunctions.FixupUrlWithoutSessionID("~/WebUI/Scripts/JGrid/jquery.jqGrid.js"));
clientSideScripts.RegisterClientScriptFile("jqModal.js", CommonFunctions.FixupUrlWithoutSessionID("~/WebUI/Scripts/JGrid/js/jqModal.js"));
clientSideScripts.RegisterClientScriptFile("jqDnR.js", CommonFunctions.FixupUrlWithoutSessionID("~/WebUI/Scripts/JGrid/js/jqDnR.js"));
En fait, je pense que ce doit être quelque chose de stupide ... mais je ne peux pas le comprendre maintenant ...
La solution
J'ai essayé de résoudre le même problème pour les deux dernières heures. J'ai maintenant renoncé à faire travailler AddJSONData -. Ma méthode de service Web retourne un tableau de sorte qu'il ressemble à l'aide addRowData fonctionnera
function ReceivedClientData(data) {
var thegrid = $("#list4");
for (var i = 0; i < data.length; i++) {
thegrid.addRowData(i+1, data[i]);
}
}
Autres conseils
La configuration du jqGrid semble bien.
Êtes-vous certain que ce que vous revenez dans le jsondata.responseText est ce que vous décrivez?
Le webservice que je vous écris dans .NET renvoie JSON formaté comme ceci:
{"d": "{”page”:”1″,”total”:”10″,”records”:”160″,”rows”:[{"id":"18","cell":"["18","BAM","Konvertibilna marka","977"]“}"
Dans ma fonction, je devais faire ceci:
complete: function(data) {
var stuff = JSON.parse(data.responseText);
jQuery("#grid")[0].addJSONData(JSON.parse(stuff.d));
}
Je devais convertir la chaîne en JSON deux fois avant que je n'ai les données que je avais besoin.
Si vous éprouvez des grands problèmes. Je suggère le débogage ce morceau par morceau. Exécuter une simple déclaration comme ceci:
jQuery("#list")[0].addJSONData(JSON.parse("{total: 1, page: 1, records: 1, rows : [ {id: '1', cell:['1', '2007-10-01', 'test', 'note', 'new', '200.00', '10.00', '210.00']} ] }"));
Cela devrait fonctionner à tout le moins. Après cela, analyser juste la sortie que vous obtenez du service Web et assurez-vous que vous pouvez simplement obtenir cette déclaration à exécuter pour « complète ».
En fait, la clé semble être les paramètres sur addJSONData qui ne figurent pas dans les documents:
function ReceivedClientData(data) {
var thegrid = $("#rowed2");
thegrid[0].addJSONData(data,thegrid.bDiv,9)
}
La méthode web qui va avec est:
[WebMethod(EnableSession = true)]
public object GetTestClients(int pagenum, int rows)
{
var lst = Session["lst"] as List<Entities.Client>;
if (lst == null)
{
lst = new List<Entities.Client>();
for (int i = 1; i <= 5; i++)
{
lst.Add(new TF.WebApps.Entities.Client()
{
ClientID = "Client" + i,
Firstname = "first" + i,
Lastname = "last" + i
});
}
Session["lst"] = lst;
}
var v = from c in lst
select new
{
id = c.ClientID,
cell = new object[]
{
c.ClientID,
c.Firstname,
c.Lastname
}
};
var result = new
{
total = v.Count() / rows,
page = pagenum,
records = rows,
rows = v.Skip((pagenum-1)*rows).Take(rows).ToArray()
};
return result;
}
J'utilise également un webservice pour transmettre des données à un jqGrid. Je suis tombé sur le même problème et voici le code dans la partie complète de la fonction .ajax.
complete: function(jsondata, stat) {
if (stat == "success") {
var thegrid = jQuery("#list2")[0];
var jsonObject = eval('(' + jsondata.responseText + ')');
thegrid.addJSONData(jsonObject.d);
}
}
La clé est le .d après la responseText est évaluée dans un objet JSON.
Je sais qu'il est vieux, mais c'est probablement votre problème ...
Faire row.cell une liste, vous pouvez faire ...
row.cell = new List {
dr["DenarnaEnotaID"]
,dr["Kratica"]
,dr["Naziv"]
,dr["Sifra"]
};Du côté de script ...
var myjsongrid = eval('('+clearJson+')');
...
thegrid.addJSONData(myjsongrid.replace(/\\/g,''));
myjsongrid est un objet à ce stade, il n'y a généralement pas une méthode .replace sur les objets. En outre, vous devriez probablement utiliser un analyseur de JSON insted du eval. J'utilise une version modifiée de Crockford de moi-même, mais json2.js YMMV.
Cela devrait rendre chaque ligne comme vous le voulez, laisser le sérialiseur gérer la conversion ... Je sérialiser en fait mes datatables à {colonnes: [ « colname », ...], les lignes: [[ « row1val » ,. ..], [ « row2val », ...], ...]} et frob ce côté client que j'utilise certains des mêmes appels pour alimenter divers réseaux ... J'ai un selectForJqGrid (tableau côté client, keycol, [liste col]) qui redresserai pour une utilisation directe à un jqGrid.
Cela fonctionne pour moi:
mygrid[0].addJSONData(result, mygrid.bDiv, 0);
Ou essayez ceci:
mygrid[0].addJSONData($.toJSON(result), mygrid.bDiv, 0);
Mon réseau est jsonstring type de données.
Je suis très surpris par la façon dont induire en erreur quelques-unes des suggestions ont été jqGrid.
Il y a deux façons de nourrir un jqGrid avec des données JSON de votre service.
Vous pouvez écrire une méthode pour retourner un « morceau » de données pour le jqGrid, avec des données juste assez pour une page de résultats.
Ou, vous pouvez rendre la vie facile pour vous, retourner toutes les données JSON en une seule fois, et obtenir jqGrid pour gérer la recherche de personnes sans avoir besoin de faire d'autres appels à votre service JSON.
La clé de c'est le loadonce Réglage jqGrid:
loadonce: true,
Par exemple, j'ai un service Web JSON, qui retourne une liste des commandes pour un numéro de client particulier:
http://www.iNorthwind.com/Service1.svc/getOrdersForCustomer/BERGS
.. et je veux créer cette jqGrid hors de celui-ci:
Voici comment ma déclaration jqGrid ressemblerait à ceci:
$("#tblOrders").jqGrid({
url: 'http://www.iNorthwind.com/Service1.svc/getOrdersForCustomer/BERGS',
contentType: "application/json",
datatype: "json",
jsonReader: {
root: "GetOrdersForCustomerResult",
id: "OrderID",
repeatitems: false
},
mtype: "GET",
colNames: ["ID", "Date", "ShipName", "ShipAddress", "ShipCity", "ShippedDate"],
colModel: [
{ name: "OrderID", width: 80, align: "center" },
{ name: "OrderDate", width: 90, align: "center" },
{ name: "ShipName", width: 250 },
{ name: "ShipAddress", width: 250 },
{ name: "ShipCity", width: 95 },
{ name: "ShippedDate", width: 95 },
],
pager: "#pager",
height: 'auto',
rowNum: 8,
rowList: [8, 16, 24],
loadonce: true,
sortname: "OrderID",
sortorder: "desc",
viewrecords: true,
gridview: true,
autoencode: true,
caption: "Northwind orders"
});
Faites attention à ces trois lignes ci-dessus:
jsonReader: {
root: "GetOrdersForCustomerResult",
id: "OrderID",
repeatitems: false
},
Cela évite les mauvaises exceptions "addJSONdata" de se produire, et dit jqGrid que, en fait, notre gamme de JSON de données sont stockées dans la GetOrdersForCustomerResult de mes résultats JSON.
{
GetOrdersForCustomerResult: [
{
OrderDate: "8/12/1996",
OrderID: 10278,
ShipAddress: "Berguvsvägen 8",
ShipCity: "Luleå",
ShipName: "Berglunds snabbköp",
ShipPostcode: "S-958 22",
ShippedDate: "8/16/1996"
},
{
OrderDate: "8/14/1996",
OrderID: 10280,
...etc...
Et voilà. Pas besoin d'appeler AddJSONdata du tout.
La pleine visite virtuelle de cet exemple peut être trouvé sur mon blog:
http://mikesknowledgebase.com/pages/Services/WebServices-Page10.htm
(j'aurais aimé avoir cet article à lire, il y a trois heures, quand je commencé à examiner ces questions !!)
Votre problème est que vous devez utiliser addJSONData avec le responseText. eval, puis analyser la chaîne JSON JSON en JavaScript. Cela devrait fonctionner autour de bien.
Pour la réponse Frenchie Je voudrais encore ajouter quelques conseils à ce:
complete: function(jsondata, stat) {
if (stat == "success") {
var jsonObject = (eval("(" + jsondata.responseText + ")"));
$('#list2')[0].addJSONData(JSON.parse(jsonObject.d));
}
}
Alors, c'est votre JSON. Et le jqGrid doit être correctement configuré avec JsonReader afin qu'il ne donne pas une erreur pendant le chargement des données telles que: ne fournir tout indice que vous avez. Cela devrait résoudre votre problème.
jsonReader: {
root: "rows", //arry containing actual data
page: "page", //current page
total: "total", //total pages for the query
records: "records", //total number of records
repeatitems: false,
id: "DenarnaEnotaID" //index of the column with the PK in it
},
