jQgrid: encabezados de fila de columnas múltiples

Question

Estoy tratando de extender mi jQGrid para tener varias filas para el encabezado.

Se verá algo como esto

   ----------------------- 
Level 1 - > | Application   | 
       ----------------------- 
Level 2 - > |Code | Name  | 
       ----------------------- 
       | 0002827| Mobile Phone1 
       | 0202827| Mobile Phone2 
       | 0042827| Mobile Phon3e 
       | 0005827| Mobile Phone4 
       | 0002627| Mobile Phon5e 
       | 0002877| Mobile Phone6 
       | 0002828| Mobile Phone7 

Me pregunto cómo hacer esto con jqGrid 3.8.2? ¿Algunas ideas?

Answer 1

El problema no es tan fácil como parece a primera vista. He intentado encontrar una solución sencilla, pero el mejor resultado que he encontrado que puedo ver here:

El orden de las cabeceras (nivel 1 y nivel 2) no es como uno quisiera tener. Otros intentos como this o this tienen errores porque la ordenación y el redimensionamiento de la columna no son más correctos.

Para la comprensión: la rejilla se mueve el exterior <thead>de la mesa y lo coloca dentro de separada que se coloca por encima de la mesa (ver here para más información). Permite incluir información adicional, como la barra de herramientas de búsqueda entre el encabezado de la tabla y el cuerpo de la tabla. Otros lugares en el código jqGrid como el cambio de tamaño de columnas y la ordenación de columnas funcionan incorrectamente si existen otros encabezados (uno más <tr> con <th> elementos) sobre los encabezados de columna principal. Por lo tanto, solo la inserción de encabezados de columna adicionales bajo los encabezados de las columnas principales (lo que por supuesto no se ve bien) no interrumpe la ordenación y el cambio de tamaño de las columnas.

ACTUALIZADO: Consulte the answer que proporcionan la solución del problema bajo algunas restricciones.

Answer 2

Según Help needed in Multiple column grouping (jQGrid 3.8.2), el equipo de apoyo jqGrid indica:

Esto no es compatible actualmente. Múltiples encabezados de columna en una sola columna (subcolumnas) no son actualmente una característica de jqGrid.

Answer 3

modificó la idea original de Oleg y la convirtió en una función que puede hacer varias cabeceras "atravesados": muestra

function head_groups(mygrid, settings){ 

    var colModel, header, config, ths; 

    if (typeof mygrid == 'string') mygrid = $(mygrid); 

    colModel = mygrid[0].p.colModel; 
    ths = mygrid[0].grid.headers; 
    header = mygrid.closest("div.ui-jqgrid-view").find("table.ui-jqgrid-htable > thead"); 

    if (!header.children("tr.head_group").length) { 
     header.find("th").attr('rowspan', 2); 
     header.append('<tr class="head_group"></tr>'); 
    } 

    for (c in settings) { 

     config = settings[c]; // caption, col, span 

     for(var i=0; i<colModel.length; i++) { 

      if (colModel[i].name == config.col) { 
       for(var s=0; s<config.span; s++) { 
        $(ths[i+s].el).removeAttr('rowspan'); 
       } 
       i +=s; // skip unnecessary cycles 
       header.children("tr.head_group").append('<th class="ui-state-default ui-th-ltr" id="span_'+config.col+'" colspan="'+config.span+'" role="columnheader">'+config.caption+'</th>'); 
      } 
     } 
    } 
} 

Uso:

head_groups("table#results", [ 
    {caption: 'Test 1', col: 'num', span: 2}, 
    {caption: 'Result', col: 'sta', span: 3}, 
    {caption: 'Bla bla bla', col: 'bl2', span: 2} 
]); 

También agrega una clase para la cabecera fila e ID para las celdas de encabezado para un estilo o funcionalidad especial.

De hecho, esto puede ser fácilmente integrado en el núcleo jqGrid :)

Answer 4

Sé que esto es una respuesta tardía pero para referencia futura header grouping ahora se incluye en la versión 4.2.0 de jqGrid

Answer 5

he modificado el código de Oleg para poder mostrar la agrupación en la primera fila, básicamente creé una tercera fila ficticia y simplemente eliminé el texto en la primera fila.

var x = 0; 
insertColumnGroupHeader = function (mygrid, mergeSettingList) { 
    var i, cmi, skip = 0, $tr, colHeader, iCol, $th, 
     colModel = mygrid[0].p.colModel, 
     ths = mygrid[0].grid.headers, 
     gview = mygrid.closest("div.ui-jqgrid-view"), 
    thead = gview.find("table.ui-jqgrid-htable>thead"); 
    $tr = $("<tr>"); 

    var currCaption = ''; 
    var currColumnName = ''; 
    var currSpan = 0; 
    var currSkip = 0; 
    tr = "<tr>"; 
    for (i = 0; i < colModel.length; i++) { 
     $th = $(ths[i].el); 
     cmi = colModel[i]; 

     if (currSkip === 0) { 
      currColumnName = ''; 
      for (j = 0; j < mergeSettingList.length; j++) { 
       if (mergeSettingList[j].col == cmi.name) { 
        currCaption = mergeSettingList[j].caption; 
        currColumnName = mergeSettingList[j].col; 
        currSpan = mergeSettingList[j].span; 
        currWidth = mergeSettingList[j].width; 
        break; 
       } 
      } 
     } 

     if (cmi.name !== currColumnName) { 
      if (currSkip === 0) { 
       $th.attr("rowspan", "2"); 
      } else { 
       // Skip part of group 
       denySelectionOnDoubleClick($th); 
       currSkip--; 
      } 
     } else { 
      denySelectionOnDoubleClick($th); 

      tr += '<th class="ui-state-default ui-th-ltr" colspan="' + currSpan + '" role="columnheader">' + currCaption + '</th>'; 
      currSkip = currSpan - 1; 
     } 
    } 
    tr += "</tr>"; 
    mygrid.closest("div.ui-jqgrid-view").find("table.ui-jqgrid-htable > thead").append(tr); 

    $th = $(ths[0].el); 
    tr = "<tr>"; 
    var html = $th.parent().html(); 
    tr += html; 
    tr += "</tr>"; 

    mygrid.closest("div.ui-jqgrid-view").find("table.ui-jqgrid-htable > thead").append(tr); 
    for (i = 0; i < colModel.length; i++) { 
     $th = $(ths[i].el); 
     cmi = colModel[i]; 
     $th.empty(); 
     $th.css({"padding-top": "0px", height: "0px", border: "0px"}); 
    } 
} 

Ejemplo de llamada.

var mergeParam = [ 
     {caption: ' ', col: 'ActionKey', span: 3}, 
     {caption: 'Planned', col: 'PlannedStartColKey', span: 5}, 
     {caption: 'Actual', col: 'ActualStartColKey', span: 12} 
    ]; 
insertColumnGroupHeader2($(GridNames.Grid), mergeParam);