jquery - 如何让 jqGrid 卡住列与自动换行一起使用

Question

我正在使用最新的 jqgrid 4.3.1，并且我正在尝试使用卡住列。

问题是我已经覆盖了 jqGrid 中的默认 CSS 以支持自动换行(CSS 解决方案可以看到 in this question )，我认为这就是卡住列与常规列无法正确对齐的原因。卡住行的高度与网格其余部分的高度不同。这是一个屏幕截图..卡住的列在红色框中突出显示(鉴于它不是公共(public)站点，我划掉了内容:

有没有办法让卡住的列与 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。如果所有列标题和网格主体的所有行的高度都相同，则卡住列效果很好，但在高度可变的情况下(使用 height: auto CSS)，会得到以下结果(请参阅 the first demo ):

第一个 div，名为 fhDiv，我用黄色标记，其中包含列标题的副本 (hDiv)，其中最后一个非卡住列位于已删除。以同样的方式，第二个 div(名为 fbDiv)，我用红色标记，包含网格主体的副本(bDiv)，其中最后一个非卡住列被删除。您可以阅读here有关标准网格元素的更多信息。

在演示中，我在列标题中使用了字符换行，如 the answer 中所述。以及自动换行描述，例如 here .

fhDiv 或 fbDiv 每行的高度将独立于非卡住列的高度进行计算。因此行的高度可以根据需要减小。

很难提出问题的完美解决方案，但似乎我找到了足够好的实用方法。这个想法是根据主潜水 hDiv 中相应行的大小显式设置 fhDiv 和 fbDiv 中每一行的高度和bDiv。所以我扩展了 the answer 中描述的 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方法一需要在 stop 中包含额外的修复处理程序。

我的完整建议您可以在 the demo 上看到将第一个演示的结果修复为以下内容:

更新:The answer包含演示的更新版本:this one .