jqGrid e vincolo dinamico di colonne

Question

Come eseguire il binding dinamico di jqGrid ?. Le colonne non sono disponibili in fase di progettazione ma saranno disponibili solo in fase di esecuzione.

Nel progetto corrente di jqGrid, i colmodels e altre proprietà devono essere pre-compilati affinché la griglia funzioni correttamente.

Qualsiasi input in questa direzione è molto apprezzato.

Answer 1

Prova questa in 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); 

questo bel lavoro per me.

Answer 2

È possibile ricreare la griglia ogni volta che viene aggiunta una colonna? È possibile memorizzare i dati localmente e solo Scaricare/Ricreare la griglia ogni volta, utilizzando un modello di colonna dinamico.

Si potrebbe anche voler guardare alcune delle demo che mostrano/nascondono le colonne in modo dinamico. A seconda di quante colonne hai, potresti essere in grado di utilizzare lo stesso concetto nella tua applicazione.

Questo aiuto?

Answer 3

Ho provato soluzione suggerita da Bruno sia con JSON e tipo jsonstring di ritorno dei dati, funziona, ma
se l'opzione datastr: freddo
    esiste - ulteriori richieste di dati non eseguire, anche se il filtro funziona al primo recuperate dati
    non esistono - doppia richiesta di dati sulla griglia di caricamento

Answer 4

Vorrei suggerire a exe cute $("#list").jqGrid('setGridParam',{datatype:'json'}); on load Evento completo della griglia: in questo modo la griglia esisterà di sicuro. Quindi, basta aggiungere il seguente alla definizione della griglia invece di setTimeout(...):

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

lavorato per me!

Answer 5

Se qualcuno desidera implementare questa funzionalità utilizzando mvc, allora http://blog.lieberlieber.com/2010/07/07/asp-net-mvc-and-a-generic-jqquery-grid-jqtgrid/ è una soluzione migliore.

Answer 6

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; 
} 

Answer 7

Se lo si fa con la funzione di importazione, è comunque possibile utilizzare le funzionalità di paging di jqGrid. Assicurati che "GetColumnsAndData" restituisca i normali dati della griglia come "dati" e la configurazione come "griglia" (o modifica questi valori in "jsonGrid").

MODIFICA: Assicurarsi inoltre che una delle impostazioni di "griglia" restituita sia "url" (con un valore URL per recuperare solo i dati).

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

Answer 8

**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<string,> dict = jser.Deserialize<dictionary><string,>>(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<string> liob = new List<string>(); 
      foreach (DataColumn column in dtRecords.Columns) 
      { 
       liob.Add(column.ColumnName); 
      } 
      objJqGrid.rowsHead = liob; 

      List<object> colcontetn = new List<object>(); 
      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)); 

     } 

Answer 9

provare questo su

$.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); 

Answer 10

Ancora un'altra soluzione;

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

Answer 11

La mia soluzione è la stessa idea dell'eccellente risposta di Teoman Shipahi da agosto 2015.

Ho un servizio Web che restituisce un set di dati JSON, ma le colonne effettive potrebbero variare nel tempo.

Quello che volevo fare era nascondere alcune delle colonne JSON nel mio jqGrid, e impostare la larghezza di alcune delle colonne in base se questo particolare settore JSON è stato uno dei settori più importanti (in questo caso, SegmentName).

Ecco cosa mi è venuta:

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

Ed ecco la funzione che crea l'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', 
    }); 
} 

Spero che questo aiuti.

Ovviamente un aspetto negativo per la mia soluzione è che insiste sul fatto che si carica tutte dei tuoi dati JSON prima di visualizzarlo in una griglia, piuttosto che caricare solo una pagina di dati alla volta. Questo potrebbe essere un problema se hai una grande quantità di dati.