請填寫的jqGrid其容器

我使用jQuery插件佈局和我的項目之一的jqGrid的插件和他們的工作只是一個小問題，大...請填寫的jqGrid其容器

我想要的jqGrid完全填滿窗格（jQuery佈局窗格）包含它。調整窗格的大小應調整jqGrid的大小，關閉窗格應隱藏jqGrid等等。

jqGrid和jQuery Layout都提供了回調，但是當我使用它們時，頁面佈局會突然崩潰。

有沒有人混合使用jqGrid和jQuery Layout的經驗？

來源

2010-05-27 Horacio

我建議你通過閱讀resize-jqgrid-when-browser-is-resized，其中討論了幾種技術調整您的網格。

來源

2010-05-27 14:12:21

謝謝，這使我得到了我需要的答案。 – Horacio 2010-05-28 02:03:05

不客氣，很高興幫助 – 2010-05-28 02:03:48

@JustinEthier我們如何使這個像流動網格一樣像twitter bootstrap表。這裏的例子http://192.69.216.111/themes/preview/ace/tables.html – 2013-08-05 18:10:07

這是我目前的解決方案：

首先創建一個由在onResize事件稱爲調整大小功能：

function resizeGrid(pane, $Pane, paneState) { 
    if(grid = $('.ui-jqgrid-btable:visible')) { 
    grid.each(function(index) { 
     var gridId = $(this).attr('id'); 
     $('#' + gridId).setGridWidth(paneState.innerWidth - 2); 
    }); 
    } 
}

然後在你的佈局，我們成立了resize事件調用此方法：

$('#mylayout_id').layout({ 
    center: { 
    closable: false, 
    resizable: false, 
    slidable: false, 
    onresize: resizeGrid, 
    triggerEventsOnLoad: true // resize the grin on load also 
    }, 
    west: { 
    fxName: "slide", 
    size: 250, 
    maxSize: 300 
    }, 
    east: { 
    fxName: "slide", 
    size: 250, 
    maxSize: 300 
    } 
});

使用此功能，您可以將jqGrid放置在佈局的任何窗格中，並且將調整其大小以適應調整中央窗格大小時所使用的窗格。

來源

2010-05-28 02:17:06 Horacio

我使用的jqGrid 4.0（通過jQuery支柱2插件）和jQuery佈局插件。以前的答案不適合我。儘管只有功能resizeGrid是個問題。用這個替換上面的resizeGrid函數。這將只調整一個網格 - 其編號爲gridtable的網格。

function resizeGrid(pane, $Pane, paneState) { 
    jQuery("#gridtable").jqGrid('setGridWidth',paneState.innerWidth - 2, 'true'); 
};

#gridtable是您的jqGrid創建

<div id="grid_container"> 
    <table id="gridtable" class="mygrid"></table> 
    <div id="grid_pgr"></div> 
</div>

此外，如果正在使用jQuery struts2的插件表元素的id，使用<body>（未內<script>塊是自動生成網格在<head>內的腳本塊中）。因此，如果您撥打layout()並在<head>中設置triggerEventsOnLoad: true，則會發生javascript錯誤。爲了避免這種情況，您可以在聲明網格後的某個位置添加此腳本塊。

<script type="text/javascript"> 
jQuery(document).ready(function() { 
    jQuery("#gridtable").jqGrid('setGridWidth',$myLayout.state.center.innerWidth - 2, 'true'); 
}); 
</script>

如果有一個以上的網格，可以使用已在表元素上定義的類（參見HTML上面的片段）訪問它們，然後運行在每一個上的方法resizeGrid。

來源

2011-05-18 13:25:35 Rosh

請填寫的jqGrid其容器

回答

相關問題