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

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

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

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

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

Answer 2

Я знаю, что это поздний ответ, но для дальнейшего использования группировка заголовков теперь включена в версию 4.2.0 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

Согласно Справка, необходимая для группирования по нескольким столбцам (jQGrid 3.8.2) , группа поддержки jqGrid указывает:

В настоящее время это не поддерживается. Несколько заголовков столбцов в одном столбце (подколонках) в настоящее время не являются функцией 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);