需要时jqgrid中的水平滚动条

Question

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

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

下面是我的 jqgrid 代码

    var mainWidth=jQuery('#detailTable').width();

    panels+='<div title="Database Release" class="class">'+
                '<div class="jqUIDiv" style="width:'+mainWidth+'px; overflow-x:auto;">'+
                    '<table id="tblOrsDatabaseRelease" width="100%"></table>'+
                    '<div id="OrsDatabaseReleaseGridpager"></div>'+
                '</div>'+
            '</div>';

    $('#detailTable').empty();
    $('<div>')
    .html('<div class="titleBlue">ORS Information</div>'+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's answer得到下面的函数

    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 < hdivScrollWidth))
                scrollWidth = hdivScrollWidth; // max (gridScrollWidth, hdivScrollWidth)
        }
        if (gviewScrollWidth != scrollWidth || scrollWidth > 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中选择网格和列宽度的可能性的人。

你写的

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

要实现您需要遵循的要求

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

我不使用 JPanel 插件，并且与 jQuery UI Accordion 小部件相比，我没有看到该插件有任何优势。可能有一些特定于 JPanel 插件的问题。尽管如此，我认为您应该从将用作网格的 <table> 元素中删除 width="100%" 属性。

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

对您的代码的一些常见注释：

• jqGrid 中没有pagination、edit、add 或del 选项。您应该删除这些参数。
• 要使用数据填充网格，您应该将data: orsDbRelease 参数添加到jqGrid 并删除循环中addRowData 和循环后reloadGrid 的使用。如果您使用data 参数，网格将被更快地填充，并且已经正确分页。
• colModel 的项目中属性align 的默认值已经是“左”（参见文档the page 中表格中“默认”列中的值）。因此，您可以从每一列中删除属性 align:"left"。
• 您应该考虑为网格中的所有非文本列包含sorttype 属性。它将正确地使相应列的排序顺序。可能使用不同的formatter 属性可以额外提高网格的可见性。请参阅the documentation 了解更多详情。

Answer 2

我会支持 Oleg 的上述回答，但 jPanel 在这里不会引起任何问题，我已经对此进行了测试，jPanel 相对于手风琴的优势在于您可以一次打开多个面板，并且它使用最少的标记和最新版本还有许多其他功能，您可以在这里查看并查看https://sites.google.com/site/jqpanel/home 请让我知道您宝贵的 cmets。

至于您的代码，请删除延迟和队列功能，它可能会导致问题，请改用如下方式

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