Question

我在jqgrid中使用行跨越，如以下答案中所述：Jqgrid - grouping row level data

我遇到的问题是，一旦我将列上的行跨度设置为冻结= 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();
});

Answer 1

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

您使用的演示中的URL的简单修改（请参阅the wiki）到以下

<link rel="stylesheet" href="//cdn.jsdelivr.net/free-jqgrid/4.9.0/css/ui.jqgrid.css">
<script src="//cdn.jsdelivr.net/free-jqgrid/4.9.0/js/i18n/grid.locale-en.js"></script>
<script src="//cdn.jsdelivr.net/free-jqgrid/4.9.0/js/jquery.jqgrid.min.js"></script>

解决您的问题。请参阅修改后的演示：http://jsfiddle.net/OlegKi/zmmpaaom/5/

用行跨越冻结列

1 个答案: