jqGrid y enlace de columna dynamic

Cómo enlazar jqGrid dinámicamente ?. Las columnas no están disponibles en el momento del diseño, pero solo estarán disponibles en tiempo de ejecución.

En el diseño actual de jqGrid, los colmodelos y otras propiedades deben rellenarse previamente para que la cuadrícula funcione correctamente.

Cualquier comentario en esta dirección es muy apreciado.

Pruebe esto en document.ready:

$.ajax( { type: "POST", url: "SomeUrl/GetColumnsAndData", data: "", dataType: "json", success: function(result) { colD = result.colData; colN = result.colNames; colM = result.colModel; jQuery("#list").jqGrid({ jsonReader : { cell: "", id: "0" }, url: 'SomeUrl/Getdata', datatype: 'jsonstring', mtype: 'POST', datastr : colD, colNames:colN, colModel :colM, pager: jQuery('#pager'), rowNum: 5, rowList: [5, 10, 20, 50], viewrecords: true }) }, error: function(x, e) { alert(x.readyState + " "+ x.status +" "+ e.msg); } }); setTimeout(function() {$("#list").jqGrid('setGridParam',{datatype:'json'}); },50); 

esto funciona bien para mi

Mi solución es la misma idea que la excelente respuesta de Teoman Shipahi desde agosto de 2015.

Tengo un servicio web que devuelve un conjunto de datos JSON, pero las columnas reales pueden variar con el tiempo.

Lo que quería hacer era ocultar algunas de las columnas JSON en mi jqGrid, y establecer el ancho de algunas de las columnas en función de si este campo JSON en particular era uno de los campos importantes (en este caso, SegmentName ).

Esto es lo que se me ocurrió:

 $(function () { // Load the JSON data we'll need to populate our jqGrid // ID of a [Segment_Set] record in our database (which our web service will load the data for. var SegmentSetId = 12345; $.ajax( { type: "GET", url: "/Service1.svc/LoadSegmentAttributes/" + SegmentSetId, dataType: "json", success: function (JSONdata) { // // Work through our JSON data, and create the two arrays needed by jqGrid // to display this dynamic data. // var listOfColumnModels = []; var listOfColumnNames = []; for (var prop in JSONdata[0]) { if (JSONdata[0].hasOwnProperty(prop)) { // We have found one property (field) in our JSON data. // Add a column to the list of Columns which we want our jqGrid to display listOfColumnNames.push(prop); // How do we want this field to be displayed in our jqGrid ? var bHidden = (prop == "SegmentID") || (prop == "SegmentSequenceInx"); var columnWidth = (prop == "SegmentName") ? 200 : 50; listOfColumnModels.push({ name: prop, width: columnWidth, sortable: true, hidden: bHidden }); } } // Now we have our JSON data, and list of Column Headings and Models, we can create our jqGrid. CreateJQGrid(JSONdata, listOfColumnModels, listOfColumnNames); } }); }); 

Y aquí está la función que crea el jqGrid:

 function CreateJQGrid(JSONdata, listOfColumnModels, listOfColumnNames) { // After loading the JSON data from our webservice, and establishing the list of // Column Names & Models, we can call this function to create the jqGrid. $("#SegmentRulesGrid").jqGrid({ datatype: "local", data: JSONdata, localReader: { id: "SegmentID", // The Primary Key field in our JSONdata repeatitems: false }, mtype: "GET", colNames: listOfColumnNames, colModel: listOfColumnModels, rowNum: 15, loadonce: true, gridview: true, autowidth: true, height: 350, pager: '#pager', rowList: [15, 30, 100, 300], rownumbers: true, viewrecords: true, caption: 'Segment Rules', }); } 

Espero que esto ayude.

Obviamente, una desventaja de mi solución es que insiste en que cargue todos sus datos JSON antes de mostrarlos en una cuadrícula, en lugar de cargar solo una página de los datos a la vez. Esto podría ser un problema si tiene una gran cantidad de datos.

Si alguien quiere implementar esta funcionalidad usando mvc, http://blog.lieberlieber.com/2010/07/07/asp-net-mvc-and-a-generic-jqquery-grid-jqtgrid/ es una solución más agradable.

¿Es factible recrear la grilla cada vez que se agrega una columna? Puede almacenar los datos localmente y simplemente Descargar / Recrear la cuadrícula cada vez, utilizando un modelo de columna dinámica.

También es posible que desee ver algunas de las demostraciones que muestran / ocultan columnas dinámicamente. Según la cantidad de columnas que tenga, es posible que pueda usar el mismo concepto en su aplicación.

¿Eso ayuda?

Otra solución más

  $("#datagrid").jqGrid({ //url: "user.json", //datatype: "json", datatype: "local", data: dataArray, colNames:getColNames(dataArray[0]), colModel:getColModels(dataArray[0]), rowNum:100, loadonce: true, pager: '#navGrid', sortname: 'SongId', sortorder: "asc", height: "auto", //210, width:"auto", viewrecords: true, caption:"JQ GRID" }); function getColNames(data) { var keys = []; for(var key in data) { if (data.hasOwnProperty(key)) { keys.push(key); } } return keys; } function getColModels(data) { var colNames= getColNames(data); var colModelsArray = []; for (var i = 0; i < colNames.length; i++) { var str; if (i === 0) { str = { name: colNames[i], index:colNames[i], key:true, editable:true }; } else { str = { name: colNames[i], index:colNames[i], editable:true }; } colModelsArray.push(str); } return colModelsArray; } 
 function columnsData(Data) { var str = "["; for (var i = 0; i < Data.length; i++) { str = str + "{name:'" + Data[i] + "', index:'" + Data[i] + "', editable: true}"; if (i != Data.length - 1) { str = str + ","; } } str = str + "]"; return str; } 

He intentado la solución sugerida por bruno tanto con json como con jsonstring tipo de retorno de datos, funciona PERO
si opción datastr: colD
existe : las solicitudes de datos adicionales no se ejecutan, aunque el filtro sí funciona en los primeros datos recuperados
no existe – solicitud doble de datos sobre la carga de la red

Sugeriría ejecutar $("#list").jqGrid('setGridParam',{datatype:'json'}); en el evento loadComplete de la grilla: de esta manera la grilla existirá con seguridad. Por lo tanto, solo agregue lo siguiente a la definición de la grilla en lugar de setTimeout(...) :

 loadComplete : function () { $ ("#list").jqGrid('setGridParam',{datatype:'json'}); } 

Trabajó para mi !

Si lo hace con la función de importación, puede utilizar las funciones de paginación de jqGrid. Asegúrese de que “GetColumnsAndData” devuelva los datos de la cuadrícula normal como “datos” y la configuración como “cuadrícula” (o cambie estos valores en “jsonGrid”).

EDITAR: También asegúrese de que uno de los ajustes de “cuadrícula” devueltos es “url” (con un valor de URL para recuperar solo datos).

 $('#grid').jqGridImport({ imptype: 'json', impurl: 'SomeUrl/GetColumnsAndData', mtype: 'POST', impData: { '_search': 'false', 'sidx': 'loc_short_name', 'sord': 'asc', 'page': '1', 'rows': '25', 'searchField': '', 'searchOper': '', 'searchString': '' // Add any additional, custom criteria }, jsonGrid: { config: 'grid', data: 'data' } }); 
 **Dynamic JQGrid From Data Table** $(document).ready(function () { var ColN, ColM, ColD, capEN; var sPath = window.location.pathname; var sPage = sPath.substring(sPath.lastIndexOf('/') + 1); //alert(sPage); $.ajax({ url: sPage+'?method=getGridHeadData', type: "POST", contentType: "application/json; charset=utf-8", data: {}, dataType: "json", success: function (data, st) { if (st == "success") { ColN = data.rowsHead;//jqgrid heading data ColM = data.rowsM; // its column model ColD = data.rows; // Data createGrid(); } }, error: function () { alert("Error with AJAX callback"); } }); function createGrid() { jQuery("#AccountingCodesGrid").jqGrid({ datatype: 'json', url: sPage+'?method=getGridData', mtype: 'POST', ajaxGridOptions: { contentType: 'application/json; charset=utf-8' }, serializeGridData: function (postData) { return JSON.stringify(postData); }, jsonReader: { repeatitems: false, root: "rows", page: "page", total: "total", records: "records" }, //data: ColD, colNames: ColN, colModel: ColM, loadonce: true, pager: jQuery('#pager'), rowNum: 5, rowList: [5, 10, 20, 50], viewrecords: true }) } jQuery("#AccountingCodesGrid").jqGrid('navGrid', '#Pager', { edit: false, add: false, del: false }, null, null, true, { multipleSearch: true }); var height = $(window).height(); }); the code behind **In page load..................................................................** if (Request.QueryString["method"] == "getGridData") { Request.InputStream.Position = 0; StreamReader ipStRdr = new StreamReader(Request.InputStream); string json = ipStRdr.ReadToEnd(); JavaScriptSerializer jser = new JavaScriptSerializer(); Dictionary dict = jser.Deserialize>(json); getGridData(int.Parse(dict["page"].ToString()), int.Parse(dict["rows"].ToString()), bool.Parse(dict["_search"].ToString()), dict["sord"].ToString()); Response.End(); } else if (Request.QueryString["method"] == "getGridHeadData") { getGridHeadData(); Response.End(); } **Method to get data in json form----------------------------------------------------** public void getGridData(int page, int rows, bool _search, string sord) { DataTable dtRecords = dtSource;// Data Table int recordsCount = dtRecords.Rows.Count; JqGridData objJqGrid = new JqGridData(); objJqGrid.page = page; objJqGrid.total = ((recordsCount + rows - 1) / rows); objJqGrid.records = recordsCount; objJqGrid.rows = ConvertDT(dtRecords); List liob = new List(); foreach (DataColumn column in dtRecords.Columns) { liob.Add(column.ColumnName); } objJqGrid.rowsHead = liob; List colcontetn = new List(); foreach (var item in liob) { JqGridDataHeading obj = new JqGridDataHeading(); obj.name = item.ToString(); obj.index = item.ToString(); colcontetn.Add(obj); } objJqGrid.rowsM = colcontetn; JavaScriptSerializer jser = new JavaScriptSerializer(); Response.Write(jser.Serialize(objJqGrid)); } 

intente esto en

 $.ajax( { type: "POST", url: "SomeUrl/GetColumnsAndData", data: "", dataType: "json", success: function(result) { colD = result.colData; colN = result.colNames; colM = result.colModel; jQuery("#list").jqGrid({ jsonReader : { cell: "", id: "0" }, url: 'SomeUrl/Getdata', datatype: 'jsonstring', mtype: 'POST', datastr : colD, colNames:colN, colModel :colM, pager: jQuery('#pager'), rowNum: 5, rowList: [5, 10, 20, 50], viewrecords: true }) }, error: function(x, e) { alert(x.readyState + " "+ x.status +" "+ e.msg); } }); setTimeout(function() {$("#list").jqGrid('setGridParam',{datatype:'json'}); },50);