如果使用 autowidth:true，如何删除免费的 jqgrid 自己的水平滚动条
How to remove free jqgrid own horizontal scrollbar if autowidth:true is used
免费的 jqgrid 宽度设置为至少占据整个 window 宽度，使用来自 jqGrid and the autowidth option. How does it work? 答案
的设置
autowidth: true,
shrinkToFit: false,
顶级工具栏图标使用以下答案中的样式变得更大。
如果jqgrid中有很多行，出现垂直滚动条，
即使所有网格列都适合屏幕，这些设置也会导致水平滚动条出现在 Chrome 中。
如何删除这个不必要的水平滚动条？仅当列宽总和大于 window 宽度时才会出现。
要重现，请在 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>
<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="../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://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 的情况下网格宽度的计算并不完美。不过，您描述的问题不是 jqGrid 问题。很高兴在您发布的演示中将外部 div 包含在网格上。可见问题的复杂性。
首先，在您发布的演示中，IE10/IE11 中将不显示水平滚动条。原因是IE默认显示半透明垂直滚动条。所以它不会在您描述的情况下创建额外的水平滚动条。
您可以通过在演示末尾添加以下行来解决问题：
if (window.innerWidth > document.documentElement.clientWidth) {
$grid.jqGrid("setGridWidth",
$grid.jqGrid("getGridParam", "width") -
(window.innerWidth - document.documentElement.clientWidth));
}
查看结果here。
在另一边，演示在带有 margin:5px 的网格上有外部 div。如果我将 margin:5px 更改为 margin:200px，则相同的演示将看起来像 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。原因：外层div的margin-left和margin-right都设置为200px，但是页面的滚动条不会存在忽略 margin-right。这只是边距，space 中的页面上不存在真正的元素。因此，Web 浏览器不会在这种情况下创建水平滚动条。
将此样式添加到您的代码中
<style type="text/css">
.ui-jqgrid-bdiv {
overflow-x: hidden !important;
}
</style>
免费的 jqgrid 宽度设置为至少占据整个 window 宽度，使用来自 jqGrid and the autowidth option. How does it work? 答案
的设置 autowidth: true,
shrinkToFit: false,
顶级工具栏图标使用以下答案中的样式变得更大。
如果jqgrid中有很多行，出现垂直滚动条， 即使所有网格列都适合屏幕，这些设置也会导致水平滚动条出现在 Chrome 中。 如何删除这个不必要的水平滚动条？仅当列宽总和大于 window 宽度时才会出现。
要重现，请在 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>
<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="../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://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 的情况下网格宽度的计算并不完美。不过，您描述的问题不是 jqGrid 问题。很高兴在您发布的演示中将外部 div 包含在网格上。可见问题的复杂性。
首先，在您发布的演示中，IE10/IE11 中将不显示水平滚动条。原因是IE默认显示半透明垂直滚动条。所以它不会在您描述的情况下创建额外的水平滚动条。
您可以通过在演示末尾添加以下行来解决问题：
if (window.innerWidth > document.documentElement.clientWidth) {
$grid.jqGrid("setGridWidth",
$grid.jqGrid("getGridParam", "width") -
(window.innerWidth - document.documentElement.clientWidth));
}
查看结果here。
在另一边，演示在带有 margin:5px 的网格上有外部 div。如果我将 margin:5px 更改为 margin:200px，则相同的演示将看起来像 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。原因：外层div的margin-left和margin-right都设置为200px，但是页面的滚动条不会存在忽略 margin-right。这只是边距，space 中的页面上不存在真正的元素。因此，Web 浏览器不会在这种情况下创建水平滚动条。
将此样式添加到您的代码中
<style type="text/css">
.ui-jqgrid-bdiv {
overflow-x: hidden !important;
}
</style>