如何在免费的jqgrid中使用body水平滚动条 [英] How to use body horizontal scrollbar in free jqgrid
本文介绍了如何在免费的jqgrid中使用body水平滚动条的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
github中的jqgrid确实允许使用浏览器body元素水平滚动条，如果它的属性
autowidth：true，
shrinkToFit：false，使用
。
要重现，请在Chrome中打开下面的页面（从如果使用autowidth：true，则如何移除自由jqgrid自己的水平滚动条）。
主体元素水平滚动条不可用：它不允许滚动到最右边的列。
如何解决这个问题，以便浏览器正文滚动条可以正常使用，jqgrid自己的水平滚动条不会出现？
我尝试删除
if（window.innerWidth> document.documentElement .clientWidth）{
$ grid.jqGrid（setGridWidth，
$ grid.jqGrid（getGridParam，wid th） -
（window.innerWidth - document.documentElement.clientWidth））;
}
但问题仍然存在。
如果网格被封装到< div id =outerDivstyle =margin：5px;> 水平滚动条仅在网格被调整为最小宽度并回到最大宽度。但是，它仍然不允许滚动到最右边的列。
<！DOCTYPE html>
< html lang =en>
< head>
< meta charset =utf-8>
< meta http-equiv =X-UA-Compatiblecontent =IE = edge>
< meta name =viewportcontent =width = device-width，initial-scale = 1>
< title> https：//stackoverflow.com/q/30199868/315935< / title>
< meta name =authorcontent =Oleg Kiriljuk>
< link rel =stylesheethref =http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/redmond/jquery-ui.css>
< link rel =stylesheethref =http://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css>
< link rel =stylesheethref =http://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css>
< link rel =stylesheethref =http://rawgit.com/free-jqgrid/jqGrid/master/css/ui.jqgrid.css>
< link rel =stylesheethref =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;
$ b .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，名称：test3，注：note3，金额：400.00，税：30.00，关闭：false，ship_via：FE，总数：430.00}，
{id ：40，invdate：2007-10-04，名称：test4，备注：note4，金额：200.00，税：10.00，关闭：true，ship_via：TN ：210.00}，
{id：50，invdate：2007-10-31，name：test5，note：note5，amount：300.00，tax：20.00 ，关闭：false，ship_via：FE，总数：320.00}，
{id：60，invdate：2007-09-06，name：test6，note：note6，amount：400.00，tax：30.00，closed：false，ship_via ：FE，总数：430.00}，
{id：70，invdate：2007-10-04，name：test7，note：note7，amount：200.00 ，tax：10.00，关闭：true，ship_via：TN，总数：210.00}，
{id：80，invdate：2007-10-03，name：test8 ，注意：note8，金额：300.00，税：20.00，关闭：false，ship_via：FE，总数：320.00}，
{id：90，invdate： 2007-09-01，名称：test9，注：note9，金额：400.00，税：30.00，关闭：false，ship_via：TN，总数：430.00}，
{id：100，invdate：2007-09-08，name：test10，note：note10，amount：500.00，tax：30.00，closed：true，ship_via： TN，总数：530.00}，
{id：110，invdate：2007-09-08，名称：test11，备注：note11，金额：500.00 ：30.00，关闭：false，ship_via： FE，总数：530.00}，
{id：120，invdate：2007-09-10，名称：test12，备注：note12，金额：500.00，税：30.00，关闭：false，ship_via：FE，总数：530.00}，
{id：110，invdate：2007-10-01 test，note：note，amount：，tax：，closed：true，ship_via：TN，total：}，
{id：120，invdate： 2007-10-02，名称：test2，注：note2，金额：300.00，税：20.00，关闭：false，ship_via：FE，合计：320.00}，
{id：130，invdate：2007-09-01，name：test3，note：note3，amount：400.00，tax：30.00，closed：false，ship_via： FE，总数：430.00}，
{id：140，invdate：2007-10-04，名称：test4，备注：note4，金额：200.00 ：10.00，关闭：true，ship_via：TN，总计：210.00}，
{id：150，invdate：2007-10-31，name：test5，note ：note5，金额：300.00，税：20.00，clos ed：false，ship_via：FE，总数：320.00}，
{id：160，invdate：2007-09-06，name：test6，note：note6，金额：400.00，税金：30.00，关闭：false，ship_via：FE，合计：430.00}，
{id：170，invdate：2007-10-04，名称：test7，注：note7，金额：200.00，税金：10.00，关闭：true，ship_via：TN，总计：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，总数：430.00}，
{id：1100，invdate：2007-09-08，name：test10，note：note10，amount： 500.00，税：30.00，关闭：true，ship_via：TN，总计：530.00}，
{id：1110，invdate：2007-09-08 test11，注意：note11，amou nt：500.00，税：30.00，关闭：false，ship_via：FE，总数：530.00}，
{id：1120，invdate：2007-09-10，名称：test12，注意：note12，金额：500.00，税：30.00，关闭：false，ship_via：FE，合计：530.00}，
{ id：210，invdate：2007-10-01，name：test，note：note，amount：，tax：，closed：true，ship_via：TN，合计： }，
{id：220，invdate：2007-10-02，name：test2，note：note2，amount：300.00，tax：20.00，已关闭：false，ship_via：FE，总数：320.00}，
{id：230，invdate：2007-09-01，名称：test3，备注：note3 ：400.00，税：30.00，关闭：false，ship_via：FE，总数：430.00}，
{id：240，invdate：2007-10-04 ：test4，注意：note4，金额：200.00，税金：10.00，关闭：true，ship_via：TN，合计：210.00}，
{id：250 ，invdate：2007-10-31，名称：test5，请注意：note5，amount：300.00，tax：20.00，closed：false，ship_via：FE，total：320.00}，
{id：260，invdate：2007 -09-06，名称：test6，备注：note6，金额：400.00，税：30.00，关闭：false，ship_via：FE，总数：430.00}，
{id：270，invdate：2007-10-04，name：test7，note：note7，amount：200.00，tax：10.00，closed：true，ship_via：TN ，总计：210.00}，
{id：280，invdate：2007-10-03，名称：test8，备注：note8，金额：300.00 20.00，关闭：false，ship_via：FE，总数：320.00}，
{id：290，invdate：2007-09-01，名称：test9 note9，amount：400.00，tax：30.00，closed：false，ship_via：TN，总数：430.00}，
{id：2100，invdate：2007-09 -08，名称：test10，备注：note10，金额：500.00，税金：30.00，关闭：true，ship_via：TN，总计：530.00}，
{ id：2110，invdat e：2007-09-08，名称：test11，备注：note11，金额：500.00，税：30.00，关闭：false，ship_via：FE，总数：530.00} ，
{id：2120，invdate：2007-09-10，name：test12，note：note12，amount：500.00，tax：30.00，closed：false， ship_via：FE，总数：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
colModel：[
{name：act，template：actions，width：66}，
{ name：name，align：center，width：92，editrules：{required：true}}，
{name：invdate，width：1172，align：center，sorttype：date ，冻结：真，
格式化程序：date，formatoptions：{newformat：dMY，reformatAfterEdit：true}，datefmt：dMY，
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，宽度：1176，align：center，格式化程序：select，
edittype：select，editoptions：{value：FE：FedEx; TN：TNT; IN：Intim， defaultValue：IN}，
stype：select，searchoptions：{sopt：[eq，ne]，值：：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：d esc，
navOptions：{
位置：center，
addtext：Add，
edittext：编辑，
deltext：删除，
searchtext：搜索，
refreshtext：重新加载，
viewtext：查看，
savetext：保存，
canceltext：取消，
iconsOverText：true
}，
说明：示范如何制作全宽导航栏
}）。jqGrid（navGrid，{view：true}）
.jqGrid（inlineNav）
//.jqGrid(\"filterToolbar）
.jqGrid（gridResize）;
var autoedit = true;
$ grid.jqGrid（navButtonAdd，#grid_toppager，{
buttonicon：fa-star，
字幕：切换，
id：AutoEdit ，
title：Toggle autoedit，
onClickButton：function（options，e）{
var $ me = $（e.currentTarget）;
$ me.toggleClass（ ）;
autoedit = $ me.hasClass（ui-state-active）;
$ me.attr（aria-pressed，autoedit？true：假）;
}
}）;
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
}）;
$ b $（＃grid_toppager）
.find（。ui-pg-button）
.each （函数（i）{
$（this）.attr（{
tabindex：String（i），
role：button
}）;
} ）;
//$(\"#AutoEdit\").attr(\"role，button）;
if（autoedit）{
$（＃AutoEdit）。click（）;
$ grid.jqGrid（navButtonAdd，#grid_toppager，{
buttonicon：fa-table，
标题：Columns，
title：选择列，
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 选项。请参阅演示。
Jqgrid from github does allow to use browser body element horizontal scrollbar if its properties
autowidth: true,
shrinkToFit: false,
are used.
To reproduce, open page below in chrome (created from sample in How to remove free jqgrid own horizontal scrollbar if autowidth:true is used ).
Body element horizontal scrollbar is not usable: it does not allow to scroll into rightmost columns.
How to fix this so that browser body scrollbar can normally used and jqgrid own horizontal scrollbar does not appear ?
I tried to remove
if ( window.innerWidth > document.documentElement.clientWidth) {
$grid.jqGrid("setGridWidth",
$grid.jqGrid("getGridParam", "width") -
(window.innerWidth - document.documentElement.clientWidth));
}
but problem persists.
If grid is wrapped to <div id="outerDiv" style="margin:5px;"> horizontal scrollbar appears only after grid is resized to minimal width and back to max width. However it does not still allow to scroll to rightmost columns.
<!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>
解决方案
I'm not sure that I understand the goal of all options which you use. It seems to me that you need remove autowidth: true option. See the demo.
这篇关于如何在免费的jqgrid中使用body水平滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
