Ваш вопрос не нов. Много раз соответствующий запрос функции запрашивался на форуме trirand или в stackoverflow. Я даю другой ответ на закрытый вопрос некоторое время назад.
Теперь, прочитав ваш вопрос, я решил не найти идеального решения, поддерживающего все функции jqGrid (что слишком сложно сразу). Вместо этого я решил создать решение, которое уже может быть использовано во многих случаях, но имеет некоторые ограничения.
Демо показывает мои первые результаты:
Ограничения:
- столбцы сетки не могут быть изменены. Я использую в демо
cmTemplate: {resizable: false} параметр, чтобы установить resizable: false во всех столбцах сетки.
sortable: true не поддерживается showCol, hideCol или columnChooser в настоящее время не поддерживаются, но я уверен, что можно быстро решить проблемы. - столбцы, над которыми будет размещен дополнительный заголовок столбца, должны иметь такой же ширины . Если столбцы имеют разные значения ширины, общая ширина столбца будет разделена между столбцами автоматически .
С другой стороны, все мои тесты работают без проблем с другими популярными опциями, такими как shrinkToFit: false, autowidth: true или изменением ширины сетки по методу setGridWidth (с уменьшением или без).
Теперь сначала об использовании этой функции. Я написал функцию insertColumnGroupHeader, которую я использую в приведенном выше примере как
insertColumnGroupHeader(grid, 'amount', 3, '<em>Information about the Price</em>');
Он вставляет дополнительный заголовок столбца с фрагментом HTML ' Информация о цене ' в течение 3 столбцов, начинающихся со столбца «сумма». Таким образом, использование довольно просто. Разумеется, в качестве заголовка дополнительного столбца можно использовать любой текст, например «Информация о цене».
Функция insertColumnGroupHeader имеет следующий код:
var denySelectionOnDoubleClick = function ($el) {
// see https://stackoverflow.com/questions/2132172/disable-text-highlighting-on-double-click-in-jquery/2132230#2132230
if ($.browser.mozilla) {//Firefox
$el.css('MozUserSelect', 'none');
} else if ($.browser.msie) {//IE
$el.bind('selectstart', function () {
return false;
});
} else {//Opera, etc.
$el.mousedown(function () {
return false;
});
}
},
insertColumnGroupHeader = function (mygrid, startColumnName, numberOfColumns, titleText) {
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");
mygrid.prepend(thead);
$tr = $("<tr>");
for (i = 0; i < colModel.length; i++) {
$th = $(ths[i].el);
cmi = colModel[i];
if (cmi.name !== startColumnName) {
if (skip === 0) {
$th.attr("rowspan", "2");
} else {
denySelectionOnDoubleClick($th);
$th.css({"padding-top": "2px", height: "19px"});
$tr.append(ths[i].el);
skip--;
}
} else {
colHeader = $('<th class="ui-state-default ui-th-ltr" colspan="' + numberOfColumns +
'" style="height:19px;padding-top:1px;text-align:center" role="columnheader">' + titleText + '</th>');
denySelectionOnDoubleClick($th);
$th.before(colHeader);
$tr.append(ths[i].el);
skip = numberOfColumns - 1;
}
}
mygrid.children("thead").append($tr[0]);
};
Дополнительно необходимо было внести некоторые изменения в код jqGrid. Вы можете скачать модифицированную версию (модификацию версии 4.1.2) jquery.jqGrid.src.js с здесь . Изменения состоят из двух блоков. Сначала я изменил код функции sortData, строки 1874 - 1884
var thd= $("thead:first",ts.grid.hDiv).get(0);
$("tr th:eq("+ts.p.lastsort+") span.ui-grid-ico-sort",thd).addClass('ui-state-disabled');
$("tr th:eq("+ts.p.lastsort+")",thd).attr("aria-selected","false");
$("tr th:eq("+idxcol+") span.ui-icon-"+ts.p.sortorder,thd).removeClass('ui-state-disabled');
$("tr th:eq("+idxcol+")",thd).attr("aria-selected","true");
if(!ts.p.viewsortcols[0]) {
if(ts.p.lastsort != idxcol) {
$("tr th:eq("+ts.p.lastsort+") span.s-ico",thd).hide();
$("tr th:eq("+idxcol+") span.s-ico",thd).show();
}
}
на следующее:
var previousSelectedTh = ts.grid.headers[ts.p.lastsort].el,
newSelectedTh = ts.grid.headers[idxcol].el;
$("span.ui-grid-ico-sort",previousSelectedTh).addClass('ui-state-disabled');
$(previousSelectedTh).attr("aria-selected","false");
$("span.ui-icon-"+ts.p.sortorder,newSelectedTh).removeClass('ui-state-disabled');
$(newSelectedTh).attr("aria-selected","true");
if(!ts.p.viewsortcols[0]) {
if(ts.p.lastsort != idxcol) {
$("span.s-ico",previousSelectedTh).hide();
$("span.s-ico",newSelectedTh).show();
}
}
Далее я определил getColumnHeaderIndex функцию следующим образом
var getColumnHeaderIndex = function (th) {
var i, headers = ts.grid.headers, ci = $.jgrid.getCellIndex(th);
for (i = 0; i < headers.length; i++) {
if (th === headers[i].el) {
ci = i;
break;
}
}
return ci;
};
и изменили строки 2172 и 2185 из grid.base.js с
var ci = $.jgrid.getCellIndex(this);
до
var ci = getColumnHeaderIndex(this);
Это все. Описанные выше изменения не должны оказывать негативного влияния на исходный код jqGrid и могут использоваться как обычно. Я опубликую свое предложение в следующий раз на форуме Trirand.
ОБНОВЛЕНО : Другая версия демо-версии позволяет изменять размеры всех столбцов, кроме столбцов, имеющих заголовки. В версии все столбцы, над которыми будет размещен дополнительный заголовок столбца, должны иметь одинаковую ширину. Ширина столбцов не делится между столбцами автоматически . Вы должны установить одинаковую ширину столбца вручную .
UDPATED 2 : Я хочу сообщить о некотором прогрессе в создании более продвинутой версии мультихедера jqGrid. Первое wildraid опубликовано очень интересное решение. Смотрите его демо здесь . Кстати, если использовать метод jqGrid с исправлениями, которые я предложил (см. Выше), проблема с сортировкой иконок в демонстрационной версии будет решена. Смотрите здесь демо как конформацию.
После этого я немного больше работаю над уменьшением ограничений в моем подходе с несколькими столбцами, в котором rowSpan используется для увеличения высоты столбцов.Вот мой текущий промежуточный результат: новое демо .Новая демоверсия уже отлично работает в Internet Explorer 9/8, Firefox и Opera.В браузерах на основе Webkit (Google Chrome и Safari) оно все еще имеет вышеуказанное ограничение (заголовки столбцов с несколькими заголовками должны иметь одинаковый размер и размер не должен изменяться). Демонстрационная версия выглядит хорошо, имеет ограничения и хорошо выглядит в веб-браузерах на основе Webkit.Тем не менее, вы можете увидеть прогресс во время сортировки.
Я планирую увеличить высоту области с изменяемым размером, используемой для изменения размера столбцов, на основе демо из ответа ,Конечно, будет поддерживаться использование многих заголовков поверх заголовков столбцов.ColumnChooser или showCol / hideCol также будут поддерживаться.Самое интересное для меня сейчас - найти понятный способ реализации многострочных заголовков столбцов с использованием rowSpan в браузерах на основе Webkit (Google Chrome и Safari).Возможно, кто-то еще найдет способ решения?Это основная причина, по которой я решил поделиться здесь не завершенными результатами.
ОБНОВЛЕНИЕ 3 : изменения в коде jqGrid включены (см. здесь ) восновной код jqGrid.Я улучшил решение, которое я описал здесь, до этого и этого демо.Вторая демонстрация увеличит ширину сетки, если ширина столбца будет увеличена.Мне лично нравится поведение.
ОБНОВЛЕНИЕ 4 : Следующая версия демонстрации вы можете увидеть здесь .Он имеет логическую опцию (параметр useColSpanStyle), которая определяет, следует ли использовать colspan или нет.При значении параметра false результат будет , следующий .