如果使用autowidth：true，如何删除自由jqgrid自己的水平滚动条(How to remove free jqgrid own horizontal scrollbar if autowi

如果使用autowidth：true，如何删除自由jqgrid自己的水平滚动条(How to remove free jqgrid own horizontal scrollbar if autowidth:true is used)

使用jqGrid和autowidth选项中的设置将自由jqgrid宽度设置为占据至少整个窗口宽度。它是如何工作的？回答

autowidth: true, shrinkToFit: false,

顶层工具栏图标使用以下样式从答案中变大。

如果jqgrid中有很多行以便显示垂直滚动条，那么即使所有网格列都适合屏幕，这些设置也会导致水平滚动条出现在Chrome中。如何删除这个不受欢迎的水平滚动条？仅当列宽的总和大于窗口宽度时才会出现。

要重现，请在Chrome下面打开页面，以便垂直滚动条出现。

水平滚动条也出现在页面中，但不应出现。 <body style="overflow-x:hidden">无法使用，因为如果需要，它也会禁用滚动条。

<!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/27617764/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://cdn.jsdelivr.net/free-jqgrid/4.8.0/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="http://cdn.jsdelivr.net/free-jqgrid/4.8.0/js/jquery.jqgrid.src.js"></script> <script src="http://cdn.jsdelivr.net/free-jqgrid/4.8.0/plugins/ui.multiselect.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" }, { name: "name", align: "center", width: 92, editrules: {required: true} }, { name: "invdate", width: 72, 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: 56, template: "number", hidden: true }, { name: "tax", width: 35, template: "number", autoResizableMinColSize: 40, hidden: true }, { name: "total", width: 43, template: "number", hidden: true }, { name: "closed", width: 49, template: "booleanCheckboxFa" }, { name: "ship_via", width: 76, 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: 43, 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", ""); }); }); //]]> </script> </head> <body> <div id="outerDiv" style="margin:5px;"> <table id="grid"></table> </div> </body> </html>

Free jqgrid width is set to occupy at least whole window width using settings from jqGrid and the autowidth option. How does it work? answer

autowidth: true, shrinkToFit: false,

Top level toolbar icons are made bigger using style below from answers.

If there are many rows in jqgrid so that vertical scrollbar appears, those settings cause horizontal scrollbar to appear in Chrome even if all grid columns fit to screen. How to remove this unnessecary horizontal scrollbar ? It should appear only if sum of column widths is greater that window width.

To reproduce, open page below in chrome so that vertical scrollbar appers.

Horizontal scrollbar appears then also in page but it should not appear. <body style="overflow-x:hidden"> cannot used since it disables scrollbar also if it is required.

<!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/27617764/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://cdn.jsdelivr.net/free-jqgrid/4.8.0/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="http://cdn.jsdelivr.net/free-jqgrid/4.8.0/js/jquery.jqgrid.src.js"></script> <script src="http://cdn.jsdelivr.net/free-jqgrid/4.8.0/plugins/ui.multiselect.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" }, { name: "name", align: "center", width: 92, editrules: {required: true} }, { name: "invdate", width: 72, 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: 56, template: "number", hidden: true }, { name: "tax", width: 35, template: "number", autoResizableMinColSize: 40, hidden: true }, { name: "total", width: 43, template: "number", hidden: true }, { name: "closed", width: 49, template: "booleanCheckboxFa" }, { name: "ship_via", width: 76, 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: 43, 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", ""); }); }); //]]> </script> </head> <body> <div id="outerDiv" style="margin:5px;"> <table id="grid"></table> </div> </body> </html>

最满意答案

我同意在使用autowidth: true情况下计算网格的宽度并不完美autowidth: true 。然而，您描述的问题不是jqGrid问题。你在发布的演示中将外部div包含在网格上是很好的。它显示了问题的复杂性。

首先，在您发布的演示中，IE10 / IE11中不会显示水平滚动条。原因是IE默认显示半透明垂直滚动条。因此，在您描述的情况下，它不会创建额外的水平滚动条。

您可以通过在演示结束时添加以下行来解决问题：

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

在这里查看结果。

另一方面，演示在网格上有外部div， margin:5px 。如果我更改margin:5px到margin:200px那么相同的演示将如下所示。可以将网格的宽度增加到几乎200个额外的像素（确切的最大值是200 - 4，我现在无法解释，但是在我改进setGridWidth的代码后可以更改该值）。请参阅下一个演示。原因是：外部div将margin-left和margin-right设置为200px，但如果我们忽略margin-right ，则页面上的滚动条将不存在。它只是边距，并且空间中的页面上不存在真实元素。因此，Web浏览器不会在这种情况下创建水平滚动条。

I agree that the calculation of the width of the grid is not perfect in case of usage of autowidth: true. Nevertheless the problem which you describe is not a jqGrid problem. It's good that you included outer div over the grid in the demo which you posted. It shows the complexity of the problem.

First of all it will be displayed no horizontal scroll bar in IE10/IE11 in the demo which you posted. The reason is that IE displays half transparent vertical scrollbar by default. So it's not creates additional horizontal scroll bar in the case which you described.

You can fix the problem by adding the following lines at the end of your demo:

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

See the results here.

On the other side the demo have outer div over the grid with margin:5px. If I change the margin:5px to margin:200px then the same demo will looks as the following. One can increase the width of the grid to almost 200 additional pixel (the exact maximum is 200 - 4, which I can't explain now, but the value can be changed after I improve the code of setGridWidth). See the next demo. The reason: the outer div have both margin-left and margin-right set to 200px, but the scroll bar on the page will not exist if we would ignore the margin-right. It's only the margin and there are exist no real elements on the page in the space. Thus the web browsers don't creates horizontal scroll bars in the case.

更多推荐