Question

$("#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>

Answer 1

在html加载完成时调用jqgrid函数。

 load: function(event, ui) {
        $(ui.panel).delegate('a', 'click', function(event) {
            $(ui.panel).load(this.href, function(){
                $("#gridpanel").jqugrid({
                       ..................................
               })
            });
            event.preventDefault();
        });
    }

jquig ui tabs下的jqgrid只在我给它选项卡的选定索引时加载

1 个答案: