jqGrid Subgrid con datos "locales"

Question

Estoy tratando de hacer que mi sub-red trabaje con datos locales. Sin embargo, cuando hago clic en expandir, obtengo un cuadro de carga, como la cuadrícula está intentando extraer los datos de algún lugar. Supongo que no necesito un subGridUrl ya que el tipo de datos de la cuadrícula maestra es datatype:'local'. ¿Hay algo más que deba hacer?

Answer 1

No hay una manera directa de definir subgrid con datos locales, pero puede implementar relativamente fácil el mismo comportamiento usando subGridRowExpanded (Subgrid as Grid). Lo que hay que hacer es obtener de algunas estructuras internas los datos de la subred por el hilera de la grilla. Por ejemplo, si usted tendría mapa subcuadrículas como

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

Dentro de subGridRowExpanded puede crear inferior a la malla con el siguiente código:

$("#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 muestra los resultados en vivo: