$("#tabs").tabs({
show: function (event, ui) {
if (ui.index == 1){
$.get('/Account/SomeView', function (data) {
//alert(data);
$('#tabs-2').html(data);
});
}
},
selected: 0,
});
<div id="tabs">
<ul>
<li><a href="#tabs-1">TAB 1</a></li>
<li><a href="#tabs-2">TAB 2</a></li>
<li><a href="#tabs-3">TAB 3</a></li>
</ul>
<div id="tabs-1">
@{ Html.RenderPartial("View"); }
</div>
<div id="tabs-2">
</div>
<div id="tabs-3">
@{ Html.RenderPartial("View2"); }
</div>
</div>
问题是当我selected:1
没有问题 ajax 数据用于网格加载时,但是当我这样做selected:0 or 2
并移动到选项卡 2 即索引选项卡索引 1 时,我看到空白没有网格,尽管来自服务器的数据即将到来。
//alert(data);
我已经调试过,每次单击第二个选项卡时,来自服务器的数据都是我想要的,但为什么没有填充网格。
在 jquery ui tab docs 我读过这个
Any component that requires some dimensional computation for its initialization won't work in a hidden tab, because the tab panel itself is hidden via display: none so that any elements inside won't report their actual width and height (0 in most browsers).
这与我的问题有关吗?或者可能是什么问题?
更新:这是我输入警报(数据)时得到的数据
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery('#office').jqGrid({
autowidth:false,
caption:'office Grid',
datatype:'json',
emptyrecords:'No Records Found',
gridview:true,
height:150,
pager:'#Officepager',
pgbuttons:false,
pgtext:'',
rowNum:-1,
sortname:'City',
toolbar:[true,'bottom'],
url:'/Account/GetOffice/',
editurl:'/Account/ModifyOffice/',
viewrecords:true,
width:'1160',
colModel: [
{
name:'OfficeId',
hidden:true,
label:'Id',
index:'OfficeId',
editable:true,
editrules:{edithidden:true},
editoptions:{disabled:'disabled'}
},{
name:'OfficeName',
label:'Office Name',
index:'OfficeName',
editable:true,
editrules:{required:true},
},{
name:'CompanyName',
label:'Company Name',
width:50,
index:'CompanyName',
editable:true,
edittype:'select',
editoptions:{value:getCompanyName()}
},{
name:'Address1',
hidden:true,
label:'Address 1',
index:'Address1',
editable:true,
editrules:{edithidden:true,required:true},
},{
name:'Address2',
hidden:true,
label:'Address 2',
index:'Address2',
editable:true,
editrules:{edithidden:true},
},{
name:'Address',
label:'Address',
index:'Address',
editable:false,
},{
name:'City',
label:'City',
index:'City',
editable:true,
},{
name:'State',
hidden:false,
label:'State',
index:'State',
editable:true,
editrules:{required:true},
}]
});
jQuery('#office').jqGrid('navGrid',"#Officepager",{edit:true,add:true,del:true,search:false,refresh:true},{width:550,closeAfterEdit:true,beforeShowForm:function(FrmGrid_office){$('#tr_OfficId').css('display','none');},afterSubmit:processAddEdit},{width:550,beforeShowForm:function(FrmGrid_office){$('#tr_OfficId').css('display','none');},reloadAfterSubmit:true,errorTextFormat:errorHandle,afterSubmit:processAddEdit});
jQuery('#office').jqGrid('filterToolbar', {stringResult:true, searchOnEnter:false});
});
</script>
<table id="office"></table><div id="Officepager"></div>
<script>
function getCompanyName() {
var mbsCompName = $.ajax({
url: '/Account/GetCompanyName',
async: false
}).responseText;
return mbsCompName.substring(1, mbsCompName.length - 1);
}
function errorHandle(data) {
return '<span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;"></span>' +
"<strong>Error:<strong></br>Status: '" + data.statusText + "'. Error code: " + data.status;
}
function processAddEdit(response, postdata) {
var json = response.responseText;
var result = eval("(" + json + ")");
return [result.sc, result.msg, null];
}
</script>