jqGrid Subgrid con dati "locali"

Question

Sto cercando di far funzionare la mia subgrid con dati locali. Tuttavia, quando faccio clic su Espandi, ottengo solo una finestra di caricamento come se la griglia stia tentando di estrarre i dati da qualche parte. Presumo che non sia necessario un subGridUrl poiché il tipo di dati della griglia principale è datatype:'local'. C'è qualcos'altro che dovrei fare?

Answer 1

Non esiste un modo diretto per definire la subgrid con i dati locali, ma è possibile implementare in modo relativamente semplice lo stesso comportamento utilizzando subGridRowExpanded (Subgrid as Grid). Quello che si deve fare è semplicemente ottenere da alcune strutture interne i dati per la subgrid dal rowid della griglia. Per esempio, se si avrebbe subgrids mappa come

var myGridData = [ 
     // main grid data 
     {id: "m1", col1: "11", col2: "12"}, 
     {id: "m2", col1: "21", col2: "22"} 
    ], 
    mySubgrids = { 
     m1: [ 
      // data for subgrid for the id=m1 
      {id: "s1a", c1: "aa", c2: "ab", c3: "ac"}, 
      {id: "s1b", c1: "ba", c2: "bb", c3: "bc"}, 
      {id: "s1c", c1: "ca", c2: "cb", c3: "cc"} 
     ], 
     m2: [ 
      // data for subgrid for the id=m2 
      {id: "s2a", c1: "xx", c2: "xy", c3: "xz"} 
     ] 
    }; 

All'interno di subGridRowExpanded è possibile creare sotto-griglia con il seguente codice:

$("#grid").jqGrid({ 
    datatype: 'local', 
    data: myGridData, 
    colNames: ['Column 1', 'Column 2'], 
    colModel: [ 
     { name: 'col1', width: 200 }, 
     { name: 'col2', width: 200 } 
    ], 
    ... 
    subGrid: true, 
    subGridRowExpanded: function (subgridDivId, rowId) { 
     var subgridTableId = subgridDivId + "_t"; 
     $("#" + subgridDivId).html("<table id='" + subgridTableId + "'></table>"); 
     $("#" + subgridTableId).jqGrid({ 
      datatype: 'local', 
      data: mySubgrids[rowId], 
      colNames: ['Col 1', 'Col 2', 'Col 3'], 
      colModel: [ 
       { name: 'c1', width: 100 }, 
       { name: 'c2', width: 100 }, 
       { name: 'c3', width: 100 } 
      ], 
      ... 
     }); 
    } 
}); 

The demo mostra i risultati in diretta: