JqGrid addJSONData + ASP.NET 2.0 WS
https://stackoverflow.com/questions/545714
-
23-08-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
Estoy un poco perdido. He tratado de poner en práctica una solución basada en jqGrid y trató de utilizar la función como tipo de datos. He Setted todo por el libro supongo, consigo WS invocado y consigo JSON, tengo éxito en clientside en la llamada ajax y yo "se unen" jqGrid usando addJSONData pero rejilla permanece vacío. No tengo ninguna pista ahora ... otras muestras "locales" en la mismas páginas que funciona sin ningún problema (jsonString ...)
Mi método WS se ve así:
[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);
}
ASCX mi código es la siguiente:
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"});
});
por el LR consigo JSON como esto:
{”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"]“}]}
Me he registrado este 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"));
Básicamente yo creo que debe ser algo estúpido ... pero no puedo averiguarlo ahora ...
Solución
He estado tratando de resolver el mismo problema para el último par de horas. Ahora me he dado por vencido en conseguir AddJSONData de trabajo -. mi método de servicio Web devuelve un array para que se vea como el uso de addRowData trabajará
function ReceivedClientData(data) {
var thegrid = $("#list4");
for (var i = 0; i < data.length; i++) {
thegrid.addRowData(i+1, data[i]);
}
}
Otros consejos
La configuración de la jqGrid se ve bien.
¿Estás seguro de que lo que recibe en el jsondata.responseText es lo que usted describe?
El servicio web que escribo en .NET devuelve el formato JSON como esto:
{"d": "{”page”:”1″,”total”:”10″,”records”:”160″,”rows”:[{"id":"18","cell":"["18","BAM","Konvertibilna marka","977"]“}"
En mi función que tenía que hacer esto:
complete: function(data) {
var stuff = JSON.parse(data.responseText);
jQuery("#grid")[0].addJSONData(JSON.parse(stuff.d));
}
que tenía que convertir la cadena JSON dos veces antes de que tiene los datos que necesitaba.
Si usted está teniendo grandes problemas. Sugiero la depuración de esta pieza por pieza. Ejecutar una instrucción sencilla como esta:
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']} ] }"));
Eso debería funcionar por lo menos. Después de eso, simplemente analizar la salida que se obtiene de servicio web y asegurarse de que sólo se puede conseguir que la sentencia que debe ejecutarse de 'completo'.
En realidad, la clave parece estar en los parámetros en addJSONData que no aparecen en la documentación:
function ReceivedClientData(data) {
var thegrid = $("#rowed2");
thegrid[0].addJSONData(data,thegrid.bDiv,9)
}
El método web que va con eso es:
[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;
}
También estoy usando un servicio web para pasar datos a un jqGrid. Me encontré con el mismo problema y aquí está el código en la parte completa de la función .ajax.
complete: function(jsondata, stat) {
if (stat == "success") {
var thegrid = jQuery("#list2")[0];
var jsonObject = eval('(' + jsondata.responseText + ')');
thegrid.addJSONData(jsonObject.d);
}
}
La clave es la .d después de la responseText se evalúa en un objeto JSON.
Sé que es antiguo, pero esto es probablemente su problema ...
Hacer row.cell una lista, a continuación, puede hacer ...
row.cell = new List {
dr["DenarnaEnotaID"]
,dr["Kratica"]
,dr["Naziv"]
,dr["Sifra"]
};En el lado de la escritura ...
var myjsongrid = eval('('+clearJson+')');
...
thegrid.addJSONData(myjsongrid.replace(/\\/g,''));
myjsongrid es un objeto en este punto, hay generalmente no es un método .replace en los objetos. También, probablemente debería utilizar un analizador JSON restaurantes en vez de la eval. Yo uso una versión modificada de Crockford json2.js mí mismo, pero tu caso es distinto.
Esto debería hacer que cada fila como usted lo desea, dejando que el serializador manejo de la conversión ... actualmente serializar mis tablas de datos a {columnas: [ 'nomCol', ...], filas: [[ 'row1val' ,. ..], [ 'row2val', ...], ...]} y el FROB que del lado del cliente como yo uso algunas de las mismas llamadas a poblar varias redes ... tengo un selectForJqGrid del lado del cliente (mesa, keycol, [lista de columna]) que será configurarlo para su uso directo a una jqGrid.
Esto funciona para mí:
mygrid[0].addJSONData(result, mygrid.bDiv, 0);
O intente lo siguiente:
mygrid[0].addJSONData($.toJSON(result), mygrid.bDiv, 0);
Mi tipo de datos de cuadrícula se jsonString.
Estoy muy sorprendido con lo engañosas que algunas de las sugerencias jqGrid han sido.
Hay dos maneras de alimentar a un jqGrid datos con JSON de su servicio.
Usted puede escribir un método para devolver un "trozo" de datos para la jqGrid, con los datos sólo lo suficiente para una página de resultados.
O bien, puede hacer la vida más fácil para usted mismo, devolver todos los datos JSON de una sola vez, y obtener jqGrid para manejar la paginación sin necesidad de hacer más llamadas a su servicio JSON.
La clave para ello es el loadonce configuración jqGrid:
loadonce: true,
Por ejemplo, tengo un servicio web JSON, que devuelve una lista de pedidos para un ID de cliente en particular:
http://www.iNorthwind.com/Service1.svc/getOrdersForCustomer/BERGS
.. y quiero para crear esta jqGrid fuera de él:
Así es como mi declaración jqGrid se vería así:
$("#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"
});
Prestar atención a estas tres líneas anteriores:
jsonReader: {
root: "GetOrdersForCustomerResult",
id: "OrderID",
repeatitems: false
},
Esto evita desagradables excepciones "addJSONdata" que se produzcan, y le dice a jqGrid que, en realidad, nuestra matriz JSON de datos se almacenan en el GetOrdersForCustomerResult parte de mis resultados 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...
Y eso es todo. No hay necesidad de llamar AddJSONdata en absoluto.
El recorrido completo de este ejemplo se puede encontrar en mi blog:
http://mikesknowledgebase.com/pages/Services/WebServices-Page10.htm
(I quisiera haber tenido este artículo para leer, hace tres horas, cuando empecé a buscar en estos temas !!)
Su problema es que usted debe utilizar addJSONData con el responseText. eval y luego analizar la cadena JSON a JSON en JavaScript. Eso debería evitar fina.
Para la respuesta de Frenchie todavía añadiría algunos consejos para que:
complete: function(jsondata, stat) {
if (stat == "success") {
var jsonObject = (eval("(" + jsondata.responseText + ")"));
$('#list2')[0].addJSONData(JSON.parse(jsonObject.d));
}
}
Así que ese es su JSON. Y el jqGrid se debe configurar correctamente con JsonReader de modo que no da un error al que está cargando los datos como: no proporcionarle cualquier índice que tiene. Esto debería resolver su problema.
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
},
