JQgrid水平滚动条不显示答案

【问题标题】：JQgrid horizontal scrollbar not showingJQgrid水平滚动条不显示
【发布时间】：2015-07-31 18:22:39
【问题描述】：

我想为我的 JQgrid 显示一个水平滚动条，但它没有显示出来。这是我的网格代码

    jQuery("#list").jqGrid({
url:'failReportFeeder.jsp?rep=fic&rid=1&deskId=RATES&ctlSelectedDate='+document.getElementById('ctlSelectedDate').value,
datatype: 'json',
colNames: ['Trader', 'Transaction Date', 'As of Trade Date', 'Settlement Date', 'Security Name', 'Cusip Numbers', 'Receive Deliver Type', 'Calc Fail Amount', 'Calculable Transaction Price', 'Principal', 'Accrued Interest',  'Trade Money', 'Accrued Interest To Date', 'External TRade Id', 'Group Customer Account Number', 'Group Customer Name',  'Outstanding Date', 'Customer Account', 'Salesperson Code', 'Depository Account', 'Comment', 'Customer Name', 'ISIN Code', 'Aging'],
colModel: [
{name: 'trader', index: 'trader', width: 200, sorttype: 'text', align: 'center', search:true, stype:'text'},
{name: 'trdate', index: 'trdate', width: 200, sorttype: 'text', align: 'center',search:true, stype:'text'},
{name: 'aotd', index: 'aotd', width: 200, align: 'center', sorttype: 'text',search:true, stype:'text'},
{name: 'stdt', index: 'stdt', width: 200, align: 'center', sorttype: 'text',search:true, stype:'text'},
{name: 'secn', index: 'mval', width: 200, align: 'right', sorttype: 'float',search:true, stype:'text'},
{name: 'csp', index: 'csp', width: 200, sorttype: 'text', align: 'center', search:true, stype:'text'},
{name: 'rdt', index: 'rdt', width: 200, sorttype: 'text', align: 'center',search:true, stype:'text'},
{name: 'cfa', index: 'cfa', width: 200, align: 'center', sorttype: 'text',search:true, stype:'text'},
{name: 'ctp', index: 'ctp', width: 100, align: 'center', sorttype: 'text',search:true, stype:'text'},
{name: 'prin', index: 'prin', width: 100, align: 'right', sorttype: 'float',search:true, stype:'text'},
{name: 'acin', index: 'acin', width: 100, sorttype: 'text', align: 'center', search:true, stype:'text'},
{name: 'trm', index: 'trm', width: 100, sorttype: 'text', align: 'center',search:true, stype:'text'},
{name: 'aitd', index: 'aitd', width: 100, align: 'center', sorttype: 'text',search:true, stype:'text'},
{name: 'etri', index: 'etri', width: 100, align: 'center', sorttype: 'text',search:true, stype:'text'},
{name: 'gcan', index: 'gcan', width: 100, align: 'right', sorttype: 'float',search:true, stype:'text'},
{name: 'gcn', index: 'gcn', width: 100, sorttype: 'text', align: 'center', search:true, stype:'text'},
{name: 'otd', index: 'otd', width: 100, sorttype: 'text', align: 'center',search:true, stype:'text'},
{name: 'csa', index: 'csa', width: 100, align: 'center', sorttype: 'text',search:true, stype:'text'},
{name: 'slc', index: 'slc', width: 100, align: 'center', sorttype: 'text',search:true, stype:'text'},
{name: 'dpa', index: 'dpa', width: 100, align: 'right', sorttype: 'float',search:true, stype:'text'},
{name: 'cmt', index: 'cmt', width: 100, sorttype: 'text', align: 'center',search:true, stype:'text'},
{name: 'cstn', index: 'cstn', width: 100, align: 'center', sorttype: 'text',search:true, stype:'text'},
{name: 'isin', index: 'isin', width: 100, align: 'center', sorttype: 'text',search:true, stype:'text'},
{name: 'agn', index: 'agn', width: 100, align: 'right', sorttype: 'float',search:true, stype:'text'}
   ],
pager: "#pager",
rowNum: 500,
rowList: [500,1000, 2000, 3000,4000],
sortorder: "desc",
viewrecords: true,
gridview: true,
autoencode: false,
height:475,
multiSort:true,
shrinkToFit:false,
multiselect:false,
ignoreCase:true,
autowidth: true,
loadonce:true,
caption:" Rates Desk Report"}).navGrid('#pager',{edit:false,add:false,del:false,search:true,refresh:true}).jqGrid('navButtonAdd',
'#pager',
{ caption: " Export to Excel ",
 position: "first",
 onClickButton: function(){
jQuery("#list").jqGrid('excelExport',
{
"url":"xlsxreporter.jsp?AppName=FailsReports&deskId=RATES&reportId=1&reportType=fic&BSNS_DT="+ document.getElementById('ctlSelectedDate').value
 });
}
});
$('#list').setGridWidth(1050, true);

请指教。我已经有shrinktofit false 和autowidth true。如果我取出 $('#list').setGridWidth(1050, true);选项，然后显示水平滚动条，但随后我的网格超出了网页的边界。我需要以某种方式修改网格 cs 吗？

【问题讨论】：

标签： jquery html css jqgrid

【解决方案1】：

同样的问题：How to show horizontal scroll bar in jqgrid

没有任何代码，有些东西你需要看看......

不要使用 autowidth 并确保你没有使用 shrinkToFit（它需要设置为假）。除此之外，水平滚动条应该只出现这两个变化。除此之外，你还应确保为每列明确设置宽度在列模型中。

【讨论】：

谢谢，但这对我不起作用。请看答案

【解决方案2】：

在这里找到答案

jqGrid and the autowidth option. How does it work?

jqgrid边框宽度的优先级是*jqgrid边框autowidth>jqgrid边框宽度>列宽之和*

列宽的优先级是 colmodel fixed > jqgrid frame shrinkToFit > colmodel width

所以我只是将 colModel 中的固定属性设置为 true。

fixed:true

【讨论】：