it-roy-ru.com

горизонтальная полоса прокрутки jqGrid

Я разработал AJAX интерфейс с jQuery и jqGrid.

Как я могу удалить горизонтальную полосу прокрутки из моей таблицы jqGrid?

http://dskarataev.ru/jqgrid.png

Если я установлю autowidth: true, то получу ширину таблицы = сумму ширины столбцов, но мне нужна ширина таблицы = ширина родительского элемента с идентификатором, возвращаемым функцией getSelectedTabHref()

поэтому я делаю функцию:

$(window).bind('resize', function() {
  $('#tasks').setGridWidth($(getSelectedTabHref()).width());
  $('#tasks').setGridHeight($(window).height()-190);
}).trigger('resize');

и вот как я создаю таблицу jqGrid:

$('#tasks').jqGrid({
  datatype: 'local',
  colNames:[labels['tasksNum'],labels['tasksAdded']+"/"+labels['tasksAccepted'],labels['tasksOperator'],labels['tasksClient'],labels['tasksManager'],labels['tasksDesc']],
  colModel :[
    {name:'taskId', index:'taskId', width:1, align:'right'},
    {name:'taskAdded', index:'taskAdded', width:3},
    {name:'taskOperator', index:'taskOperator', width:4},
    {name:'taskClient', index:'taskClient', width:7},
    {name:'taskManager', index:'taskManager', width:4},
    {name:'taskDesc', index:'taskDesc', width:8}]
});

32
dskarataev

я настроил ui.grid.css, потому что мне вообще не нужна горизонтальная полоса прокрутки. я сделал это:

.ui-jqgrid .ui-jqgrid-bdiv {
  position: relative; 
  margin: 0em; 
  padding:0; 
  /*overflow: auto;*/ 
  overflow-x:hidden; 
  overflow-y:auto; 
  text-align:left;
}

так было сказано, я просто использовал overflow-x, чтобы скрыть горизонтальную полосу прокрутки, и теперь все в порядке со мной. 

75
Herman van der Blom

В некоторых ситуациях jqGrid вычисляет неверную ширину сетки. Вы можете попытаться увеличить параметр cellLayout (см. http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options ). Это может понадобиться, если вы измените некоторые CSS из jqGrid.

В некоторых других ситуациях вы можете исправить ширину с помощью функции fixGridWidth или fixGridSize, которую я описал в Правильный вызов setGridWidth для jqGrid в диалоге jQueryUI . Не забывайте, что вы должны использовать его внутри loadComplete.

5
Oleg

Установите явную width на сетке и используйте 

autowidth: false,
shrinkToFit: true
4
arviman

setGridWidth определенно изменит размер вашей сетки до заданной новой ширины, но убедитесь, что вы используете ее с autowidth = true. У setGridWidth может быть проблема с IE 7 или около того.

Некоторые рабочие решения, обсуждаемые здесь (на случай, если вы еще не нашли решение), 

Изменить размер jqGrid при изменении размера браузера?

http://www.trirand.com/blog/?page_id=393/discussion/browser-resize-how-to-resize-jqgrid/

---- ---- старый

Есть несколько вариантов, которые вы можете попробовать, 

От http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options

"autowidth" : true    

или же

"shrinkToFit": false

В противном случае опубликуйте свой код jqgrid, давайте проанализируем.

1
Prem Rajendran

Здесь мы идем width : '1083', shrinkToFit:false,

Когда мы устанавливаем вышеупомянутое, мы должны удостовериться, что наш ui.jqgird.css установлен как ниже

.ui-jqgrid .ui-jqgrid-bdiv { height: auto; margin: 0em; max-height: 250px; overflow-x: auto; overflow-y: auto; padding: 0px; position: relative; text-align: left; }
1
kiran vennampelli

немного поздно, но может быть полезно для кого-то

Вы должны установить высоту таблицы только в числах, без «px» в конце

1
Agustin Baez

Добавьте приведенный ниже скрипт в ваш style.css, чтобы решить вашу проблему.

.ui-jqgrid .ui-jqgrid-bdiv {
    overflow-x:hidden !important; 
    overflow-y:auto !important;
}
0
Hari Prasad Ranganathan

Применить AppearanceSettings ShrinkToFit="False" и AutoWidth="true" к вашей jqGrid.

0
Ankit Gupta

я использовал метод API jqgrid setGridHeight. у меня это отлично работает и в IE 8. 

var gr = jq('#grid');
gr.setGridHeight(350,true);

я поместил эти строки в вызов функции loadComplete.

0
Sam

Это просто, используйте в jqgrid shrinkToFit: false

0
cavalsilva

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

loadComplete: function (data) {
                //set our "ALL" select option to the actual number of found records
                $(".ui-pg-selbox option[value='ALL']").val(data.records);
                if ($(".ui-jqgrid").height() > $('#grid').getGridParam('maxHeight')) {
                    //resize our grid for the vertical scroll bar to eliminate the hortizontal scroll bar
                    $(".ui-jqgrid").css("width", $('#grid').getGridParam('width') + 20);
                    $(".ui-jqgrid-bdiv").css("width", $('#grid').getGridParam('width') + 17);
                    $(".ui-jqgrid-hdiv").css("width", $('#grid').getGridParam('width') + 20);
                    $(".ui-jqgrid-view").css("width", $('#grid').getGridParam('width') + 20);
                    $("#pager").css("width", $('#grid').getGridParam('width') + 20);
                    $(".ui-jqgrid-hbox").css("padding-right", "16px");
                } else { //set everything to defaults
                    $(".ui-jqgrid").css("width", $('#grid').getGridParam('width'));
                    $(".ui-jqgrid-bdiv").css("width", $('#grid').getGridParam('width'));
                    $(".ui-jqgrid-hdiv").css("width", $('#grid').getGridParam('width'));
                    $(".ui-jqgrid-view").css("width", $('#grid').getGridParam('width'));
                    $("#pager").css("width", $('#grid').getGridParam('width'));
                    $(".ui-jqgrid-hbox").css("padding-right", "0px");
                }
}
0
Chris