Question

我在jquery ui标签的第三个标签中有一个jqgrid，网格是可见的，但是尺寸远小于其通常的尺寸。当我将网格移动到第一个选项卡时，我没有这个问题。我读到并知道隐藏的标签没有反映宽度，并且看到了类似的问题：jqgrid and jquery tabs : loading text doesn't hide

我想在标签的select事件中点击第三个标签时加载我的网格，以便jqgrid加载其原始大小。这是我在usercontrol页面中包含选项卡的代码。我还应该补充一点，每个标签都有自己的.ascx页面（我不知道这是否会有所不同）。

$(document).ready(function () {
    $("#tabstest").tabs({
        "select": function (event, ui) {
            switch (ui.index) {
            case 2:         
                alert(" this is the test cases ");
                $("#list")[0].grid.hDiv.reloadGrid;
                $("#list")[0].grid.reloadGrid;
                break;
            }
        }
    });
});

<div id="tabstest">
    <ul>
        <li><a href="#tabs-1">first</a></li>
        <li><a href="#tabs-2">second</a></li>
        <li><a href="#tabs-3">Third </a></li>
    </ul>


    <div id="tabs-1">
        <% Html.RenderPartial("First", ViewData);  %>            
    </div>

    <div id="tabs-2">
        <% Html.RenderPartial("second");  %>            
    </div>

    <div id="tabs-3">
        <% Html.RenderPartial("Third");  %>            
    </div>


</div>

它没有正确加载我的网格，但是警报字符串显示，所以我确定我输入了这个select事件。以前有没有人有这种经历？任何其他提示将不胜感激。

谢谢

Answer 1

不确定你的案例中的那些方法究竟是怎么做的（正如Oleg所说的那样），但你可以随时在网格加载后调整样式：

$(document).ready(function () {
    $("#tabstest").tabs({
        "select": function (event, ui) {
            switch (ui.index) {
            case 2:         
                $('#grid').css('width', '100%');  // Something like this
                break;
            }
        }
    });
});

Answer 2

这是答案，我希望有所帮助

$(document).ready(function () { 
$("#tabstest").tabs({ 
    "select": function (event, ui) { 
        switch (ui.index) { 
        case 2:          
           $("#tabstest").tabs( "load" , 2 )
            break; 
        } 
    } 
});

}）;

usercontrol中的jqgrid宽度大小问题

2 个答案: