我怎样才能得到jqgrid冻结列工作与自动换行

我正在使用最新的jqgrid 4.3.1，我正在尝试使用冻结列。

问题是，我已经覆盖默认的CSS来支持自动换行（css解决scheme可以在这个问题中看到）在jqgrid，我认为这是冻结列不正确排列与正规列的原因。 冻结行的高度与网格其余部分的高度不一样。 这是一个截图..冻结的列在红色框中突出显示（注意：我划掉了它的内容不是一个公共站点：

无论如何，冻结的列与jqgrid中的单词包装单元格是一致的

注意：在尝试下面的Oleg的解决scheme后，它在Firefox中工作，但在IE8中，我看不到水平滚动条（请参阅图片）

火狐：

IE：（注意没有水平滚动条）

注意：

为了帮助回答Oleg的问题，这里是我的jqgrid安装程序的转储：

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

Answer 1

jqGrid中冻结列的实现是基于在标准网格上创build两个绝对位置的附加div。 如果所有列标题的高度和网格的主体的所有行相同，那么冻结的列工作正常，但是在高度可变的情况下（使用height: auto CSS），可以得到以下结果（请参阅第一个演示 ）：

我用黄色标记的第一个div叫fhDiv ，它包含删除最后一个非冻结列的列标题副本（ hDiv ）。 以同样的方式，我用红色标记的第二个div（命名为fbDiv包含删除最后一个非冻结列的格子体（ bDiv ）的副本。 你可以在这里阅读更多关于标准的网格元素。

在演示中，我在列表头中使用了字符换行，我在例子中描述了答案和单词换行。

fhDiv或fbDiv的每一行的高度将独立于非冻结列的高度计算。 所以行的高度可以根据需要减less。

这个问题很难提出完美的解决scheme，但似乎我find了足够的实用的方法。 这个想法是根据主潜水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和loadCompletecallback的方法。 在使用gridResize方法的情况下，需要在停止处理程序中包含额外的修复。

您可以在演示中看到我的build议， 该演示将第一个演示的结果修复为以下内容：

更新 ： 答案包含演示的更新版本： 这一个 。

Answer 2

所以这是将调整列的function。

 function updateSize(){ //getting all lines in two tables by they id var lines = $("tr", this), flines = $("tr", "#"+$(this).attr("id")+"_frozen" ); //setting in all frozen lines height equel to grid flines.each(function(i, item){ //i%2 check because of border collapse $(item).height( $(lines[i]).innerHeight() - (i%2?1:0) ); }); } 

CSS规则

 .ui-jqgrid tr.jqgrow td{ height: auto; white-space: normal; } 

和init

 jQuery("#gfrc1").jqGrid({ //options 'loadComplete': updateSize, 'resizeStop': updateSize }); //Frozen Columns init jQuery("#gfrc1").jqGrid('setFrozenColumns'); 

不好，但它的作品。 有一个错误的东西，当我试图设置setParams方法，上下文正在改变，所以更好地做到了在jqGrid的初始化。 如果你需要设置你的function，只需在你的函数中使用apply到updateSize方法并保存这个上下文。

另一件事是在高度和边界崩溃，我不知道如何解决这个问题更好:)

和静态数据的例子 。

Answer 3

假设这是您使用的CSS（从您的链接）：

 .ui-jqgrid tr.jqgrow td { white-space: normal !important; height:auto; vertical-align:text-top; padding-top:2px; } 

你应该能够摆脱滚动条（注意select器是.ui-jqgrid tr.jqgrow而不是.ui-jqgrid tr.jqgrow td ）：

 .ui-jqgrid tr.jqgrow { overflow: hidden; } 

height: auto; 是什么导致行更短。 尝试从您的CSS完全删除。 如果这不起作用，您可以将所有<td>元素设置为相同的高度，或者全部设置为auto （因为您没有发布代码，所以都未经testing）。

Answer 4

尝试这个：

 qgrid tr.jqgrow td { white-space: nowrap !important; } 

Answer 5

我不能让奥列格的解决scheme工作，但我做了一些基于他为我工作的工作。 不知道我是否错过了一些东西，但是因为这对我有用，我以为我会分享：

我也必须添加一行到我的CSS文件

 .frozen-div{overflow:hidden;} var fixPositionsOfFrozenDivs = function () { var originalRowHeightArray = new Array(); var gridId = $(this).attr("id"); $("#" + gridId).find("tr").each(function () { originalRowHeightArray.push($(this).find("td").first().height() + 1); }); $rows = $('>div>table.ui-jqgrid-btable>tbody>tr', this.grid.bDiv); $rows.each(function (i) { var rowHight = $($rows[i]).height(), rowHightFrozen = $(this).height(); $(this).height(originalRowHeightArray[i] + "px"); }); }; 

Answer 6

我已经看过，得到为什么会出现这个问题。

当冻结列实际上显示有一些表的重复，但只有冻结的山坳，如果你设置空白正常，并在网格中的某处出现不等于高度列在非冻结区域，它开始在高度上的错位。

重复表的做不重新计算js中的表的params，所以有一些问题，如果你需要这个css属性比你应该设置gridComplete和resizeStop事件（或任何其他人会改变列的宽度）像这样的function：

 function onChangeGrid(){ var frozen = $("#grid_frozen tr", this), rows = $("#grid tr", this); frozen.each(function(i, item){ var fEl = $(item), h = $(rows[i]).height(); if( fEl.height() < h ){ fEl.height(h); } else { fEl.css("height", "auto"); } }); } $("#my_grid").jqGrid({ gridComplete: onChangeGrid, resizeStop: onChangeGrid }); 

这不是testetd我写在这里，但一些修复，应该工作正常，我没有jqGrid安装现在。

玩的开心 ：）

顺便说一句，如果你需要查看很多行，这是非常糟糕的修复，在github上设置问题任务