Javascript 冻结跨行列

我在jqgrid中使用行跨越，如以下答案所述：

我遇到的问题是，一旦我将列上的行跨度设置为freezed=true，显示的覆盖将丢失行跨度，因此覆盖不会覆盖整个表，并且行与正确的数据不对齐。有没有办法确保显示的冻结列使用与原始表相同的行跨度

我创建了一个示例：

因为这里需要一些代码：

$(function () {
    'use strict';
    var mydata = [
            { id: "1", country: "USA", state: "Texas",      city: "Houston",       attraction: "NASA",               zip: "77058", attr: {country: {rowspan: "5"},    state: {rowspan: "5"}} },
            { id: "2", country: "USA", state: "Texas",      city: "Austin",        attraction: "6th street",         zip: "78704", attr: {country: {display: "none"}, state: {display: "none"}} },
            { id: "3", country: "USA", state: "Texas",      city: "Arlinton",      attraction: "Cowboys Stadium",    zip: "76011", attr: {country: {display: "none"}, state: {display: "none"}} },
            { id: "4", country: "USA", state: "Texas",      city: "Plano",         attraction: "XYZ place",          zip: "54643", attr: {country: {display: "none"}, state: {display: "none"}} },
            { id: "5", country: "USA", state: "Texas",      city: "Dallas",        attraction: "Reunion tower",      zip: "12323", attr: {country: {display: "none"}, state: {display: "none"}} },
            { id: "6", country: "USA", state: "California", city: "Los Angeles",   attraction: "Hollywood",          zip: "65456", attr: {country: {rowspan: "4"},    state: {rowspan: "4"}} },
            { id: "7", country: "USA", state: "California", city: "San Francisco", attraction: "Golden Gate bridge", zip: "94129", attr: {country: {display: "none"}, state: {display: "none"}} },
            { id: "8", country: "USA", state: "California", city: "San Diego",     attraction: "See world",          zip: "56653", attr: {country: {display: "none"}, state: {display: "none"}} },
            { id: "9", country: "USA", state: "California", city: "Anaheim",       attraction: "Disneyworld",        zip: "92802", attr: {country: {display: "none"}, state: {display: "none"}} }
        ],
        arrtSetting = function (rowId, val, rawObject, cm) {
            var attr = rawObject.attr[cm.name], result;
            if (attr.rowspan) {
                result = ' rowspan=' + '"' + attr.rowspan + '"';
            } else if (attr.display) {
                result = ' style="display:' + attr.display + '"';
            }
            return result;
        };

    $("#list").jqGrid({
        datatype: 'local',
        data: mydata,
        colNames: ['Country', 'State', 'City', 'Attraction', 'Zip code'],
        colModel: [
            { name: 'country', width: 70, align: 'center', cellattr: arrtSetting, frozen: true },
            { name: 'state', width: 80, align: 'center', cellattr: arrtSetting, frozen: true },
            { name: 'city', width: 90 },
            { name: 'attraction', width: 120 },
            { name: 'zip', index: 'tax', width: 60, align: 'right' }
        ],
        cmTemplate: {sortable: false},
        width: 250,
    shrinkToFit: false,
        rowNum: 100,
        //rowList: [5, 10, 20],
        //pager: '#pager',
        gridview: true,
        hoverrows: false,
        autoencode: true,
        ignoreCase: true,
        viewrecords: true,
        height: '100%',
        caption: 'Grid with rowSpan attributes',
        beforeSelectRow: function () {
            return false;
        }
    });

    $("#list").jqGrid('setFrozenColumns');
    //$("#pager_left").hide();
});

---

您的演示使用了旧的jqGrid 4.6，它具有固定高度的冻结列行。jqGrid的免费jqGrid fork（基于jqGrid 4.7）是我从去年年底开始开发的。4.9版包括对冻结列的许多修改。现在，冻结列的每一行的高度将根据主数据对应行的高度分别设置，因此您描述的问题将自动得到解决

在演示中对URL进行简单修改，您可以使用（请参阅）以下内容

解决你的问题。请参见修改后的演示：