2010-06-22 30 views
32

Opracowałem interfejs AJAX z jQuery i jqGrid.jqGrid poziomy pasek przewijania

Jak usunąć poziomy pasek przewijania z mojej tabeli jqGrid?

http://dskarataev.ru/jqgrid.png

Jeżeli ustawić autowidth: true, następnie uzyskać szerokość szerokość tabeli = suma kolumn, ale muszę szerokość stołu = szerokość elementu nadrzędnego id zwrócony przez funkcję getSelectedTabHref()

tak robię funkcja:

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

i oto jak tworzę jqGrid tabeli:

$('#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}] 
}); 

Odpowiedz

1

setGridWidth pewno zmienić rozmiar siatki do danego nowej szerokości, ale upewnij się go używać z autowidth = true. setGridWidth może mieć problem z IE 7 lub tak.

niektórych roztworów roboczych opisanych tutaj (w przypadku, jeśli są jeszcze znaleźć rozwiązanie),

Resize jqGrid when browser is resized?

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

---- stary ----

Nie kilka opcji, które możesz wypróbować,

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

"autowidth" : true  

lub

"shrinkToFit": false 

Inaczej pisać kod jqGrid, przeanalizujmy.

+0

I zaktualizował pytanie. Proszę, proszę. – dskarataev

5

Istnieje kilka sytuacji, w których jqGrid obliczy niepoprawną szerokość siatki. Możesz spróbować zwiększyć parametr cellLayout (patrz http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options). Może to być konieczne, jeśli zmienisz niektóre CSS z jqGrid.

W niektórych sytuacjach można poprawić szerokość w zależności od funkcji fixGridWidth lub fixGridSize, którą opisałem w artykule Correctly calling setGridWidth on a jqGrid inside a jQueryUI Dialog. Nie zapominaj, że powinieneś użyć go wewnątrz loadComplete.

+0

dziękuję, sprawdzę. – dskarataev

72

Dostosowałem plik ui.grid.css, ponieważ w ogóle nie potrzebowałem poziomego paska przewijania. Zrobiłem to:

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

komentowane było jak było, po prostu stosować overflow-x, aby ukryć pasek przewijania poziomego i teraz wszystko jest w porządku ze mną.

+0

Działa doskonale dla mnie, dzięki! – Matthieu

+0

Świetne, tanio !!! –

+0

dlaczego to pytanie nie jest pierwsze? ma 26 głosów i działa idealnie! Dziękuję Ci! – Paschalis

4

Ustaw jawne width na siatce i użyj

autowidth: false, 
shrinkToFit: true 
+0

To rozwiązanie nie działa w każdej sytuacji. Zmiana css działa. – Matthieu

0

użyłem jqGrid metoda API setGridHeight. to działa dobrze także w IE 8.

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

Umieszczam te linie pod wywołaniem funkcji "loadComplete".

1

nieco późno, ale może być przydatna dla kogoś

należy ustawić wysokość stołu tylko w liczbach, bez „px” na końcu

0

Zastosuj AppearanceSettingsShrinkToFit="False" i AutoWidth="true" do listy jqGrid.

1

Zaczynamy width : '1083', shrinkToFit:false,

Kiedy ustawiony wyżej musimy upewnić się, że nasz ui.jqgird.css są ustawione jak poniżej

.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; } 
Powiązane problemy