我爲jQuery UI選項卡對象添加了一些網格（jqgrid）。默認情況下展開的Tabs子項中的所有網格都完美顯示。但Tab節點中的網格並未默認展開，它永久顯示jqGrid小（jqgrid，autowidth = true）。有任何想法嗎？jqGrid和JQuery UI選項卡顯示僅在主選項卡（div）上展開的網格
謝謝！
見http://www.revolucion7.com/wp-content/uploads/2009/10/jqgridp1.JPG
在其他的話...
我有一個頁面上有兩個選項卡上每一個jqgrids。
這兩個jqgrid都有autowidth屬性設置，問題是當頁面加載第一個網格調整到容器的大小，但當我點擊第二個選項卡第二個網格不調整到容器的大小。
你如何初始化其他標籤上的jqGrids？你應該對它們進行初始化時使用show事件所示的標籤，例如：
jQuery(document).ready(function() {
var initialized = [false, false];
jQuery('#tabs').tabs({show: function(event, ui) {
if (ui.index == 0 && !initialized[0]){
// Initialize grid on second tab page here...
jQuery(NOMBRE_GRID).jqGrid({
url: '/Idiomas/DatosGrid/',
datatype: 'json',
mtype: 'GET',
height: 'auto',
multiselect: true,
autowidth: true,
colNames: ['Id', 'Nombre'],
colModel: [
{ name: 'id_idioma', index: 'id_idioma', width: 100, align: 'left',
formatter: 'showlink', formatoptions: { baseLinkUrl: '/Idiomas/', showAction: 'Edit', addParam: '' }
},
{ name: 'nombre', index: 'nombre', width: 100, align: 'left' }
],
pager: jQuery(NOMBRE_AREA_PAGINACION),
rowNum: tamanoPagina,
rowList: [5, 10, 15, 20],
sortname: 'nombre',
sortorder: 「asc」,
viewrecords: true,
caption: 'Idiomas'
}).navGrid(NOMBRE_AREA_PAGINACION, { edit: false, add: false, del: false, refresh: false, search: false });
});
} else if (ui.index == 1 && !initialized[1]){
// Initialize grid on second tab page here...
jQuery(NOMBRE_GRID_SELECCIONADOS).jqGrid({
url: '/Idiomas/DatosGrid/',
datatype: 'json',
mtype: 'GET',
height: 'auto',
multiselect: true,
autowidth: true,
colNames: ['Id', 'Nombre'],
colModel: [
{ name: 'id_idioma', index: 'id_idioma', width: 100, align: 'left',
formatter: 'showlink', formatoptions: { baseLinkUrl: '/Idiomas/', showAction: 'Edit', addParam: '' }
},
{ name: 'nombre', index: 'nombre', width: 100, align: 'left' }
],
sortname: 'nombre',
sortorder: 「asc」,
viewrecords: true,
caption: 'Idiomas'
});
initialized[ ui.index ] = true;
});
如果你正在做的這個方法，你還需要跟蹤時，每個網格初始化，所以你不要嘗試如果用戶點擊另一個選項卡，則再次創建它，然後單擊回到上一個選項卡。
其實，你可以把它簡單的通過增加一個調整大小的標籤顯示事件：
$('#tabs').tabs({ show: function(event, ui) {
if (grid = $('.ui-jqgrid-btable:visible')) {
grid.each(function(index) {
gridId = $(this).attr('id');
gridParentWidth = $('#gbox_' + gridId).parent().width();
$('#' + gridId).setGridWidth(gridParentWidth);
});
}
}});
有時候你不想在初始化顯示事件的所有數據的jqGrid的是類似的，可以被拉進一個請求。在這種情況下，可以設置所有jqgrids的寬度到可見一個
var tab_width = $("#tabs div.ui-tabs-panel:not(.ui-tabs-hide)").width();
初始化當每個的jqGrid的寬度參數然後設置爲這個值的寬度。
哇！多幹淨簡單的解決方案！我測試了設置'寬度：tab_width'並像魅力一樣工作。我喜歡它：D謝謝。 – diosney
我覺得這可能重複與this question
我已經打賭，這個問題後三年被問這個問題將被糾正，但我認爲這不是:)。我想上面更新賈斯廷的答案，但我最終決定離開它以前版本的兼容性的purpouses，如果我違反任何論壇規則，請讓我知道，我會更新上面的答案
由於變化在jQueryUI show event is now deprecated中應該重命名爲activate，而且new APIui.index現在替換爲ui.newTab.index()替換爲activate並替換爲ui.tab.index()替換create。
我還發現，我必須將函數綁定到create事件才能將網格放在第一個選項卡中。
總結起來，這裏的Justin's code更新的版本上面，希望有幫助，它爲我工作：
var initialized = [false,false,false];
$("#tabs").tabs({
create:function(event,ui){
var mytabindex = ui.tab.index()
if (mytabindex == 0 && !initialized[0]){
$("#grid0").jqGrid({
...
autowidth:true,
...
});
}
initialized[ mytabindex ] = true;
},
activate: function(event, ui) {
var mytabindex = ui.newTab.index()
if (mytabindex == 1 && !initialized[1]){
$("#grid1").jqGrid({
...
autowidth:true,
...
});
}
else if (mytabindex == 2 && !initialized[2]){
$("#grid2").jqGrid({
...
autowidth:true,
...
});
}
initialized[ mytabindex ] = true;
}
});
#grid,.ui-jqgrid,.ui-jqgrid-hdiv,.ui-jqgrid-view,.ui-jqgrid-titlebar,.ui-jqgrid-bdiv,.ui-jqgrid-pager
{
width: 100% !important;
}
嗨賈斯汀！ 感謝您回覆:-) 請參閱 上的代碼示例http://www.trirand.com/blog/?page_id=393/help/autowidth-with-jquery-tabs&value=ui.tabs.js% 25251＆search = 1 –
我已經更新了我的回答。這是否解決了這個問題？ –
是的。爲我工作...謝謝。 現在，如何刷新第2或第3標籤點擊第一個標籤？ 謝謝 –