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

Question

Я разработал интерфейс 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}]
});

Answer 1

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

Answer 2

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

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

Answer 3

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

autowidth: false,
shrinkToFit: true

Answer 4

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

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

Answer 5

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

Answer 6

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

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

Answer 7

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

Answer 8

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

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

Answer 9

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

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

Answer 10

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