Implementando jGGrid de jQuery con ASP.Net y formato JSON
https://stackoverflow.com/questions/181029
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
¿Alguien ha podido implementar el complemento de cuadrícula JQuery, jqGrid? Estoy tratando de implementar la paginación JSON, y siento que me estoy acercando, pero que también estoy siendo inundado por detalles intrascendentes. Si alguien pudiera publicar algún código de muestra, lo apreciaría enormemente.
Solución
Encontré tu publicación mientras intentaba hacer esto para mi proyecto. Lo tengo funcionando. Para cualquier persona que lo necesite en el futuro, jqGrid no funcionará de manera inmediata con JSON y ASP.NET. Necesitas hacer un par de pequeñas modificaciones a grid.base.js. Alrededor de la línea 829, reemplace la sección de estuches json con lo siguiente:
case "json":
gdata = JSON.stringify(gdata); //ASP.NET expects JSON as a string
$.ajax({ url: ts.p.url,
type: ts.p.mtype,
dataType: "json",
contentType: "application/json; charset=utf-8", //required by ASP.NET
data: gdata,
complete: function(JSON, st) { if (st == "success") { addJSONData(cleanUp(JSON.responseText), ts.grid.bDiv); if (loadComplete) { loadComplete(); } } },
error: function(xhr, st, err) { if (loadError) { loadError(xhr, st, err); } endReq(); },
beforeSend: function(xhr) { if (loadBeforeSend) { loadBeforeSend(xhr); } } });
if (ts.p.loadonce || ts.p.treeGrid) { ts.p.datatype = "local"; }
break;
Luego agrega la siguiente función:
function cleanUp(responseText) {
var myObject = JSON.parse(responseText); //more secure than eval
return myObject.d; //ASP.NET special
}
También deberá incluir el analizador JSON y modificador de cadenas . Junto con el trabajo con ASP.NET, este código revisado también es más seguro porque la declaración eval es ido.
EDITAR: También debería haber notado que es posible que deba realizar ediciones similares a grid.celledit.js, grid.formedit.js, grid.inlinedit.js y grid.subgrid.js .
Otros consejos
Acabo de jTemplates para hacer paginación del lado del cliente con jQuery y ASP.NET. Hice una publicación en el blog que puede encontrar aquí: http: // www .aaron-powell.com / blog.aspx? id = 1209
Mira cómo crear una ubicación de datos con plantillas, devolver los datos de ASP.NET y luego implementar una solución de paginación.
Puede usar el ASP.Net MVC JsonResult para llenar la cuadrícula.
Clase de persona
public class Person
{
public int ID { get; set; }
public string Name { get; set; }
public DateTime Birthday { get; set; }
public static IEnumerable<Person> GetABunchOfPeople()
{
// Get a bunch of People.
}
}
En tu controlador tendrías:
public JsonResult GetABunchOfPeopleAsJson()
{
var rows = (Person.GetABunchOfPeople()
.Select(c => new
{
id = c.ID,
cell = new[]
{
c.ID.ToString(),
c.Name,
c.Birthday.ToShortDateString()
}
})).ToArray();
return new JsonResult
{
Data = new
{
page = 1,
records = rows.Length,
rows,
total = 1
}
};
}
Y la configuración jqGrid para la url sería:
url: '<%= ResolveUrl("~/Person/GetAllPeople") %>',
Solo estoy luchando tratando de juntar todo. Mi primera preocupación es simplemente generar una respuesta JSON correcta. Mi clase devuelta parece ser serializada como una propiedad llamada 'd': ¿es esto una cosa de JQuery o la convención del método web ASP.Net? Me temo que jqGrid buscará que los datos sean de nivel superior, mientras que asp.net los colocará en una propiedad llamada 'd':
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static object GetData() {
TestClass tc = new TestClass() { One = "Hello", Two = "World" };
return tc;
}
$("#divResults").click(function() {
$.ajax({
type: "POST",
url: "GridData_bak.aspx/GetData",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(test) {
// Replace the div's content with the page method's return.
$("#divResults").text(test.d.One);
},
error: function(msg) {
$("#divResults").text(msg);
}
});
});
El complemento de flexgrid es bastante escaso en la documentación, sin embargo, en una pequeña sección de la página de demostración hay un tut para crear un objeto serializado json, esto es un poco engañoso porque la cuadrícula requiere un formato específico, he portado el código php para la opción xml con un poco de grasa de mono, puede hacer lo mismo para el formato json
aquí está mi puerto xml
the setup for the grid
$("#tableToFlex").flexigrid({
url: 'WebService.asmx/getData'}
... *other configs* ...);
tenga en cuenta el siguiente código en la clase webservice.asmx
<WebMethod()> _
<ScriptMethod(ResponseFormat:=ResponseFormat.Xml)> _
Public Function getData(ByVal page As Integer, _
ByVal qtype As String, _
ByVal Query As String, _
ByVal rp As Integer, _
ByVal sortname As String, _
ByVal sortorder As String) As System.Xml.XmlDocument
'note these parameters are inputted to determine paging and constrains for the resultant rows
'Sample list to send to the grid
Dim list = New List(Of ApplicationStateInformation)
'Sample row object that holds name , surname , address, idnumber ...
list.Add(New RowObjects( "test1", "test1", "test1", "12345"))
list.Add(New RowObjects( "test2", "test2", "test2", "12345"))
list.Add(New RowObjects( "test3", "test3", "test3", "12345"))
list.Add(New RowObjects( "test4", "test4", "test4", "12345"))
'retun a xml doc, as we are using the xml format on the flexgrid
Dim returnDoc = New System.Xml.XmlDocument()
returnDoc.Load(New IO.StringReader(ToXmlResult(list)))
Return returnDoc
End Function
Private Function ToXmlResult(ByVal list As List(Of RowObjects)) As String
'this is the xml document format the grid understands
Dim result As String = "<?xml version=""1.0"" encoding=""utf-8""?>" & vbCrLf
result += "<rows>" & vbCrLf
result += String.Format("<page>{0}</page>" & vbCrLf, "1")
result += String.Format("<total>{0}</total>" & vbCrLf, "10")
For Each item In list
result += ConvertRowData(item)
Next
result += "</rows>" & vbCrLf
Return result
End Function
Private Function ConvertRowData(ByVal row As RowObjects) As String
Dim result As String = String.Format("<row id='{0}'>" & vbCrLf, row.IdNumber.ToString)
'THESE SHOULD BE HTML ENCODED (the format arg) but I left it out
result += String.Format("<cell><![CDATA[{0}]]></cell>" & vbCrLf, row.Name)
result += String.Format("<cell><![CDATA[{0}]]></cell>" & vbCrLf, row.Surname)
result += String.Format("<cell><![CDATA[{0}]]></cell>" & vbCrLf, row.IdNumber)
result += "</row>" & vbCrLf
Return result
End Function
Creo que puedes hacer que jqgrid funcione con json & amp; asp.net sin modificar grid.base.js y otros archivos jqgrid, tiene que usar la propiedad datatype para definir su propia llamada ajax personalizada y definir un lector json, jqgrid usará su llamada y lector ajax personalizados cada vez que se vuelva a cargar la cuadrícula .
El proceso es similar para xml: solo se define un xmlreader en lugar de un jsonreader.
Todas las propiedades del jsonreader se definen en documentación en línea
Para ver ejemplos de tipos de datos personalizados, vea "Función como tipo de datos". en la página de demostración en vivo en la sección " New in 3.3 "
Mi implemento:
datos: " {'página': '" + gdata.page + " ',' filas ':' " + gdata.rows + " ',' sidx ':' " + gdata.sidx + " ',' sord ':' " + gdata.sord + " ',' nd ':' " + gdata.nd + " ',' _ search ':' " + gdata._search + " ',' searchField ':' " + ts.p.searchdata.searchField + " ',' searchString ':' " + ts.p.searchdata.searchString + " ',' searchOper ':' " + ts.p.searchdata.searchOper + " '} " ;,
success: function (JSON, st) { if (st == " success ") {addJSONData (JSON.d, ts.grid.bDiv); if (loadComplete) {loadComplete (); }}
Se instaló utilizando un evento ajax completo. De esta manera se evita que el doble json seaalizado.
Solo una cosa que no me di cuenta con la edición de celdas: Supongamos que quiero editar varias celdas con el mismo tipo de datos (int). Solo tengo un método web! y no puedo cargar con un mismo tipo de datos con diferente nombre! ¿Alguien resuelve este tipo de problema?
