jqgrid columnas dinámicas y datos por json

Aprendí sobre jqgrid. Quiero crear una cuadrícula por datos dynamics y columnas. Hice mi pregunta y leí este enlace pero necesitaba más ejemplos

En los comentarios a mi respuesta en su respuesta anterior describí brevemente la idea de cómo puede cambiar los encabezados de las columnas en función de los datos devueltos por el servidor. Para que todo quede más claro, preparé una demostración para ti.

Traté de hacer la demostración más corta y clara, así que tiene algunas restricciones:

  • número de columnas no modificadas en diferentes respuestas del servidor
  • los formateadores y el width de la columna no se cambiarán en diferentes respuestas del servidor.

Todas las restricciones se pueden reducir o eliminar, pero en su caso las restricciones anteriores están impregnadas. Además, quería describir primero la idea principal de la implementación.

La demostración tiene botones de árbol sobre la cuadrícula que permite volver a cargar datos desde el servidor, pero desde diferentes URL. Después de hacer clic en el botón “Cargar encabezados de Rusia”, los encabezados de la cuadrícula se cambiarán dinámicamente con los textos de la respuesta del servidor y se verá la siguiente imagen

enter image description here

El formato de los datos es como a continuación:

 { "model": { "c1": { "label": "Client" }, "c2": { "label": "Date" }, "c3": { "label": "Amount" }, "c4": { "label": "Tax" }, "c5": { "label": "Total" }, "c6": { "label": "Paid" }, "c7": { "label": "Shipped via" }, "c8": { "label": "Notes" } }, "data": [ {"id": "10", "cell": ["test", "2007-10-01", "200.00", "10.00", "210.00", "true", "TN", "note" ] }, {"id": "20", "cell": ["test2", "2007-10-02", "300.00", "20.00", "320.00", "false", "FE", "note2" ] }, {"id": "30", "cell": ["test3", "2007-09-01", "400.00", "30.00", "430.00", "false", "FE", "note3" ] }, {"id": "40", "cell": ["test4", "2007-10-04", "200.00", "10.00", "210.00", "true", "TN", "note4" ] }, {"id": "50", "cell": ["test5", "2007-10-31", "300.00", "20.00", "320.00", "false", "FE", "note5" ] }, {"id": "60", "cell": ["test6", "2007-09-06", "400.00", "30.00", "430.00", "false", "FE", "note6" ] }, {"id": "70", "cell": ["test7", "2007-10-04", "200.00", "10.00", "210.00", "true", "TN", "note7" ] }, {"id": "80", "cell": ["test8", "2007-10-03", "300.00", "20.00", "320.00", "false", "FE", "note8" ] }, {"id": "90", "cell": ["test9", "2007-09-01", "400.00", "30.00", "430.00", "false", "TN", "note9" ] }, {"id": "100", "cell": ["test10", "2007-09-08", "500.00", "30.00", "530.00", "true", "TN", "note10"] }, {"id": "110", "cell": ["test11", "2007-09-08", "500.00", "30.00", "530.00", "false", "FE", "note11"] }, {"id": "120", "cell": ["test12", "2007-09-10", "500.00", "30.00", "530.00", "false", "FE", "note12"] } ] } 

La parte más importante del código de JavaScript es

 jsonReader: { root: "data" }, beforeProcessing: function (data) { var $self = $(this), model = data.model, name, $colHeader, $sortingIcons; if (model) { for (name in model) { if (model.hasOwnProperty(name)) { $colHeader = $("#jqgh_" + $.jgrid.jqID(this.id + "_" + name)); $sortingIcons = $colHeader.find(">span.s-ico"); $colHeader.text(model[name].label); $colHeader.append($sortingIcons); } } } } 

El JavaScript completo utilizado en la demostración está debajo

 var $grid = $("#list"); $grid.jqGrid({ url: "DynamicHeaderProperties.json", datatype: "json", colModel: [ { name: "c1", width: 70 }, { name: "c2", width: 80, align: "center", sorttype: "date", formatter: "date", formatoptions: {newformat: "m/d/Y"}, datefmt: "m/d/Y"}, { name: "c3", width: 70, formatter: "number", align: "right", editrules: {required: true, number: true}, editable: true}, { name: "c4", width: 60, formatter:"number", align: "right", editable: true, editrules:{required: true, number: true}}, { name: "c5", width: 110, formatter: "number", align:"right", editrules:{required:true,number: true}, editable: true}, { name: "c6", width: 80, align: "center", editable: true, formatter:"checkbox",edittype: "checkbox", editoptions: {value: "Yes:No", defaultValue: "Yes"}}, { name: "c7", width: 110, align: "center", formatter: "select", editable: true, edittype: "select", editoptions: {value: "FE:FedEx;TN:TNT;IN:Intim", defaultValue: "Intime"}}, { name: "c8", width: 90, sortable: false, editable:true} ], rowNum: 10, rowList: [5,10,20], pager: "#pager", gridview: true, rownumbers: true, sortname: "c2", viewrecords: true, sortorder: "desc", caption: "Setting coloumn headers dynamicaly", jsonReader: { root: "data" }, beforeProcessing: function (data) { var $self = $(this), model = data.model, name, $colHeader, $sortingIcons; if (model) { for (name in model) { if (model.hasOwnProperty(name)) { $colHeader = $("#jqgh_" + $.jgrid.jqID(this.id + "_" + name)); $sortingIcons = $colHeader.find(">span.s-ico"); $colHeader.text(model[name].label); $colHeader.append($sortingIcons); } } } }, loadonce: true, height: "auto" }); $("#en").button().click(function () { $grid.jqGrid("setGridParam", { datatype: "json", url: "DynamicHeaderProperties.json", }).trigger("reloadGrid", {current: true}); }); $("#ru").button().click(function () { $grid.jqGrid("setGridParam", { datatype: "json", url: "DynamicHeaderPropertiesRu.json", }).trigger("reloadGrid", {current: true}); }); $("#de").button().click(function () { $grid.jqGrid("setGridParam", { datatype: "json", url: "DynamicHeaderPropertiesDe.json", }).trigger("reloadGrid", {current: true}); });