我如何才能使jqgrid冻结列与自动换行一起使用 [英] How can i get jqgrid frozen columns to work with word wrap on
问题描述
我正在使用最新的jqgrid 4.3.1，并且正在尝试使用冻结列.
问题是我已经覆盖了默认的CSS以支持自动换行(可以在
jqGrid中冻结列的实现基于在标准网格上方创建两个绝对位置为
的div的基础.如果所有列标题的高度和网格主体的所有行的高度都相同，则冻结的列会正常工作，但是如果高度可变(使用height: auto CSS)，则会得到以下结果(请参见此处阅读更多有关标准网格元素的信息.
在演示中，我在答案中描述的列标题中使用了字符换行，并为例如此处.
fhDiv或fbDiv的每一行的高度将独立于非冻结列的高度进行计算.因此行的高度可以根据需要减小.
很难提出完美解决问题的方法，但是看来我找到了足够好的实用方法.想法是根据主下潜hDiv和bDiv中相应行的大小来显式设置fhDiv和fbDiv中每一行的高度.因此，我将答案中描述的fixPositionsOfFrozenDivs函数的代码扩展到以下内容:
var fixPositionsOfFrozenDivs = function () {
var $rows;
if (typeof this.grid.fbDiv !== "undefined") {
$rows = $('>div>table.ui-jqgrid-btable>tbody>tr', this.grid.bDiv);
$('>table.ui-jqgrid-btable>tbody>tr', this.grid.fbDiv).each(function (i) {
var rowHight = $($rows[i]).height(), rowHightFrozen = $(this).height();
if ($(this).hasClass("jqgrow")) {
$(this).height(rowHight);
rowHightFrozen = $(this).height();
if (rowHight !== rowHightFrozen) {
$(this).height(rowHight + (rowHight - rowHightFrozen));
}
}
});
$(this.grid.fbDiv).height(this.grid.bDiv.clientHeight);
$(this.grid.fbDiv).css($(this.grid.bDiv).position());
}
if (typeof this.grid.fhDiv !== "undefined") {
$rows = $('>div>table.ui-jqgrid-htable>thead>tr', this.grid.hDiv);
$('>table.ui-jqgrid-htable>thead>tr', this.grid.fhDiv).each(function (i) {
var rowHight = $($rows[i]).height(), rowHightFrozen = $(this).height();
$(this).height(rowHight);
rowHightFrozen = $(this).height();
if (rowHight !== rowHightFrozen) {
$(this).height(rowHight + (rowHight - rowHightFrozen));
}
});
$(this.grid.fhDiv).height(this.grid.hDiv.clientHeight);
$(this.grid.fhDiv).css($(this.grid.hDiv).position());
}
};
我在resizeStop和loadComplete回调内部调用了该方法.如果使用 gridResize 方法，则需要包括以下一种方法停止处理程序内部的其他修复程序.
您可以在演示上看到的完整建议.将第一个演示的结果固定为以下内容:
更新:答案包含该演示的更新版本:in this question) in jqgrid and i think that is the reason that the frozen columns don't line up correctly with the regular columns. The heights of the frozen rows are not the same as teh heights of the rest of the grid. Here is a screenshot.. the frozen columns are highlighted in the red box (NOTE: i crossed out the content given its not a public site:
Is there anyway to have frozen columns line up with word wrapped cells in jqgrid
NOTE: after trying Oleg's solution below, it works in Firefox but in IE8 I don't see the horizontal scroll bar (see pic)
Firefox:
IE: (notice no horizontal scroll bar)
NOTE:
To help answer Oleg's question, here is a dump of my jqgrid Setup:
jQuery(gridSelector).jqGrid({
mtype: 'POST',
toppager: true,
url: siteRoot + controller + "/" + gridDataName + "?" + querystring,
datatype: "json",
colNames: names,
colModel: model,
shrinkToFit: false,
imgpath: siteRoot + "Scripts/jqGrid431/themes/steel/images",
rowNum: 20,
rowList: [10, 20, 50, 999],
altRows: true,
altclass: "altRow",
jsonReader: {
root: "Rows",
page: "Page",
total: "Total",
records: "Records",
repeatitems: false,
id: "Id"
},
search: true,
postData: (myfilter) ? { filters: JSON.stringify(myfilter)} : {},
//postData: { filters: JSON.stringify(myfilter) },
pager: pagerSelector,
height: "auto",
sortname: sortCol,
viewrecords: true,
sortorder: sortDirection,
beforeRequest: function () {
var grid = jQuery(gridSelector);
if (gridprefs && gridprefs.filter) {
grid.setPostDataItem('_search', true);
for (var prop in gridprefs.filter) {
var value = eval('gridprefs.filter.' + prop);
if ('' + value != '') {
grid.setPostDataItem(prop, value);
}
}
grid.setPostDataItem('sidx', gridprefs.scol);
grid.setPostDataItem('sord', gridprefs.sord);
grid.setPostDataItem('page', gridprefs.page);
grid.setPostDataItem('rows', gridprefs.rows);
grid.jqGrid('setGridParam', {
sortname: gridprefs.scol,
sortorder: gridprefs.sord,
page: gridprefs.page,
rowNum: gridprefs.rows
});
}
},
loadComplete: function () {
var newCapture = "", filters, rules, rule, op, i, iOp,
postData = jQuery(gridSelector).jqGrid("getGridParam", "postData"),
isFiltering = jQuery(gridSelector).jqGrid("getGridParam", "search");
if (isFiltering === true && typeof postData.filters !== "undefined") {
filters = $.parseJSON(postData.filters);
newCapture = "Filter: [";
rules = filters.rules;
for (i = 0; i < rules.length; i++) {
rule = rules[i];
op = rule.op; // the code name of the operation
iOp = $.inArray(op, arOps);
if (iOp >= 0 && typeof $.jgrid.search.odata[iOp] !== "undefined") {
op = $.jgrid.search.odata[iOp];
}
newCapture += rule.field + " " + op + " '" + rule.data + "'";
if (i + 1 !== rules.length) {
newCapture += ", ";
}
}
newCapture += "]";
}
jQuery(gridSelector).jqGrid("setCaption", newCapture);
fixPositionsOfFrozenDivs.call(this);
$(gridSelector).supersleight({ shim: siteRoot + 'Content/Images/shim.gif' });
if (gridprefs && gridprefs.filter) {
for (var prop in gridprefs.filter) {
$('#gs_' + prop).val(eval('gridprefs.filter.' + prop));
}
$(".ui-pg-selbox").val(gridprefs.rows);
$(".ui-pg-input").val(gridprefs.page);
}
gridprefs = {};
},
editurl: siteRoot + controller + "/Update" + appendRoute,
ondblClickRow: editable ?
function (rowid) {
jQuery(gridSelector).editGridRow(rowid, { width: 600 });
} :
function (rowid) { }
});
//$(gridSelector).jqGrid('navGrid', '#pager', { search: true, cloneToTop: true });
$(gridSelector).jqGrid('filterToolbar', { stringResult: true, searchOnEnter: true });
jQuery(gridSelector).jqGrid('bindKeys', {});
if (editable) {
jQuery(gridSelector).navGrid(pagerSelector,
{ cloneToTop: true, refresh: false
},
{ height: 380, width: 500, reloadAfterSubmit: true, closeAfterEdit: true, url: siteRoot + controller + "/Update", zIndex: 1100 },
{ height: 380, width: 500, reloadAfterSubmit: true, closeAfterAdd: true, url: siteRoot + controller + "/Add", zIndex: 1100 },
{ reloadAfterSubmit: true, url: siteRoot + controller + "/Delete" },
{ multipleSearch: true,
beforeShowSearch: function($form) {
$('#searchmodfbox_' + $(gridSelector)[0].id).width(560);
}
});
} else {
jQuery(gridSelector).navGrid(pagerSelector,
{ cloneToTop: true, refresh: false, add: false, edit: false, del: false },
{ }, { }, { }, { multipleSearch: true,
beforeShowSearch: function($form) {
$('#searchmodfbox_' + $(gridSelector)[0].id).width(560);
}
});
}
myAddButton(gridSelector, {
caption: "",
title: "Reload Grid",
buttonicon: 'ui-icon-refresh',
onClickButton: function () {
$(gridSelector).trigger("reloadGrid");
}
});
}
The implementation of frozen columns in jqGrid are based on creating of two additional divs with absolute position over the standard grid. If the height of all column headers and all rows of the grid's body are the same the frozen columns works good, but in case of variable height (usage of height: auto CSS) one have the following results (see the first demo):
The first div, so named fhDiv, which I marked with yellow color contains the copy of the column header (the hDiv) where the last non-frozen columns are removed. In the same way the second div, so named fbDiv, which I marked with red color contains the copy of the grid body (the bDiv) where the last non-frozen columns are removed. You can read here more about the standard grid elements.
In the demo I used character wrapping in the column headers which I described in the answer and the word wrapping described for example here.
The height of every row of the fhDiv or fbDiv will be calculated independent from the height of non-frozen columns. So the height of the rows can be less as required.
It is difficult to suggest perfect solution of the problem, but it seems that I found good enough pragmatical way. The idea is to set the height of every row from the fhDiv and fbDiv explicitly based on the size of the corresponding row in the main dives hDiv and bDiv. So I extended the code of fixPositionsOfFrozenDivs function described in the answer to the following:
var fixPositionsOfFrozenDivs = function () {
var $rows;
if (typeof this.grid.fbDiv !== "undefined") {
$rows = $('>div>table.ui-jqgrid-btable>tbody>tr', this.grid.bDiv);
$('>table.ui-jqgrid-btable>tbody>tr', this.grid.fbDiv).each(function (i) {
var rowHight = $($rows[i]).height(), rowHightFrozen = $(this).height();
if ($(this).hasClass("jqgrow")) {
$(this).height(rowHight);
rowHightFrozen = $(this).height();
if (rowHight !== rowHightFrozen) {
$(this).height(rowHight + (rowHight - rowHightFrozen));
}
}
});
$(this.grid.fbDiv).height(this.grid.bDiv.clientHeight);
$(this.grid.fbDiv).css($(this.grid.bDiv).position());
}
if (typeof this.grid.fhDiv !== "undefined") {
$rows = $('>div>table.ui-jqgrid-htable>thead>tr', this.grid.hDiv);
$('>table.ui-jqgrid-htable>thead>tr', this.grid.fhDiv).each(function (i) {
var rowHight = $($rows[i]).height(), rowHightFrozen = $(this).height();
$(this).height(rowHight);
rowHightFrozen = $(this).height();
if (rowHight !== rowHightFrozen) {
$(this).height(rowHight + (rowHight - rowHightFrozen));
}
});
$(this.grid.fhDiv).height(this.grid.hDiv.clientHeight);
$(this.grid.fhDiv).css($(this.grid.hDiv).position());
}
};
I called the method inside of resizeStop and loadComplete callbacks. In case of usage of gridResize method one need include additional fixes inside of stop handler.
The full my suggestions you can see on the demo which fixs the results from the first demo to the following:
UPDATED: The answer contains updated version of the demo: this one.
这篇关于我如何才能使jqgrid冻结列与自动换行一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
