jQgrid: заголовки столбцов нескольких столбцов

Question

Я пытаюсь расширить мой jQGrid, чтобы иметь несколько строк для заголовка.

Это будет выглядеть примерно так

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

Я задаюсь вопросом, как сделать это с jQGrid 3.8.2? Есть идеи?

Answer 1

Проблема на самом деле не так проста, как это выглядит на первый взгляд. Я пытался найти простое решение, но лучший результат, который я нашел, вы можете увидеть here:

Порядок заголовков (уровень 1 и уровень 2) не является, как хотелось бы иметь. Другие попытки, такие как this или this, являются ошибками, потому что сортировка и сортировка столбцов работают не более корректно.

Для понимания: сетка перемещает <thead>вне таблицы и помещает его внутри отдельного , которые помещаются над таблицей (см here для получения дополнительной информации). Он позволяет включать некоторую дополнительную информацию, такую ​​как панель поиска между заголовком таблицы и телом таблицы. Другие места в коде jqGrid, такие как изменение размера столбцов и сортировка столбцов, работают некорректно, если существуют другие заголовки (еще один <tr> с элементами <th>) над заголовками основных столбцов. Таким образом, только вставка дополнительных заголовков столбцов под заголовки главных столбцов (что выглядит не очень приятно, конечно) не нарушает сортировку и изменение размеров столбцов.

ОБНОВЛЕНО: См. the answer, которые предоставляют решение проблемы при некоторых ограничениях.

Answer 2

Согласно Help needed in Multiple column grouping (jQGrid 3.8.2), команда поддержки jqGrid указывает:

Это в настоящее время не поддерживается. Несколько заголовков столбцов в одном столбце (подколонки) в настоящее время не являются функцией jqGrid.

Answer 3

Модифицированный оригинальную идею Олег и превратил его в функцию, которая может сделать несколько «натянутыми» заголовков: образец

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

Использования:

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

Он также добавляет класс для заголовка строки и идентификаторы для ячеек заголовка для некоторых стилей или специальных функций.

На самом деле это может быть легко интегрирован в ядро ​​jqGrid :)

Answer 4

Я знаю, что это поздний ответ, но на будущее header grouping теперь включена в версию 4.2.0 из jqGrid

Answer 5

Я модифицировал код Олега, чтобы показать группировку в первой строке, в основном я создал фиктивную третью строку и просто удалил текст в первой строке.

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

Образец вызова.

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