Liaison de colonne jqGrid et dynamic

Essayez ceci dans 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: 'jsonssortingng', 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); 

cela fonctionne bien pour moi.

Ma solution est en quelque sorte la même idée que l’excellente réponse de Teoman Shipahi d’août 2015.

J’ai un service Web qui renvoie un dataset JSON, mais les colonnes réelles peuvent varier dans le temps.

Ce que je voulais faire était de cacher certaines des colonnes JSON dans mon jqGrid et de définir la largeur de certaines des colonnes en fonction du fait que ce champ JSON particulier était l’un des champs importants (dans ce cas, SegmentName ).

Voici ce que je suis venu avec:

 $(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/LoadSegmentAtsortingbutes/" + 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); } }); }); 

Et voici la fonction qui crée le 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', }); } 

J’espère que cela t’aides.

De toute évidence, l’un des inconvénients de ma solution est qu’elle insiste pour que vous chargiez toutes vos données JSON avant de les afficher dans une grid, au lieu de ne charger qu’une page des données à la fois. Cela pourrait être un problème si vous avez une énorme quantité de données.

Si quelqu’un souhaite implémenter cette fonctionnalité à l’aide de mvc, alors http://blog.lieberlieber.com/2010/07/07/asp-net-mvc-and-a-generic-jqquery-grid-jqtgrid/ est une solution plus intéressante.

Est-il possible de recréer la grid chaque fois qu’une colonne est ajoutée? Vous pouvez stocker les données localement et simplement décharger / recréer la grid à chaque fois, à l’aide d’un modèle de colonne dynamic.

Vous pouvez également consulter certaines des démos qui affichent / cachent des colonnes de manière dynamic. Selon le nombre de colonnes que vous avez, vous pourrez peut-être utiliser le même concept dans votre application.

Est ce que ça aide?

Encore une autre solution.

  $("#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; } 

J’ai essayé la solution suggérée par bruno avec les types de retour de données json et jsonssortingng, cela fonctionne MAIS
si option datastr: colD
existe – les autres demandes de données ne sont pas exécutées, bien que le filtre fonctionne avec les premières données extraites
n’existent pas – double demande de données sur le chargement du réseau

Je suggèrerais d’exécuter $("#list").jqGrid('setGridParam',{datatype:'json'}); sur l’événement loadComplete de la grid – de cette façon, la grid existera à coup sûr. Donc, ajoutez simplement ce qui suit à la définition de la grid au lieu de setTimeout(...) :

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

Travaillé pour moi!

Si vous le faites avec la fonction d’importation, vous pouvez toujours utiliser les fonctions de pagination de jqGrid. Assurez-vous que “GetColumnsAndData” renvoie les données de grid normales en tant que “données” et la configuration en tant que “grid” (ou modifiez ces valeurs dans “jsonGrid”).

EDIT: assurez-vous également que l’un des parameters de la “grid” renvoyé est “url” (avec une valeur d’URL pour extraire uniquement les données).

 $('#grid').jqGridImport({ imptype: 'json', impurl: 'SomeUrl/GetColumnsAndData', mtype: 'POST', impData: { '_search': 'false', 'sidx': 'loc_short_name', 'sord': 'asc', 'page': '1', 'rows': '25', 'searchField': '', 'searchOper': '', 'searchSsortingng': '' // 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.subssortingng(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.ssortingngify(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.QuerySsortingng["method"] == "getGridData") { Request.InputStream.Position = 0; StreamReader ipStRdr = new StreamReader(Request.InputStream); ssortingng json = ipStRdr.ReadToEnd(); JavaScriptSerializer jser = new JavaScriptSerializer(); Dictionary dict = jser.Deserialize>(json); getGridData(int.Parse(dict["page"].ToSsortingng()), int.Parse(dict["rows"].ToSsortingng()), bool.Parse(dict["_search"].ToSsortingng()), dict["sord"].ToSsortingng()); Response.End(); } else if (Request.QuerySsortingng["method"] == "getGridHeadData") { getGridHeadData(); Response.End(); } **Method to get data in json form----------------------------------------------------** public void getGridData(int page, int rows, bool _search, ssortingng 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 

Essayez ceci sur

 $.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: 'jsonssortingng', 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);