jquery - 如何在免费的jqgrid中使用主体水平滚动条-6ren

jquery - 如何在免费的jqgrid中使用主体水平滚动条

转载作者：太空宇宙更新时间：2023-11-04 11:56:11

github 的 Jqgrid 允许使用浏览器主体元素水平滚动条，如果它的属性

        autowidth: true,
        shrinkToFit: false,

被使用。

要重现，请在 chrome 中打开下面的页面(根据 How to remove free jqgrid own horizontal scrollbar if autowidth:true is used 中的示例创建)。

Body 元素水平滚动条不可用:它不允许滚动到最右边的列。

如何解决才能使浏览器主体滚动条正常使用，jqgrid自带的水平滚动条不出现？

我试图删除

if ( window.innerWidth > document.documentElement.clientWidth) {
  $grid.jqGrid("setGridWidth",
        $grid.jqGrid("getGridParam", "width") -
        (window.innerWidth - document.documentElement.clientWidth));
}

但问题依然存在。

如果网格被包裹到<div id="outerDiv" style="margin:5px;">水平滚动条仅在网格大小调整为最小宽度并返回最大宽度后出现。但是，它仍然不允许滚动到最右边的列。

<!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>https://stackoverflow.com/q/30199868/315935</title>
    <meta name="author" content="Oleg Kiriljuk">
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/redmond/jquery-ui.css">
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="http://rawgit.com/free-jqgrid/jqGrid/master/css/ui.jqgrid.css">
    <link rel="stylesheet" href="http://cdn.jsdelivr.net/free-jqgrid/4.8.0/plugins/ui.multiselect.css">
    <style>

        .ui-jqgrid .ui-pg-table .ui-pg-button.ui-state-active { margin: 1px; font-weight: normal; }


div > span.ui-pg-button-icon-over-text.fa {
    font-size: 32px;
}

.ui-jqgrid > .ui-jqgrid-pager .navtable,
.ui-jqgrid > .ui-jqgrid-view > .ui-jqgrid-toppager .navtable {
    font-size: 13px;
}

.ui-pg-button-text {
    margin: 4px !important;
}

.ui-jqgrid .ui-jqgrid-htable th {
    font-size: 1.2em;
}

.jqgrow .ui-jqgrid-actions > .ui-pg-div > span {
    font-size: 22px;
}

.ui-jqgrid td input[type=date], input[type=time], input[type=datetime-local], input[type=month] {
    line-height: normal;
}
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
    <script src="http://cdn.jsdelivr.net/free-jqgrid/4.8.0/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="http://cdn.jsdelivr.net/free-jqgrid/4.8.0/js/jquery.jqgrid.src.js"></script>
    <script src="http://rawgit.com/free-jqgrid/jqGrid/master/js/jquery.jqgrid.src.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",  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",  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" },

                { id: "110",  invdate: "2007-10-01", name: "test",   note: "note",   amount: "", tax: "", closed: true,  ship_via: "TN", total: "" },
                { id: "120",  invdate: "2007-10-02", name: "test2",  note: "note2",  amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
                { id: "130",  invdate: "2007-09-01", name: "test3",  note: "note3",  amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
                { id: "140",  invdate: "2007-10-04", name: "test4",  note: "note4",  amount: "200.00", tax: "10.00", closed: true,  ship_via: "TN", total: "210.00" },
                { id: "150",  invdate: "2007-10-31", name: "test5",  note: "note5",  amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
                { id: "160",  invdate: "2007-09-06", name: "test6",  note: "note6",  amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
                { id: "170",  invdate: "2007-10-04", name: "test7",  note: "note7",  amount: "200.00", tax: "10.00", closed: true,  ship_via: "TN", total: "210.00" },
                { id: "180",  invdate: "2007-10-03", name: "test8",  note: "note8",  amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
                { id: "190",  invdate: "2007-09-01", name: "test9",  note: "note9",  amount: "400.00", tax: "30.00", closed: false, ship_via: "TN", total: "430.00" },
                { id: "1100", invdate: "2007-09-08", name: "test10", note: "note10", amount: "500.00", tax: "30.00", closed: true,  ship_via: "TN", total: "530.00" },
                { id: "1110", invdate: "2007-09-08", name: "test11", note: "note11", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" },
                { id: "1120", invdate: "2007-09-10", name: "test12", note: "note12", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" },

                { id: "210",  invdate: "2007-10-01", name: "test",   note: "note",   amount: "", tax: "", closed: true,  ship_via: "TN", total: "" },
                { id: "220",  invdate: "2007-10-02", name: "test2",  note: "note2",  amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
                { id: "230",  invdate: "2007-09-01", name: "test3",  note: "note3",  amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
                { id: "240",  invdate: "2007-10-04", name: "test4",  note: "note4",  amount: "200.00", tax: "10.00", closed: true,  ship_via: "TN", total: "210.00" },
                { id: "250",  invdate: "2007-10-31", name: "test5",  note: "note5",  amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
                { id: "260",  invdate: "2007-09-06", name: "test6",  note: "note6",  amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
                { id: "270",  invdate: "2007-10-04", name: "test7",  note: "note7",  amount: "200.00", tax: "10.00", closed: true,  ship_via: "TN", total: "210.00" },
                { id: "280",  invdate: "2007-10-03", name: "test8",  note: "note8",  amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
                { id: "290",  invdate: "2007-09-01", name: "test9",  note: "note9",  amount: "400.00", tax: "30.00", closed: false, ship_via: "TN", total: "430.00" },
                { id: "2100", invdate: "2007-09-08", name: "test10", note: "note10", amount: "500.00", tax: "30.00", closed: true,  ship_via: "TN", total: "530.00" },
                { id: "2110", invdate: "2007-09-08", name: "test11", note: "note11", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" },
                { id: "2120", invdate: "2007-09-10", name: "test12", note: "note12", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" }

            ],
            $grid = $("#grid"),
            initDateEdit = function (elem) {
                $(elem).datepicker({
                    dateFormat: "dd-M-yy",
                    autoSize: true,
                    changeYear: true,
                    changeMonth: true,
                    showButtonPanel: true,
                    showWeek: true
                });
            },
            initDateSearch = function (elem) {
                setTimeout(function () {
                    initDateEdit(elem);
                }, 100);
            };

        $grid.jqGrid({
            data: mydata,
            colNames: ["", "Client", "Date", "Amount", "Tax", "Total", "Closed", "Shipped via", "Notes"],
            colModel: [
                { name: "act", template: "actions", width: 66 },
                { name: "name", align: "center", width: 92, editrules: {required: true} },
                { name: "invdate", width: 1172, 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: 1156, template: "number", hidden: true },
                { name: "tax", width: 1135, template: "number", autoResizableMinColSize: 40, hidden: true },
                { name: "total", width: 1143, template: "number", hidden: true },
                { name: "closed", width: 1149, template: "booleanCheckboxFa" },
                { name: "ship_via", width: 1176, 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: 1143, edittype: "textarea", sortable: false }
            ],
            cmTemplate: { editable: true, autoResizable: true },
            iconSet: "fontAwesome",
            rowNum: 100,
            autowidth: true,
            shrinkToFit: false,

            rowList: [5, 10, 20, "10000:All"],
            toppager: true,
            rownumbers: true,
            sortname: "invdate",
            sortorder: "desc",
            navOptions: {
                position: "center",
                addtext: "Add",
                edittext: "Edit",
                deltext: "Delete",
                searchtext: "Search",
                refreshtext: "Reload",
                viewtext: "View",
                savetext: "Save",
                canceltext: "Cancel",
                iconsOverText: true
            },
            caption: "Demonstration how to make full width navigator bar"
        }).jqGrid("navGrid", {view: true})
        .jqGrid("inlineNav")
        //.jqGrid("filterToolbar")
        .jqGrid("gridResize");

        var autoedit = true;
        $grid.jqGrid("navButtonAdd", "#grid_toppager", {
            buttonicon: "fa-star",
            caption: "Toggle",
            id: "AutoEdit",
            title: "Toggle autoedit",
            onClickButton: function (options, e) {
                var $me = $(e.currentTarget);
                $me.toggleClass("ui-state-active");
                autoedit = $me.hasClass("ui-state-active");
                $me.attr("aria-pressed", autoedit ? "true" : "false");
            }
        });

var i;
for (i=0; i<30; i++) {
        $grid.jqGrid("navButtonAdd", "#grid_toppager", {
            buttonicon: "fa-star",
            caption: "Toggle"+i,
            id: "AutoEdit2"+i,
            title: "Toggle autoedit"
        });
}



        $("#grid_toppager")
            .find(".ui-pg-button")
            .each(function (i) {
                $(this).attr({
                    tabindex: String(i),
                    role: "button"
                });
            });
        //$("#AutoEdit").attr("role", "button");
        if (autoedit) {
            $("#AutoEdit").click();
        }
        $grid.jqGrid("navButtonAdd", "#grid_toppager", {
            buttonicon: "fa-table",
            caption: "Columns",
            title: "Choose columns",
            onClickButton: function (options, e) {
                $(this).jqGrid("columnChooser");
            }
        });
        $("#grid_toppager_left").hide();
        $("#grid_toppager_right").hide();
        $("#grid_toppager_center").attr("colspan", "2");
        $("#grid_toppager_center").css({width: "", "text-align": "left", "white-space": ""});
        $("#grid_toppager_center").find(">.navtable").append(
            $("#grid_toppager_center").find(">table.ui-pg-table")
        );
        $("#grid_toppager_center").find(">.navtable").children().each(function() {
            $(this).css("float", "left");
        });

        $grid.bind("jqGridAfterGridComplete", function () {
            var p = $(this).jqGrid("getGridParam"), $toppager = $(p.toppager);
            $toppager.find(".navtable").css("width", "");
        });

        if (window.innerWidth > document.documentElement.clientWidth) {
            $grid.jqGrid("setGridWidth",
                $grid.jqGrid("getGridParam", "width") -
                (window.innerWidth - document.documentElement.clientWidth));
        }
    });
    //]]>
    </script>
</head>
<body>
        <table id="grid"></table>
</body>
</html>

最佳答案

我不确定我是否理解您使用的所有选项的目标。在我看来，您需要删除 autowidth: true 选项。参见 the demo .

关于jquery - 如何在免费的jqgrid中使用主体水平滚动条，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30217324/

文章推荐： java - 如何使用 Java 在 Excel 文件中存储 BigDecimal

文章推荐： linux - 如何将 "-fstack-protector-all"添加到 makefile？

javascript - 阻止 body 滚动，但阻止触摸设备上的任何父 div 滚动
如果附加了 'not-scroll' 类，我希望我的 body 不滚动，否则它应该正常工作。我已经搜索这个问题两天了，但找不到任何适合我的解决方案。我想要的是向 body 添加一个 class，并
iOS Safari - 滚动 iFrame 导致下面的 div 滚动
我发现似乎是 iOS Safari 中的错误(我正在 iOS 8 上进行测试)。当绝对定位的 iFrame 漂浮在一段可滚动内容上方时，滚动 iFrame 也会滚动下面的内容。以下 HTML (ava
javascript - 如何启用 Safari 滚动 SVG(滚动 div 中的对象标签)？
我有以下代码来显示一系列投资组合图片，这些图片以 SVG 格式存储在滚动 div 中: 在 Safari 中滚动使用两根手指或鼠标滚轮当光标位于 SVG 之一上时不起作用。该页
Javascript 滚动
我想用 javascript 做的是: 一旦你向下滚动页面，将#sidebar-box-fixed 的位置从 position: relative; 更改为定位:固定；。改回position:rela
Elasticsearch 滚动
我对 Elasticsearch 的滚动功能有点困惑。在 elasticsearch 中，每当用户在结果集上滚动时，是否可以每次调用搜索 API？来自文档 "search_type" => "scan
Javascript 滚动
我试图做到这一点，以便当我向上或向下滚动页面时，它会运行不同的相应功能。我发现了一个类似的问题here但我已经尝试了他们的答案并且没有运气。注意:此页面没有正常显示的滚动条。没有地方可以滚动。 bo
gtk - 滚动 GtkDrawingArea
(C语言，GTK库) 在我的表单上，我有一个 GtkDrawingArea 小部件，我在上面使用 Cairo 绘制 GdkPixbufs(从文件加载)。我想要完成的是能够在窗口大小保持固定的情况下使用
SwiftUI 滚动/列表滚动事件
最近我一直在尝试创建一个拉到(刷新，加载更多)swiftUI ScrollView !!，灵感来自 https://cocoapods.org/pods/SwiftPullToRefresh 我正在努
jquery - 拖放 + 滚动
我正在开发一个应用程序，其中有两个带有可放置区域的列表和一个带有可拖动项目的侧面菜单。当我滚动屏幕时，项目的位置困惑。我试图在谷歌上寻找一些东西，最后得到了这个问题:jQuery draggabl
iphone - UIWebView 滚动
我在 UIWebView 中加载了一个 HTML 表单，而我的 UIWebView 恰好从 View 的中间开始并扩展。我必须锁定此 webView 不滚动并将其放在 ScrollView 之上以允许
javascript - 每个元素上的淡入淡出 - 滚动
如何在每个元素而不是整个元素上应用淡入淡出(与其高度相比)？ HTML: CSS: * { padding: 0; margin: 0; box-sizing: border
flutter - 滚动 PageView
我想使用带有垂直轴的 PageView 并使用鼠标滚动在页面之间移动，但是当我使用鼠标滚动时页面不滚动...仅页面单击并向上/向下滑动时滚动。有什么办法吗？我想保留属性 pageSnapping:
java - JTextField 滚动
我制作这个程序是为了好玩，但我被卡住了，因为程序在屏幕外运行。如何在不完全更改代码的情况下实现滚动条。 public static void main(String args[]) throws IO
flutter - 滚动 PageView
我想使用带有垂直轴的 PageView 并使用鼠标滚动在页面之间移动，但是当我使用鼠标滚动时页面不滚动...仅页面单击并向上/向下滑动时滚动。有什么办法吗？我想保留属性 pageSnapping:
java - 滚动()和添加()
很难说出这里问的是什么。这个问题是含糊的、模糊的、不完整的、过于宽泛的或修辞性的，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开它，visit the help center 。已关
jquery - 滚动/跟随侧边栏帮助
使用 jquery 技术从 css-tricks.com 获得滚动/跟随侧边栏，如果您不知道我在说什么，这里是代码: $(function() { var $sidebar = $
Jquery-手机滑动菜单面板+滚动
我是 jQuery Mobile 新手。我需要向我的应用程序添加 Facebook 滑动面板功能。我经历了 sliding menu panel ，它工作正常，但我在菜单面板中的内容超出了窗口大小，
javascript - 如何在js或jQuery中检测ctrl +滚动？
有没有办法在 js 或 jQuery 或任何其他工具中检测 ctrl + 滚动。我正在尝试执行一些动态布局代码，我需要检测不同分辨率下的屏幕宽度，我通过使用 setTimeout() 的计时器实现了这
jquery 滚动 + 可拖动项目
我有一部分html代码:
c# - 滚动 RichTextBox
我想控制 RichTextBox 滚动，但在控件中找不到任何方法来执行此操作。这样做的原因是我希望当鼠标光标位于 RichTextBox 控件上时鼠标滚轮滚动有效(它没有事件焦点:鼠标滚轮事件由表单

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

jquery - 如何在免费的jqgrid中使用主体水平滚动条