", { role: "row", "aria-hidden": "true" }).addClass("jqg-first-row-header").css("height", "auto");
} else {
$firstHeaderRow.empty();
}
var inColumnHeader = function (cmName, columnHeaders) {
var j;
for (j = 0; j < columnHeaders.length; j++) {
if (columnHeaders[j].startColumnName === cmName) {
return columnHeaders[j];
}
}
return 0; // falsy value
};
$(ts).prepend($thead);
$tr = $("
", { role: "row" }).addClass("ui-jqgrid-labels jqg-third-row-header");
for (i = 0; i < cml; i++) {
th = ths[i].el;
$th = $(th);
cmi = colModel[i];
// build the next cell for the first header row
// ??? cmi.hidden || isCellClassHidden(cmi.classes) || $th.is(":hidden")
thStyle = { height: "0", width: ths[i].width + "px", display: (cmi.hidden ? "none" : "") };
$("
", { role: "gridcell" }).css(thStyle).addClass("ui-first-th-" + p.direction + (o.applyLabelClasses ? " " + (cmi.labelClasses || "") : "")).appendTo($firstHeaderRow);
th.style.width = ""; // remove unneeded style
thClasses = getGuiStyles.call(ts, "colHeaders", "ui-th-column-header ui-th-" + p.direction + " " + (o.applyLabelClasses ? cmi.labelClasses || "" : ""));
cghi = inColumnHeader(cmi.name, o.groupHeaders);
if (cghi) {
numberOfColumns = cghi.numberOfColumns;
titleText = cghi.titleText;
// caclulate the number of visible columns from the next numberOfColumns columns
for (cVisibleColumns = 0, iCol = 0; iCol < numberOfColumns && (i + iCol < cml); iCol++) {
if (!colModel[i + iCol].hidden && !isCellClassHidden(colModel[i + iCol].classes)) {
cVisibleColumns++;
}
}
// The next numberOfColumns headers will be moved in the next row
// in the current row will be placed the new column header with the titleText.
// The text will be over the cVisibleColumns columns
$colHeader = $("
")
.addClass(thClasses)
.html(titleText || " ");
if (cVisibleColumns > 0) {
$colHeader.attr("colspan", String(cVisibleColumns));
}
if (p.headertitles) {
$colHeader.attr("title", $colHeader.text());
}
// hide if not a visible cols
if (cVisibleColumns === 0) {
$colHeader.hide();
}
$th.before($colHeader); // insert new column header before the current
$tr.append(th); // move the current header in the next row
// set the counter of headers which will be moved in the next row
skip = numberOfColumns - 1;
} else {
if (skip === 0) {
if (o.useColSpanStyle) {
// expand the header height to two rows
$th.attr("rowspan", $trLabels.length + 1); // consider to use ($th.attr("rowspan") || 1) instead of $trLabels.length
} else {
$("
")
.addClass(thClasses)
.css({ "display": cmi.hidden ? "none" : "", "border-top": "0 none" })
.insertBefore($th);
$tr.append(th);
}
} else {
// move the header to the next row
$tr.append(th);
skip--;
}
}
}
$theadInTable = $(ts).children("thead");
$theadInTable.prepend($firstHeaderRow);
$tr.insertAfter($trLastWithLabels);
$htable.prepend($theadInTable);
$(ts).triggerHandler("jqGridAfterSetGroupHeaders");
});
},
getNumberOfFrozenColumns: function () {
var $t = this;
if ($t.length === 0) {
return 0;
}
$t = $t[0];
var colModel = $t.p.colModel, len = colModel.length, maxfrozen = -1, i;
// get the max index of frozen col
for (i = 0; i < len; i++) {
// from left, no breaking frozen
if (colModel[i].frozen !== true) {
break;
}
maxfrozen = i;
}
return maxfrozen + 1;
},
setFrozenColumns: function (o) {
o = o || {};
return this.each(function () {
var $t = this, $self = $($t), p = $t.p, grid = $t.grid;
if (!grid || p == null || p.frozenColumns === true) { return; }
var cm = p.colModel, i, len = cm.length, maxfrozen = -1, frozen = false, frozenIds = [], $colHeaderRow,// nonFrozenIds = [],
tid = jqID(p.id), // one can use p.idSel and remove "#"
hoverClasses = getGuiStyles.call($t, "states.hover");
// TODO treeGrid and grouping Support
// TODO: allow to edit columns AFTER frozen columns
if (p.subGrid === true || p.treeGrid === true || p.scroll) {
return;
}
// get the max index of frozen col
for (i = 0; i < len; i++) {
// from left, no breaking frozen
if (cm[i].frozen !== true) {
break;
//nonFrozenIds.push("#jqgh_" + tid + "_" + jqID(cm[i].name));
}
frozen = true;
maxfrozen = i;
frozenIds.push("#jqgh_" + tid + "_" + jqID(cm[i].name));
}
if (p.sortable) {
$colHeaderRow = $(grid.hDiv).find(".ui-jqgrid-htable .ui-jqgrid-labels");
try {
$colHeaderRow.sortable("destroy");
} catch (ignore) { }
$self.jqGrid("setGridParam", {
sortable: {
options: {
items: frozenIds.length > 0 ?
">th:not(:has(" + frozenIds.join(",") + "),:hidden)" :
">th:not(:hidden)"
}
}
});
$self.jqGrid("sortableColumns", $colHeaderRow);
}
if (maxfrozen >= 0 && frozen) {
var top = p.caption ? $(grid.cDiv).outerHeight() : 0,
hth = $(".ui-jqgrid-htable", p.gView).height();
//headers
if (p.toppager) {
top = top + $(grid.topDiv).outerHeight();
}
if (p.toolbar[0] === true) {
if (p.toolbar[1] !== "bottom") {
top = top + $(grid.uDiv).outerHeight();
}
}
grid.fhDiv = $("");
grid.fbDiv = $("");
$(p.gView).append(grid.fhDiv);
var htbl = $(".ui-jqgrid-htable", p.gView).clone(true),
tHeadRows = htbl[0].tHead.rows;
// groupheader support - only if useColSpanstyle is false
if (p.groupHeader) {
// TODO: remove all th which corresponds non-frozen columns. One can identify there by id
// for example. Consider to use name attribute of th on column headers. It simplifies
// identifying of the columns.
$(tHeadRows[0].cells).filter(":gt(" + maxfrozen + ")").remove();
$(tHeadRows).filter(".jqg-third-row-header").each(function () {
$(this).children("th[id]")
.each(function () {
var id = $(this).attr("id"), colName;
if (id && id.substr(0, $t.id.length + 1) === $t.id + "_") {
colName = id.substr($t.id.length + 1);
if (p.iColByName[colName] > maxfrozen) {
$(this).remove();
}
}
});
});
var swapfroz = -1, fdel = -1, cs, rs;
// TODO: test carefully processing of hidden columns
$(tHeadRows).filter(".jqg-second-row-header").children("th").each(function () {
cs = parseInt($(this).attr("colspan") || 1, 10);
rs = parseInt($(this).attr("rowspan") || 1, 10);
if (rs > 1) {
swapfroz++;
fdel++;
} else if (cs) {
swapfroz = swapfroz + cs;
fdel++;
}
if (swapfroz === maxfrozen) {
return false;
}
});
if (swapfroz !== maxfrozen) {
fdel = maxfrozen;
}
$(tHeadRows).filter(".jqg-second-row-header,.ui-search-toolbar").each(function () {
$(this).children(":gt(" + fdel + ")").remove();
});
} else {
$(tHeadRows).each(function () {
$(this).children(":gt(" + maxfrozen + ")").remove();
});
}
// htable, bdiv and ftable uses table-layout:fixed; style
// to make it working one have to set ANY width value on table.
// The value of the width will be ignored, the sum of widths
// of the first column will be used as the width of tables
// and all columns will have the same width like the first row.
// We set below just width=1 of the tables.
$(htbl).width(1);
// resizing stuff
$(grid.fhDiv).append(htbl)
.scroll(function () {
// the fhDiv can be scrolled because of tab keyboard navigation
// we prevent horizontal scrolling of fhDiv
this.scrollLeft = 0;
});
if (p.footerrow) {
var hbd = $(".ui-jqgrid-bdiv", p.gView).height();
grid.fsDiv = $("");
$(p.gView).append(grid.fsDiv);
var ftbl = $(".ui-jqgrid-ftable", p.gView).clone(true);
$("tr", ftbl).each(function () {
$("td:gt(" + maxfrozen + ")", this).remove();
});
$(ftbl).width(1);
$(grid.fsDiv).append(ftbl);
}
// data stuff
//TODO support for setRowData
$(p.gView).append(grid.fbDiv);
$(grid.bDiv).scroll(function () {
$(grid.fbDiv).scrollTop($(this).scrollTop());
});
$(grid.fbDiv).on("mousewheel.setFrozenColumns DOMMouseScroll.setFrozenColumns", function (e) {
grid.bDiv.scrollTop += $.isFunction(o.mouseWheel) ?
o.mouseWheel.call($t, e) :
e.type === "mousewheel" ?
-e.originalEvent.wheelDelta / 10 :
e.originalEvent.detail * 6;
});
if (p.hoverrows === true) {
$(p.idSel).off("mouseover.jqGrid mouseout.jqGrid");
}
var safeHeightSet = function ($elem, newHeight) {
var height = $elem.height();
if (Math.abs(height - newHeight) >= 1 && newHeight > 0) {
$elem.height(newHeight);
height = $elem.height();
if (Math.abs(newHeight - height) >= 1) {
$elem.height(newHeight + Math.round((newHeight - height)));
}
}
},
safeWidthSet = function ($elem, newWidth) {
var width = $elem.width();
if (Math.abs(width - newWidth) >= 1) {
$elem.width(newWidth);
width = $elem.width();
if (Math.abs(newWidth - width) >= 1) {
$elem.width(newWidth + Math.round((newWidth - width)));
}
}
},
fixDiv = function ($hDiv, hDivBase, iRowStart, iRowEnd) {
var iRow, n, $frozenRows, $rows, $row, $frozenRow, posFrozenTop, height, newHeightFrozen, td,
posTop = $(hDivBase).position().top, frozenTableTop, tableTop, cells;
if ($hDiv != null && $hDiv.length > 0) {
$hDiv[0].scrollTop = hDivBase.scrollTop;
$hDiv.css(p.direction === "rtl" ?
{ top: posTop, right: 0 } :
{ top: posTop, left: 0 }
);
// first try with thead for the hdiv
$frozenRows = $hDiv.children("table").children("thead").children("tr");
$rows = $(hDivBase).children("div").children("table").children("thead").children("tr");
if ($rows.length === 0 && $hDiv.children("table").length > 0) {
// then use tbody for bdiv
$frozenRows = $($hDiv.children("table")[0].rows);
$rows = $($(hDivBase).children("div").children("table")[0].rows);
}
n = Math.min($frozenRows.length, $rows.length);
frozenTableTop = n > 0 ? $($frozenRows[0]).position().top : 0;
tableTop = n > 0 ? $($rows[0]).position().top : 0; // typically 0
if (iRowStart >= 0) { // negative iRowStart means no changing of the height of individual rows
if (iRowEnd >= 0) { // negative iRowEnd means all rows
n = Math.min(iRowEnd + 1, n);
}
for (iRow = iRowStart; iRow < n; iRow++) {
// but after that one have to verify all scenarios
$row = $($rows[iRow]);
if ($row.css("display") !== "none" && $row.is(":visible")) {
posTop = $row.position().top;
$frozenRow = $($frozenRows[iRow]);
posFrozenTop = $frozenRow.position().top;
height = $row.height();
if (p.groupHeader != null && p.groupHeader.useColSpanStyle) {
cells = $row[0].cells;
for (i = 0; i < cells.length; i++) { // maxfrozen
td = cells[i];
if (td != null && td.nodeName.toUpperCase() === "TH") {
height = Math.max(height, $(td).height());
}
}
}
newHeightFrozen = height + (posTop - tableTop) + (frozenTableTop - posFrozenTop);
safeHeightSet($frozenRow, newHeightFrozen);
}
}
}
safeHeightSet($hDiv, hDivBase.clientHeight);
}
},
/** @const */
resizeAll = {
resizeDiv: true,
resizedRows: {
iRowStart: 0,
iRowEnd: -1 // -1 means "till the end"
}
},
/** @const */
fullResize = {
header: resizeAll,
resizeFooter: true,
body: resizeAll
};
$self.on("jqGridAfterGridComplete.setFrozenColumns", function () {
$(p.idSel + "_frozen").remove();
$(grid.fbDiv).height(grid.hDiv.clientHeight);
// clone with data and events !!!
var $frozenBTable = $(this).clone(true),
frozenRows = $frozenBTable[0].rows,
rows = $self[0].rows;
$(frozenRows).filter("tr[role=row]").each(function () {
$(this.cells).filter("td[role=gridcell]:gt(" + maxfrozen + ")").remove();
/*if (this.id) {
$(this).attr("id", this.id + "_frozen");
}*/
});
grid.fbRows = frozenRows;
$frozenBTable.width(1).attr("id", p.id + "_frozen");
$frozenBTable.appendTo(grid.fbDiv);
if (p.hoverrows === true) {
var hoverRows = function (tr, method, additionalRows) {
$(tr)[method](hoverClasses);
$(additionalRows[tr.rowIndex])[method](hoverClasses);
};
$(frozenRows).filter(".jqgrow").hover(
function () {
hoverRows(this, "addClass", rows);
},
function () {
hoverRows(this, "removeClass", rows);
}
);
$(rows).filter(".jqgrow").hover(
function () {
hoverRows(this, "addClass", frozenRows);
},
function () {
hoverRows(this, "removeClass", frozenRows);
}
);
}
fixDiv(grid.fhDiv, grid.hDiv, 0, -1);
fixDiv(grid.fbDiv, grid.bDiv, 0, -1);
if (grid.sDiv) { fixDiv(grid.fsDiv, grid.sDiv, 0, -1); }
});
var myResize = function (resizeOptions) {
$(grid.fbDiv).scrollTop($(grid.bDiv).scrollTop());
// TODO: the width of all column headers can be changed
// so one should recalculate frozenWidth in other way.
if (resizeOptions.header.resizeDiv) {
fixDiv(grid.fhDiv, grid.hDiv, resizeOptions.header.resizedRows.iRowStart, resizeOptions.header.resizedRows.iRowEnd);
}
if (resizeOptions.body.resizeDiv) {
fixDiv(grid.fbDiv, grid.bDiv, resizeOptions.body.resizedRows.iRowStart, resizeOptions.body.resizedRows.iRowEnd);
}
if (resizeOptions.resizeFooter && grid.sDiv && resizeOptions.resizeFooter) {
fixDiv(grid.fsDiv, grid.sDiv, 0, -1);
}
var frozenWidth = grid.fhDiv[0].clientWidth;
if (resizeOptions.header.resizeDiv && grid.fhDiv != null && grid.fhDiv.length >= 1) {
safeHeightSet($(grid.fhDiv), grid.hDiv.clientHeight);
}
if (resizeOptions.body.resizeDiv && grid.fbDiv != null && grid.fbDiv.length > 0) {
safeWidthSet($(grid.fbDiv), frozenWidth);
}
if (resizeOptions.resizeFooter && grid.fsDiv != null && grid.fsDiv.length >= 0) {
safeWidthSet($(grid.fsDiv), frozenWidth);
}
};
$(p.gBox).on("resizestop.setFrozenColumns", function () {
setTimeout(function () {
myResize(fullResize);
}, 50);
});
$self.on("jqGridInlineEditRow.setFrozenColumns jqGridInlineAfterRestoreRow.setFrozenColumns jqGridInlineAfterSaveRow.setFrozenColumns jqGridAfterEditCell.setFrozenColumns jqGridAfterRestoreCell.setFrozenColumns jqGridAfterSaveCell.setFrozenColumns jqGridResizeStop.setFrozenColumns", function (e, rowid) {
// TODO: probably one should handle additional events like afterSetRow
// and remove jqGridInlineAfterSaveRow and jqGridInlineAfterRestoreRow
var iRow = $self.jqGrid("getInd", rowid);
myResize({
header: {
resizeDiv: false, // don't recalculate the position and the height of hDiv
resizedRows: {
iRowStart: -1, // -1 means don't recalculate heights or rows
iRowEnd: -1
}
},
resizeFooter: true, // recalculate the position and the height of sDiv
body: {
resizeDiv: true, // recalculate the position and the height of bDiv
resizedRows: {
// recalculate the height of only one row inside of bDiv
iRowStart: iRow,
iRowEnd: iRow
}
}
});
});
$self.on("jqGridResizeStop.setFrozenColumns", function () {
myResize(fullResize);
});
$self.on("jqGridResetFrozenHeights.setFrozenColumns", function (e, o) {
myResize(o || fullResize);
});
if (!grid.hDiv.loading) {
setTimeout(function () {
$self.triggerHandler("jqGridAfterGridComplete");
}, 0);
}
p.frozenColumns = true;
}
});
},
destroyFrozenColumns: function () {
return this.each(function () {
var $t = this, $self = $($t), grid = $t.grid, p = $t.p, tid = jqID(p.id);
if (!grid) { return; }
if (p.frozenColumns === true) {
$(grid.fhDiv).remove();
$(grid.fbDiv).off(".setFrozenColumns");
$(grid.fbDiv).remove();
grid.fhDiv = null;
grid.fbDiv = null;
grid.fbRows = null;
if (p.footerrow) {
$(grid.fsDiv).remove();
grid.fsDiv = null;
}
$self.off(".setFrozenColumns");
if (p.hoverrows === true) {
var ptr, hoverClasses = getGuiStyles.call($t, "states.hover");
$self.on("mouseover.jqGrid", function (e) {
ptr = $(e.target).closest("tr.jqgrow");
if ($(ptr).attr("class") !== "ui-subgrid") {
$(ptr).addClass(hoverClasses);
}
}).on("mouseout.jqGrid", function (e) {
ptr = $(e.target).closest("tr.jqgrow");
$(ptr).removeClass(hoverClasses);
});
}
p.frozenColumns = false;
if (p.sortable) {
var $colHeaderRow = $(grid.hDiv).find(".ui-jqgrid-htable .ui-jqgrid-labels");
$colHeaderRow.sortable("destroy");
$self.jqGrid("setGridParam", {
sortable: {
options: {
items: ">th:not(:has(#jqgh_" + tid + "_cb" + ",#jqgh_" + tid + "_rn" + ",#jqgh_" + tid + "_subgrid),:hidden)"
}
}
});
$self.jqGrid("sortableColumns", $colHeaderRow);
}
}
});
}
});
// end module grid.custom
}));