如何让jqgrid冻结列与word换行一起使用

Question

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

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

无论如何，冻结的列与jqgrid

中的自动换行单元格对齐

注意：在尝试下面的Oleg解决方案后，它适用于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中冻结列的实现基于创建两个额外的div，其绝对位置 over 标准网格。如果所有列标题的高度和网格主体的所有行都相同，则冻结列的效果很好，但如果高度可变（使用height: auto CSS），则会产生以下结果（请参阅{{3} }）：

第一个div，名为fhDiv，我用黄色标记，包含列标题的副本（hDiv），其中删除了最后一个非冻结列。以同样的方式，我用红色标记的第二个div（名为fbDiv）包含网格体的副本（bDiv），其中删除了最后一个非冻结列。您可以阅读the first demo有关标准网格元素的更多信息。

在演示中，我在here中描述的列标题中使用了字符包装，并在例如the answer中描述了自动换行。

fhDiv或fbDiv的每一行的高度将独立于非冻结列的高度进行计算。因此，行的高度可以根据需要减少。

很难提出问题的完美解决方案，但似乎我找到了足够实用的方法。我们的想法是根据主要潜水fhDiv和fbDiv中相应行的大小，明确设置hDiv和bDiv中每一行的高度。因此，我将here中描述的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回调中调用了该方法。如果使用the answer方法，则需要在gridResize处理程序中包含其他修补程序。

我可以在stop上看到完整的建议，将第一个演示的结果修复为以下内容：

更新：the demo包含演示版的更新版本：The answer。

Answer 2

所以这是调整列大小的函数。

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的init上做到这一点。如果您需要设置功能，只需在函数中使用apply to updateSize方法并保存此上下文。

另一件事是高度和边界崩溃，我真的不知道如何更好地解决这个问题：）

example包含静态数据。

Answer 3

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

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

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

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

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

Answer 4

试试这个：

qgrid tr.jqgrow td {

white-space: nowrap !important;

}

Answer 5

我无法让Oleg的解决方案起作用，但我根据他的工作做了一些适合我的工作。不确定我是否错过了什么，但由于这对我有用，我以为我会分享：

我还必须在我的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

我看了看它，然后知道为什么会出现这个问题。

当实际显示冻结列时，会有一些表格重复，但只有冻结的cols，如果你将white-space设置为normal，并且网格中的某个地方看起来不等于未冻结区域中的高度列，则它的高度开始不匹配。

重复执行的表不会重新计算js中的表的参数，因此存在一些问题，如果您需要此css属性，则应将gridComplete和resizeStop事件（或任何其他将更改cols宽度的事件）设置为功能如下：

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

这不是我在这里写的测试，但有些修复，应该可以正常工作，我现在没有设置jqGrid。

玩得开心：）

顺便说一下，如果你需要查看很多行，那就太糟糕了，在github上设置问题任务会很好