Question

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

这就是我获取网格的方法，但正如您在数据库版本面板中看到的那样，所有5个标题列都可见我想在数据库发布面板中进行类似的操作但是在这种情况下，因为它会增加容器的宽度，所以应该出现一个显示所有列的水平滚动条

enter image description here

以下是我的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中选择网格宽度和列的可能性的人。

你写了

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

要实现您需要的要求，请执行以下操作

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

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

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

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

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

Answer 2

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

至于你的代码plz删除它可能导致问题的延迟和队列功能使用它如下

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

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

2 个答案: