jQuery笔记[0]——tabs中第二个tab里面jqGrid宽度的问题

问题描述：

<div id="achievement_content">
    <ul>
        <li><a href="#paper">tab0</a></li>
        <li><a href="#student">tab1</a></li>
    </ul>
    <div id="paper">
        <table id="paper_list"></table>
        <div id="paper_pager"></div>
    </div>
    <div id="student">
        <table id="student_list"></table>
        <div id="student_pager"></div>
    </div>
</div>

　　上面实现了两个tab，需要在js中 $("#achievement_content").tabs(); 初始化。下面的两个table分别用两个jqGrid实现。

　　但是具体实现的时候就发现，当两个jqGrid都是autowidth的时候，只有第一个tab里面的jqgrid可以自动expand，之后的就不可以。

 

参考资料：

　　http://stackoverflow.com/questions/2117687/jqgrid-and-jquery-ui-tabs-showing-grids-expanded-only-on-primary-tab-div

　　http://forestkqq.iteye.com/blog/671380

　　http://www.trirand.com/blog/?page_id=393/help/autowidth-with-jquery-tabs&value=ui.tabs.js%25251&search=1

问题原因：（参考）

　　“The default for tabs is that hidden tabs get "display:none". The result of that is that the container size is reported as zero.

　　So when the grid in the hidden container initializes, /its/ container has zero size, and it sizes itself accordingly.”

解决方法：

　　1.　　代码如下，但是没反应

$(document).ready(function() {
    var initialized = [false,false];
    $('#tabs').tabs
    (
        {
            show: function(event, ui)
                {
                    if(ui.index == 0 && !initialized[0])
                    {
                        creationGrid0();
                        initialized[0] = true;
                    }
                    else if(ui.index == 1 && !initialized[1])
                    {
                        creationGrid1();
                        initialized[1] = true;
                    }
                }
        }
    );
});

 

　　2.　找到了一个修改过的方法，改为.bind，依然没反应

$(document).ready(function() {
    var initialized = [false,false];
    $('#tabs').bind('tabsshow', function(event, ui) {  
                {
                    if(ui.index == 0 && !initialized[0])
                    {
                        creationGrid0();
                        initialized[0] = true;
                    }
                    else if(ui.index == 1 && !initialized[1])
                    {
                        creationGrid1();
                        initialized[1] = true;
                    }
                }
　　});

 

 3.　　以上两种都是经过验证的方法，但是不知道什么原因在我这不能实现。后来我决定放弃对tabs的设置，转而寻求一个更简单的方法

var tab_width = $("#tabs div.ui-tabs-panel:not(.ui-tabs-hide)").width();

来自上面stackflow的一个answer。然后在第二个jqGrid里面设置

width : tab_width,

问题解决。

P.S. tab_width是tab的宽度，赋值给jqGrid的时候会导致它稍宽（比第一个宽了两个像素）。加上一个

tab_width -= 2;

完美解决。修改分辨率之后依然可以实现。

 

问题总结：

　　坚持

　　另辟蹊径