Горизонтальная полоса прокрутки в jqgrid при необходимости - PullRequest
2 голосов
/ 28 ноября 2011

У меня есть jqgrid, где есть 19 столбцов, я хочу отобразить полные заголовки столбцов и иметь горизонтальную полосу прокрутки (только когда столбцы заголовков превышают mainWidth)

Вот так я получаюмои сетки, но, как вы можете видеть на панели Database Version , все 5 столбцов заголовка видны, я хочу аналогичные вещи на панели Database Release , но в этом случае она увеличит ширинуконтейнер, поэтому должна появиться горизонтальная полоса прокрутки, отображающая все столбцы

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

Я использовал ответ Олега , чтобы получить следующую функцию

    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);
        }
    };

Ответы [ 2 ]

6 голосов
/ 28 ноября 2011

Полагаю, что проблема, которая у вас возникла, из-за недопонимания различных параметров jqGrid, который определяет ширину столбца. Чтобы выразить доверие, существует множество сценариев выбора ширины, и вы не единственный человек, который не до конца понимает возможности выбора ширины сетки и столбцов в jqGrid.

Вы написали

У меня есть jqgrid, где есть 19 столбцов, я хочу отобразить полный заголовки столбцов и имеют горизонтальную полосу прокрутки.

Для реализации требований вам необходимо выполнить

  • удалить autowidth: true параметр jqGrid.
  • добавить shrinkToFit: false параметр jqGrid.
  • добавить width свойство в каждый столбец colModel. Если вы не указали значение width для столбца, значение по умолчанию width: 150 Вы должны выбрать ширину, которую вам действительно нужно увидеть. Значение ширины не будет изменено jqGrid, потому что вы используете shrinkToFit: false.
  • Вы не должны использовать и значение для width опции jqGrid. В случае, если ширина сетки будет суммой ширины всех столбцов сетки.
  • удалить вызов fixGridWidth из loadComplete. Я полагаю, вам вообще не понадобится эта функция.

Я не использую плагин JPanel и не вижу никаких преимуществ от плагина по сравнению с jQuery UI Accordion виджетом. Возможно, есть некоторые проблемы, специфичные для плагина JPanel. Тем не менее я полагаю, что вы должны удалить атрибут width="100%" из элемента <table>, который вы будете использовать в качестве сетки.

Я не могу проверить свои предложения в вашей среде, но я надеюсь, что это очень близко к тому, что вам нужно.

Некоторые общие замечания к вашему коду:

  • в jqGrid нет опций pagination, edit, add или del. Вы должны удалить параметры.
  • чтобы заполнить сетку данными, вы должны добавить параметр data: orsDbRelease в jqGrid и убрать использование addRowData в цикле и reloadGrid после цикла. Если вы используете параметр data, сетка будет заполнена быстрее и будет иметь правильную нумерацию страниц.
  • значение по умолчанию свойства align в элементах colModel уже «оставлено» (см. Значение в столбце «По умолчанию» в таблице на странице документации). Таким образом, вы можете удалить свойство align:"left" из каждого столбца.
  • Следует рассмотреть возможность включения свойства sorttype для всех нетекстовых столбцов в сетке. Это сделает порядок сортировки соответствующего столбца правильно. Вероятно, использование различных свойств formatter может дополнительно улучшить видимость сетки. Подробнее см. в документации .
0 голосов
/ 20 марта 2012

Я бы поддержал вышеупомянутый ответ Олега, но jPanel не вызывает здесь никаких проблем, и я проверил это, и преимущество jPanel перед аккордеоном заключается в том, что вы можете открывать несколько панелей одновременно, и при этом используется минимальная разметка ипоследняя версия также имеет много других функций, вы можете проверить ее и просмотреть здесь https://sites.google.com/site/jqpanel/home, дайте мне знать ваши ценные комментарии.

Что касается вашего кода, пожалуйста, удалите функцию задержки и очереди, это может быть причинойиспользуйте проблему, как показано ниже

$('#detailTable').empty();
$('<div>')
.html('<div class="titleBlue">ORS Information</div>'+panels)
.appendTo('#detailTable').find('.class').jPanel({
        'effect'    : 'fade',
        'speed'     : 'slow',
        'easing'    : 'swing'
    });
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...