Cómo mostrar datos indirectos en Jqgrid

Estoy implementando Jqgrid en mi aplicación web ASP.net MVC. Tengo datos de algo como esto:

SID SNAME CITY 1 ABC 11 2 XYZ 12 3 ACX 13 4 KHG 14 5 ADF 15 6 KKR 16 

y otra mesa

  CID CNAME 11 Chennai 12 Mumbai 13 Delhi like this 

pero, en la grilla me gustaría mostrar de esta manera:

  SID SNAME City 1 ABC Chennai 2 XYZ Mumbai 3 ACX Delhi 4 KHG Banglore 5 ADF Hyderabad 6 KKR Kolkatta 

No pude usar join porque la estructura de clases es así:

  Class Student { long sid, string sname, long city } 

Entonces, cuando estoy leyendo de la base de datos obtengo el id de la ciudad, no el nombre de la ciudad.

Pero me gustaría mostrar el nombre de la ciudad en lugar de City ID en los datos de la grilla para el usuario final

Necesito algo así como una función de lookup para que antes de vincular datos a jQgrid, la identificación de la ciudad se mapee con el nombre de la ciudad y se muestre en lugar de mostrar la identificación

No encontré la manera de hacer esto.

Por favor ayuda..

 The controller method i am using is as follows: public JsonResult Students() { List liStudents = new List(); SortedList slLocations = new SortedList(); slLocations = Students.LoadLocations(); liStudents = Students.GetStudents(); return Json(liStudents,JsonRequestBehavior.AllowGet); } 

Cómo modificar la statement de devolución para lanzar también slLocations en la respuesta json

Ya respondí en la pregunta cerrada antes (ver aquí ). Sin embargo, decido responder a su pregunta en detalle porque el problema que describe es realmente muy común.

Comienzo recordando que jqGrid proporciona el formatter: "select" que usa formatoptions.value o editoptions.value para decodificar ids a los textos. El formatter: "select" usa value y separator opcional, delimiter y propiedades defaultValue , pero no puede usar editoptions.dataUrl para obtener los datos requeridos del servidor en lugar del value estático de uso. El problema es muy fácil: el procesamiento de dataUrl funciona de manera asíncrona , pero durante el formateo de la columna del cuerpo de la grilla uno no admite el retraso en el llenado. Entonces, para usar el formatter: "select" uno tiene que establecer formatoptions.value o editoptions.value antes de que editoptions.value la respuesta del servidor.

En la respuesta anterior sugerí extender la respuesta JSON devuelta desde el servidor con datos adicionales para editoptions.value de las columnas que tienen el formatter: "select" . Sugiero configurar el beforeProcessing . Por ejemplo, uno puede generar la respuesta del servidor en el siguiente formato:

 { "cityMap": {"11": "Chennai", "12": "Mumbai", "13": "Delhi"}, "rows": [ { "SID": "1", "SNAME": "ABC", "CITY": "11" }, { "SID": "2", "SNAME": "XYZ", "CITY": "12" }, { "SID": "3", "SNAME": "ACX", "CITY": "13" }, { "SID": "4", "SNAME": "KHG", "CITY": "13" }, { "SID": "5", "SNAME": "ADF", "CITY": "12" }, { "SID": "6", "SNAME": "KKR", "CITY": "11" } ] } 

y usa las siguientes opciones de jqGrid

 colModel: [ {name: "SNAME", width: 250}, {name: "CITY", width: 180, align: "center"} ], beforeProcessing: function (response) { var $self = $(this); $self.jqGrid("setColProp", "CITY", { formatter: "select", edittype: "select", editoptions: { value: $.isPlainObject(response.cityMap) ? response.cityMap : [] } }); }, jsonReader: { id: "SID"} 

La demostración demuestra el enfoque. Muestra

enter image description here

Uno puede usar el mismo enfoque para establecer dinámicamente las opciones de columna. Por ejemplo, uno puede usar

 { "colModelOptions": { "CITY": { "formatter": "select", "edittype": "select", "editoptions": { "value": "11:Chennai;13:Delhi;12:Mumbai" }, "stype": "select", "searchoptions": { "sopt": [ "eq", "ne" ], "value": ":Any;11:Chennai;13:Delhi;12:Mumbai" } } }, "rows": [ { "SID": "1", "SNAME": "ABC", "CITY": "11" }, { "SID": "2", "SNAME": "XYZ", "CITY": "12" }, { "SID": "3", "SNAME": "ACX", "CITY": "13" }, { "SID": "4", "SNAME": "KHG", "CITY": "13" }, { "SID": "5", "SNAME": "ADF", "CITY": "12" }, { "SID": "6", "SNAME": "KKR", "CITY": "11" } ] } 

y el siguiente código JavaScript

 var filterToolbarOptions = {defaultSearch: "cn", stringResult: true, searchOperators: true}, removeAnyOption = function ($form) { var $self = $(this), $selects = $form.find("select.input-elm"); $selects.each(function () { $(this).find("option[value='']").remove(); }); return true; // for beforeShowSearch only }, $grid = $("#list"); $.extend($.jgrid.search, { closeAfterSearch: true, closeAfterReset: true, overlay: 0, recreateForm: true, closeOnEscape: true, afterChange: removeAnyOption, beforeShowSearch: removeAnyOption }); $grid.jqGrid({ colModel: [ {name: "SNAME", width: 250}, {name: "CITY", width: 180, align: "center"} ], beforeProcessing: function (response) { var $self = $(this), options = response.colModelOptions, p, needRecreateSearchingToolbar = false; if (options != null) { for (p in options) { if (options.hasOwnProperty(p)) { $self.jqGrid("setColProp", p, options[p]); if (this.ftoolbar) { // filter toolbar exist needRecreateSearchingToolbar = true; } } } if (needRecreateSearchingToolbar) { $self.jqGrid("destroyFilterToolbar"); $self.jqGrid("filterToolbar", filterToolbarOptions); } } }, jsonReader: { id: "SID"} }); $grid.jqGrid("navGrid", "#pager", {add: false, edit: false, del: false}) $grid.jqGrid("filterToolbar", filterToolbarOptions); 

La demostración usa el código anterior.

Recreamos el filtro de búsqueda si alguna opción se cambia dinámicamente. El camino permite implementar soluciones más flexibles. Por ejemplo, el servidor puede detectar las preferencias de idioma del cliente (del navegador web) y devolver las opciones de formato para números, fechas, etc., según las opciones. Estoy seguro de que todos pueden sugerir otros escenarios interesantes.

Una observación más. Si tiene demasiados elementos en select in ( searchoptions.value y editoptions.value ), le recomendaría que no use cadenas en lugar de objetos como el valor de searchoptions.value y editoptions.value . Le permite especificar el orden de los elementos en el elemento de selección.

Si tiene demasiados elementos en seleccionar (por ejemplo, todas las ciudades de su país), entonces puede considerar usar el complemento select2 cuyo uso demuestro en la respuesta . Simplifica la selección de opciones porque convierte select en el elemento que está muy cerca de jQuery UI Autocomplete.

La próxima demostración demuestra el uso del complemento select2 . Si hace clic en la flecha desplegable del elemento “seleccionar” de la barra de herramientas de búsqueda o en el cuadro de diálogo de búsqueda, obtendrá una entrada adicional archivada que se puede usar para una búsqueda rápida. Si uno comienza a escribir texto en el cuadro de entrada (por ejemplo, “e” en un ejemplo en la imagen siguiente), la lista de opciones se reducirá a las opciones que tienen el texto escrito como subcadena:

enter image description here

Personalmente encuentro ese control de “búsqueda selectiva” muy práctico.

Por cierto, describí en la otra respuesta cómo configurar colNames dinámicamente. En se puede usar para administrar más información desde el lado del servidor.

ACTUALIZADO : la acción del controlador correspondiente Los Students pueden ser sobre lo siguiente

 public class Student { public long SID { get; set; } public string SNAME { get; set; } public long CITY { get; set; } } public class City { public long CID { get; set; } public string CNAME { get; set; } } ... public class HomeController : Controller { ... public JsonResult Students () { var students = new List { new Student { SID = 1, SNAME = "ABC", CITY = 11 }, new Student { SID = 2, SNAME = "ABC", CITY = 12 }, new Student { SID = 3, SNAME = "ABC", CITY = 13 }, new Student { SID = 4, SNAME = "ABC", CITY = 13 }, new Student { SID = 5, SNAME = "ABC", CITY = 12 }, new Student { SID = 6, SNAME = "ABC", CITY = 11 } }; var locations = new List { new City { CID = 11, CNAME = "Chennai"}, new City { CID = 12, CNAME = "Mumbai"}, new City { CID = 13, CNAME = "Delhi"} }; // sort and concatinate location corresponds to jqGrid editoptions.value format var sortedLocations = locations.OrderBy(location => location.CNAME); var sbLocations = new StringBuilder(); foreach (var sortedLocation in sortedLocations) { sbLocations.Append(sortedLocation.CID); sbLocations.Append(':'); sbLocations.Append(sortedLocation.CNAME); sbLocations.Append(';'); } if (sbLocations.Length > 0) sbLocations.Length -= 1; // remove last ';' return Json(new { colModelOptions = new { CITY = new { formatter = "select", edittype = "select", editoptions = new { value = sbLocations.ToString() }, stype = "select", searchoptions = new { sopt = new[] { "eq", "ne" }, value = ":Any;" + sbLocations } } }, rows = students }, JsonRequestBehavior.AllowGet); } } 

@Avinash, puedes hacer un truco como este. Pero aún así no es una mejor solución. Puede ayudarte a tener una idea. Cuál es mi sugerencia es que necesita encontrar una mejor forma de su servidor (ASP.Net). Utilicé la función de cuadrícula completa para modificar sus datos,

 gridComplete: function () { var rowIDs = jQuery("#list5").getDataIDs(); for (var i=0;i 

Espero que esto ayude.