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

Question

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

这就是我获取网格的方法,但正如您在数据库版本面板中看到的那样,所有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的答案来获得以下功能

    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列,我想显示完整的列标题并有一个水平滚动条.

要实现这些要求,请执行以下操作

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

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

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

您的代码的一些常见评论:

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