JQGrid - 垂直滚动不适用于冻结列答案

【问题标题】：JQGrid - Vertical scroll not working on Frozen columnsJQGrid - 垂直滚动不适用于冻结列
【发布时间】：2017-01-27 10:02:46
【问题描述】：

我有一个超过 20 列的 JQGrid。所以我将前 3 列保持为冻结状态，并且网格没有分页。因此，根据要求，我们添加了主 div 的高度，以便用户可以向上/向下滚动。现在，在添加冻结列后，滚动出现在网格的右侧，并且当鼠标滚动到任何未冻结的列上时它会起作用。但是当我尝试将鼠标滚动到冻结的列上时，滚动不起作用。将不胜感激任何线索/解决方案。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>http://stackoverflow.com/a/20165553/315935</title>
    <meta name="author" content="Oleg Kiriljuk">
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/redmond/jquery-ui.css">
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://rawgit.com/free-jqgrid/jqGrid/master/css/ui.jqgrid.css">
    <style>
        html, body { font-size: 75%; }
        .ui-datepicker select.ui-datepicker-year,
        .ui-datepicker select.ui-datepicker-month {
            color: black
        }
        .ui-jqgrid >.ui-jqgrid-pager .navtable,
        .ui-jqgrid >.ui-jqgrid-view > .ui-jqgrid-toppager .navtable {
            font-size: 16px;
        }
        .ui-pg-table .ui-pg-button:hover {
            border: 0 none;
            background: #b6dbf7 url("https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/redmond/images/ui-bg_glass_75_d0e5f5_1x400.png") 50% 50% repeat-x;
        }
        .ui-pg-table .ui-pg-table .ui-pg-button:hover {
            font-weight: normal;
            padding: 0;
            margin: 3px;
        }
        .ui-jqgrid .ui-pg-table.navtable .ui-pg-button:hover {
            font-weight: normal;
            padding: 0;
            margin: 2px;
        }
        .ui-jqgrid .jqgrow  .ui-jqgrid-actions > .ui-pg-div:hover {
            margin: 0 1px;
            border: 0 none;
            background: #b6dbf7 url("https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/redmond/images/ui-bg_glass_75_d0e5f5_1x400.png") 50% 50% repeat-x;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.js"></script>
    <!--<script src="https://rawgit.com/free-jqgrid/jqGrid/master/js/i18n/grid.locale-en.js"></script>-->
    <script>
        $.jgrid = $.jgrid || {};
        $.jgrid.no_legacy_api = true;
        $.jgrid.useJSON = true;
    </script>
    <!--<script src="../jqGrid/js/jquery.jqGrid.src.js"></script>-->
    <script src="https://rawgit.com/free-jqgrid/jqGrid/master/js/jquery.jqgrid.src.js"></script>
    <!--<script src="http://www.ok-soft-gmbh.com/jqGrid/OK/plugins/jQuery.jqGrid.fontAwesome4.js"></script>
    <script src="http://www.ok-soft-gmbh.com/jqGrid/OK/plugins/jQuery.jqGrid.checkboxFontAwesome4.js"></script>-->
    <script>
    //<![CDATA[
        /*global $ */
        /*jslint browser: true */
        $(function () {
            "use strict";
            var mydata = [
                    { id: "10",  invdate: "2007-10-01", name: "test",   note: "note",   amount: "", tax: "", closed: true,  ship_via: "TN", total: "" },
                    { id: "20",  invdate: "2007-10-02", name: "test2",  note: "note2",  amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
                    { id: "30",  invdate: "2007-09-01", name: "test3",  note: "note3",  amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
                    { id: "40",  invdate: "2007-10-04", name: "test4 test4 test4",  note: "note4",  amount: "200.00", tax: "10.00", closed: true,  ship_via: "TN", total: "210.00" },
                    { id: "50",  invdate: "2007-10-31", name: "test5",  note: "note5",  amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
                    { id: "60",  invdate: "2007-09-06", name: "test6",  note: "note6",  amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
                    { id: "70",  invdate: "2007-10-04", name: "test7",  note: "note7",  amount: "200.00", tax: "10.00", closed: true,  ship_via: "TN", total: "210.00" },
                    { id: "80",  invdate: "2007-10-03", name: "test8",  note: "note8",  amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
                    { id: "90",  invdate: "2007-09-01", name: "test9 test9 test9 test9 test9",  note: "note9",  amount: "400.00", tax: "30.00", closed: false, ship_via: "TN", total: "430.00" },
                    { id: "100", invdate: "2007-09-08", name: "test10", note: "note10", amount: "500.00", tax: "30.00", closed: true,  ship_via: "TN", total: "530.00" },
                    { id: "110", invdate: "2007-09-08", name: "test11", note: "note11", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" },
                    { id: "120", invdate: "2007-09-10", name: "test12", note: "note12", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" }
                ],
                $grid = $("#list"),
                initDateEdit = function (elem) {
                    $(elem).datepicker({
                        dateFormat: "dd-M-yy",
                        autoSize: true,
                        changeYear: true,
                        changeMonth: true,
                        showButtonPanel: true,
                        showWeek: true
                    });
                },
                initDateSearch = function (elem) {
                    setTimeout(function () {
                        $(elem).datepicker({
                            dateFormat: "dd-M-yy",
                            autoSize: true,
                            changeYear: true,
                            changeMonth: true,
                            showWeek: true,
                            showButtonPanel: true
                        });
                    }, 100);
                },
                integerTemplate = {formatter: "integer", align: "right", sorttype: "integer",
                    editrules: {number: true, required: true},
                    searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge"] }},
                numberTemplate = {formatter: "number", align: "right", sorttype: "number",
                    editrules: {number: true, required: true},
                    searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge"] }};

            $.extend(true, $.jgrid.icons, {
                common: "fa fa-lg"
            });

            $grid.jqGrid({
                data: mydata,
                colNames: ["", "Client", "Date", "Amount", "Tax", "Total", "Closed", "Shipped via", "Notes"],
                colModel: [
                    { name: "act", template: "actions", width: 60 },
                    { name: "name", align: "center", width: 65, editrules: {required: true} },
                    { name: "invdate", width: 80, align: "center", sorttype: "date", frozen: true,
                        formatter: "date", formatoptions: { newformat: "d-M-Y", reformatAfterEdit: true }, datefmt: "d-M-Y",
                        editoptions: { dataInit: initDateEdit },
                        searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge"], dataInit: initDateSearch } },
                    { name: "amount", width: 75, template: "number" },
                    { name: "tax", width: 52, template: "number", autoResizableMinColSize: 40 },
                    { name: "total", width: 60, template: "number" },
                    {name: "closed", width: 70, align: "center", formatter: "checkboxFontAwesome4", //formatter: "checkbox",
                        edittype: "checkbox", editoptions: {value: "Yes:No", defaultValue: "Yes"},
                        stype: "select", searchoptions: { sopt: ["eq", "ne"], value: ":Any;true:Yes;false:No" } },
                    {name: "ship_via", width: 105, align: "center", formatter: "select",
                        edittype: "select", editoptions: { value: "FE:FedEx;TN:TNT;IN:Intim", defaultValue: "IN" },
                        stype: "select", searchoptions: { sopt: ["eq", "ne"], value: ":Any;FE:FedEx;TN:TNT;IN:IN" } },
                    { name: "note", width: 60, edittype: "textarea" }
                ],
                cmTemplate: { editable: true, autoResizable: true },
                rowNum: 10,
                autoResizing: { compact: true },
                resizeStop: function () {
                    var newWidth = this.grid.newWidth, maxIterations = 3, i;
                    for (i = 0; i < maxIterations; i++) {
                        // resize without shrinking
                        $(this).jqGrid("setGridWidth", newWidth + i, false);
                        if (this.grid.bDiv.offsetHeight <= this.grid.bDiv.clientHeight) {
                            break;
                        }
                    }
                },
                rowList: [5, 10, 20],
                pager: "#pager", // "#pa\\.ger" or "pa.ger"
                //pginput: false,
                //pgbuttons: false,
                viewrecords: true,
                //gridview: false,
                iconSet: "fontAwesome",
                toppager: true,
                toolbar: [true, "both"],
                footerrow: true,
                multiselect: true,
                rownumbers: true,
                //direction: "rtl",
                //recordpos: "left",
                //cellEdit: true,
                //beforeSaveCell: function (rowid, name, value, iRow, iCol) {
                //    var cm = this.p.colModel[iCol];
                //    return cm.formatter !== "date" ? value : $.unformat.date.call(this, value, cm);
                //},
                sortname: "invdate",
                sortorder: "desc",
                resizeDblClick: function (iCol, cm) {
                    //alert("DblClick on the column resizer of the column \"" + cm.name + "\"");
                    //autoResizeColumn.call(this, iCol);
                },
                onSelectRow: function (rowid, stat, e) {
                    return;
                },
                inlineEdit: {
                    keys: true
                },
                //viewsortcols: [true, "horizontal", false], // [true, "vertical", false] or [true, "vertical", false]
                //subGrid: true,
                subGridRowExpanded: function (subgridDivId, rowId) {
                    $("#" + $.jgrid.jqID(subgridDivId)).html("<em>simple subgrid data for the row with id=" + rowId + "</em>");
                },
                caption: "Demonstration of the usage sortable:true and frozen formatter: \"actions\"",
                width: 500,
                sortable: true,
                height: 200,
                shrinkToFit: false,
                autoresizeOnLoad: true
            });
            //$grid.jqGrid("setFrozenColumns");
            $grid.jqGrid("navGrid", "#pager", {view: true, cloneToTop: true/*, position: "right"*/})
            .jqGrid("inlineNav", "#list_toppager")
            .jqGrid("inlineNav", "#pager")
            .jqGrid("filterToolbar");
            //$grid.jqGrid("destroyFrozenColumns");
            $grid.jqGrid("setFrozenColumns");
            //$grid.trigger("jqGridResetFrozenHeights");
            //$.jgrid.info_dialog($.jgrid.errors.errcap, "Test message", $.jgrid.edit.bClose);
            //$grid.jqGrid("sortableRows");
            //$("#outerDiv").show();
            //$grid.jqGrid("autoResizeAllColumns");
            $grid.jqGrid("gridResize"); // , {handles: "e, w", shrinkToFit: false}
            //var allData = $grid.jqGrid("getRowData");
            
            $(window).on("resize", function() {
                $("table.ui-jqgrid-btable").each(function () {
                    $(this).trigger("jqGridResetFrozenHeights");
                });
            });
        });
    //]]>
    </script>
</head>
<body>
    <div id="outerDiv" style="margin:5px;">
        <table id="list"></table>
        <div id="pager"></div>
    </div>
</body>
</html>

【问题讨论】：

如果不发布您尝试过的 jqGrid 版本以及 jqGrid 的哪个分支（free jqGrid、商业版 Guriddo jqGrid JS 或旧版 jqGrid 提供演示，它会重现问题。如果存在错误，则需要修复它。
@Oleg，我使用的是 jqGrid 4.3.1。多年来，它再次成为生产中的现有应用程序。具有讽刺意味的是，我无法将其升级到最新版本。因此，寻找可以解决此问题的修复程序。谢谢！
jqGrid 的后续版本和免费的 jqGrid 中已经实现了很多错误修复。确切地说，我重写了冻结列的许多部分，以保持与旧版本的兼容性。无法将更改应用于旧版本 4.3.1。看看here。您可以看到自 4.3.1 版以来 jqGrid 代码中的提交次数超过了 2000 次。 retro 4.3.1（快5年了）已经死了。很久不支持了。该版本不会实施任何修复。
此外，我不建议您使用“虚拟滚动”（scroll: 1 和 scroll: true 都不推荐，尤其是与远程加载数据一起使用）。虚拟滚动有很多限制和缺点。简单的 local 分页是推荐的方式。网格中需要显示多少行和多少列？
@Oleg，我同意 4.3 已经很老了。但不幸的是，它就是这样。在这里我说的是垂直滚动（不是虚拟的）。甚至昨晚我也看到了一个存在同样问题的例子。trirand.com/blog/phpjqgrid/examples/functionality/frozen/…

标签： jquery jqgrid free-jqgrid

【解决方案1】：

如果我正确理解了问题，那么您需要在冻结列上使用鼠标滚轮。这样做，您可以在调用setFrozenColumns 之后的某处添加以下代码：

$($grid[0].grid.fbDiv).bind("mousewheel DOMMouseScroll", function (e) {
    $grid[0].grid.bDiv.scrollTop -= e.type === "mousewheel" ?
        e.originalEvent.wheelDelta / 10 :
        -e.originalEvent.detail * 6;
});

它应该可以工作，但我确信delta 的值的计算应该得到改进。我会考虑在 setFrozenColumns 的主代码中进行更改以自动执行相同的操作（在免费的 jqGrid 代码中）。

【讨论】：

你是救生员。它工作得很好。即使它在 4.3.1 和 IE 5（我的客户正在使用。实际上他们使用的是最新版本的 IE。但不确定他们为什么写 X-UA-Compatible" content="IE=5"）。如果更改到 IE-edge，然后所有 UI 的外观和感觉都发生了变化。所以没有人愿意将其升级到 Edge。但是您的解决方案效果很好。
@Sudhir：不客气！我简化了之前发布的代码。
@Sudhir：我将the changes 发布到free jqGrid 的主代码中。因此，我计划很快发布的下一个版本将在setFrozenColumns 中支持鼠标滚轮/DOMMouseScroll。更新到下一个版本后，您应该删除我的回答中描述的自定义事件处理程序。

【解决方案2】：

在您的页面上添加以下样式，这对我有用。

.frozen-bdiv {
    pointer-events: none;
}

【讨论】：