需要时在jqgrid中使用水平滚动条

我有一个jqgrid，其中有19列，我想显示完整的列标题并有一个水平滚动条（仅当标题列超过mainWidth ）

这就是我获取网格的方法，但正如你在Database Version面板中看到的那样，所有5个标题列都是可见的我想要在Database Release面板中有类似的东西，但在这种情况下，因为它会增加容器的宽度，所以水平滚动条应显示所有列

下面是我的jqgrid代码

  var mainWidth=jQuery('#detailTable').width(); panels+='
'+ '
'+ ''+ '
'+ '
'+ '
'; $('#detailTable').empty(); $('
') .html('
ORS Information
'+panels) .appendTo('#detailTable').delay(10).queue(function(){ $('.class').jPanel({ 'effect' : 'fade', 'speed' : 'slow', 'easing' : 'swing' }); }); 

我正在使用上面的JPanel （可折叠面板）

  //Master Database Release jQuery("#tblOrsDatabaseRelease").jqGrid({ datatype: "clientSide", colNames:['Debug Ind','Debug File Path','Debug Level','Debug File Name','LOG_FILE_SIZE','LOG_FILE_NUMBER','TNS_NAME','CONNECTION_PORT','ORACLE_SID','DATABASE_HOST','SCHEMA_WRITE_LOCK_DISABLED_IND','COLUMN_LENGTH_IN_BYTES_IND','MTIP_REGENERATION_REQUIRED_IND','GLOBAL_NOLOGGING_IND','PRODUCTION_MODE_IND','LAST_CHANGE_DATE','API_BATCH_INTEROP_IND','ZDT_IND','WORKFLOW_ENGINE_NAME'], colModel:[ {name:'debugInd',index:'debugInd', align:"left"}, {name:'debugFilePath',index:'debugFilePath', align:"left"}, {name:'debugLevel',index:'debugLevel', align:"left"}, {name:'debugFileName',index:'debugFileName', align:"left"}, {name:'LOG_FILE_SIZE',index:'LOG_FILE_SIZE', align:"left"}, {name:'LOG_FILE_NUMBER',index:'LOG_FILE_NUMBER', align:"left"}, {name:'TNS_NAME',index:'TNS_NAME', align:"left"}, {name:'CONNECTION_PORT',index:'CONNECTION_PORT', align:"left"}, {name:'ORACLE_SID',index:'ORACLE_SID', align:"left"}, {name:'DATABASE_HOST',index:'DATABASE_HOST', align:"left"}, {name:'SCHEMA_WRITE_LOCK_DISABLED_IND',index:'SCHEMA_WRITE_LOCK_DISABLED_IND', align:"left"}, {name:'COLUMN_LENGTH_IN_BYTES_IND',index:'COLUMN_LENGTH_IN_BYTES_IND', align:"left"}, {name:'MTIP_REGENERATION_REQUIRED_IND',index:'MTIP_REGENERATION_REQUIRED_IND', align:"left"}, {name:'GLOBAL_NOLOGGING_IND',index:'GLOBAL_NOLOGGING_IND', align:"left"}, {name:'PRODUCTION_MODE_IND',index:'PRODUCTION_MODE_IND', align:"left"}, {name:'LAST_CHANGE_DATE',index:'LAST_CHANGE_DATE', align:"left"}, {name:'API_BATCH_INTEROP_IND',index:'API_BATCH_INTEROP_IND', align:"left"}, {name:'ZDT_IND',index:'ZDT_IND', align:"left"}, {name:'WORKFLOW_ENGINE_NAME',index:'WORKFLOW_ENGINE_NAME', align:"left"} ], pagination:true, pager : '#OrsDatabaseReleaseGridpager', rowNum:10, rowList:[10,50,100], scrollOffset:0, height: 'auto', autowidth:true, viewrecords: true, gridview: true, edit:false, add:false, del:false, loadComplete: function() { var gr = jQuery('#tblOrsDatabaseRelease'); fixGridWidth(gr); } }); for(var i=0;i<orsDbRelease.length;i++) jQuery("#tblOrsDatabaseRelease").jqGrid('addRowData',i+1,orsDbRelease[i]); jQuery("#tblOrsDatabaseRelease").setGridParam({rowNum:10}).trigger("reloadGrid 

我使用Oleg的答案来获得以下function

  var fixGridWidth = function (grid) { var gviewScrollWidth = grid[0].parentNode.parentNode.parentNode.scrollWidth; var mainWidth = jQuery('#detailTable').width(); var gridScrollWidth = grid[0].scrollWidth; var htable = jQuery('table.ui-jqgrid-htable', grid[0].parentNode.parentNode.parentNode); var scrollWidth = gridScrollWidth; if (htable.length > 0) { var hdivScrollWidth = htable[0].scrollWidth; if ((gridScrollWidth  mainWidth) { var newGridWidth = (scrollWidth <= mainWidth)? scrollWidth: mainWidth; // min (scrollWidth, mainWidth) // if the grid has no data, gridScrollWidth can be less then hdiv[0].scrollWidth if (newGridWidth != gviewScrollWidth) grid.jqGrid("setGridWidth", newGridWidth); } }; 

Answer 1

我想你存在的问题是因为误解了定义列宽的jqGrid的不同参数。 为了告诉信任，有许多宽度选择的场景，并且你不是唯一一个不完全理解在jqGrid中选择网格宽度和列的可能性的人。

你写了

我有一个jqgrid，其中有19列，我想显示完整的列标题并有一个水平滚动条。

要实现这些要求，您需要执行以下操作

• 删除自动autowidth: true选项。
• 添加jqGrid的shrinkToFit shrinkToFit: false选项。
• 在colModel每一列中添加width属性。 如果没有为列指定任何width值，则默认值width: 150您应该选择您真正需要查看的宽度。 jqGrid不会更改宽度值，因为您使用shrinkToFit shrinkToFit: false 。
• 你不应该使用和值为jqGrid的width选项。 在网格宽度将是网格的所有列的宽度的总和的情况下。
• 从loadComplete删除对fixGridWidth调用。 我想你根本不需要这个function。

我不使用JPanel插件，并且看不到插件与jQuery UI Accordion小部件相比的任何优势。 可能有一些特定于JPanel插件的问题。 不过我想你应该从你将用作网格的

元素中删除width="100%"属性。

我无法在您的环境中测试我的建议，但我希望它非常接近您的需求。

您的代码的一些常见说明：

• jqGrid中没有选项pagination ， edit ， add或del 。 您应该删除参数。
• 用数据填充网格你应该添加data: orsDbRelease参数到jqGrid并删除循环中的reloadGrid和reloadGrid后addRowData的用法。 如果使用data参数，网格将更快填充并且已经正确分页。
• colModel项目中属性align的默认值已经是“left”（请参阅​​文档页面表格中“Default”列中的值）。 因此，您可以从每列中删除属性align:"left" 。
• 您应该考虑在网格中包含所有非文本列的sorttype属性。 它将正确地生成相应列的排序顺序。 可能使用不同的formatter属性还可以提高网格的可见性。 有关详细信息，请参阅文档 。

Answer 2

我会赞成Oleg的上述答案，但是jPanel在这里没有引起任何问题，我已经测试了这个并且jPanel比手风琴更有优势的是你可以同时打开多个面板并且它使用最小标记并且最新版本具有许多其他function也可以查看并在此处查看https://sites.google.com/site/jqpanel/home确实让我知道您的宝贵意见。

至于你的代码plz删除它可能导致问题的延迟和队列function，而不是如下所示

 $('#detailTable').empty(); $('
') .html('
ORS Information
'+panels) .appendTo('#detailTable').find('.class').jPanel({ 'effect' : 'fade', 'speed' : 'slow', 'easing' : 'swing' });