Горизонтальная полоса прокрутки 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}]
});

Ответы

Ответ 1

i отрегулировал 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, чтобы скрыть горизонтальную полосу прокрутки, и теперь все в порядке со мной.

Ответ 2

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

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

Ответ 3

Задайте явный width в сетке и используйте

autowidth: false,
shrinkToFit: true

Ответ 4

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, давайте проанализируем.

Ответ 5

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

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

Ответ 6

Здесь мы идем 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; }

Ответ 7

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

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

Ответ 8

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

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

i помещает эти строки под вызов функции loadComplete.

Ответ 9

Примените AppearanceSettings ShrinkToFit="False" и AutoWidth="true" к jqGrid.

Ответ 10

Простое использование в jqgrid shrinkToFit: false

Ответ 11

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

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

Ответ 12

Я настраиваю этот тип CSS в моем jqgrid

.ui-jqgrid .ui-jqgrid-bdiv {
 position: relative;
 margin: 0;
 padding: 0;
 overflow: auto;
 text-align: left;
}

Ответ 13

Это работает для меня

 <style type="text/css">
    .ui-jqgrid-bdiv {
        overflow-x: hidden !important;
    }
 </style>