es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Cómo puedo utilizar jqGrid gratis con ajax?

30 May, 2023 Programación

Quiero mostrar una cuadrícula de datos. Estoy utilizando ASP.NET MVC.

Podría simplemente escribir un código menos que bueno para recorrer mi modelo de vista y crear una cadena de javascript, algo como:

var data = “[“;
@foreach (var item in Model.items} {
“{ Nombre: ” + item.Nombre + “},
}
data += “]”;
// imprime varias líneas de javascript para construir un objeto de datos que puedo alimentar en jqgrid

Sin embargo, para evitar esto, ¿por qué no colocar los datos en un método ajax? He visto otras preguntas flotando sugerir que se puede utilizar “data: ” pero la documentación no tiene absolutamente nada sobre cómo hacer esto.

Me pregunto si es posible, y si es así, ¿en qué formato debería estar el json de retorno para poder ser utilizado por jqgrid libre?

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Sí, es posible y recomendado utilizar AJAX para mostrar una cuadrícula de datos en ASP.NET MVC con free-jqgrid. Para hacer esto, puede crear una acción en su controlador que devuelve datos JSON y llamarlo usando AJAX en su vista.

    El formato de los datos JSON de retorno debe ser una matriz de objetos, donde cada objeto representa una fila en la cuadrícula y tiene propiedades para cada columna. Por ejemplo, si tiene una cuadrícula con columnas “Nombre”, “Edad” y “Ubicación”, sus datos JSON deben estar en el siguiente formato:

    [
  { "Nombre": "John", "Edad": 30, "Ubicación": "Nueva York" },
  { "Nombre": "Mary", "Edad": 25, "Ubicación": "Los Ángeles" },
  { "Nombre": "Bob", "Edad": 40, "Ubicación": "Chicago" },
  ...
]

    Luego puede utilizar la opción datatype: "json" de free-jqgrid para configurar la cuadrícula para leer datos desde su punto final AJAX. Recuerde también configurar la opción jsonReader para que coincida con el formato de sus datos JSON. Por ejemplo:

    $("#myGrid").jqGrid({
  url: "/MiControlador/ObtenerDatos",
  datatype: "json",
  jsonReader: {
    repeatitems: false,
    root: function(obj) { return obj; },
    id: "Id",
    ...
  },
  ...
});

    En el ejemplo anterior, url es el punto final de su llamada AJAX y jsonReader está configurado para esperar una matriz de objetos con nombres de propiedades coincidentes con sus nombres de columna. Es posible que necesite ajustar la configuración de jsonReader según el formato de sus datos JSON.

Comments are closed.