JQuery tabcontrol：加载gridview

Question

我有一个 JQuery/CSS tabcontrol，它当前处理 4 个选项卡，包含 gridviews。 我希望当您点击选项卡时加载网格视图。这减少了页面的加载时间，因为某些 gridview 的存储过程需要一些时间。 网格视图需要加载一次，不必在每次打开特定选项卡时更新它们。

JQuery：

$(document).ready(function() 
{ 
    //When page loads... 
    $(".tab_content").hide(); //Hide all content 
    $("ul.tabs li:first").addClass("active").show(); //Activate first tab 
    $(".tab_content:first").show(); //Show first tab content 

    //On Click Event 
    $("ul.tabs li").click(function() 
    { 
        $("ul.tabs li").removeClass("active"); //Remove any "active" class 
        $(this).addClass("active"); //Add "active" class to selected tab 
        $(".tab_content").hide(); //Hide all tab content 

        var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content 
        $(activeTab).fadeIn(); //Fade in the active ID content 
        return false; 
    }); 
});

现在我刚刚开始使用JQuery，所以我真的不知道如何处理这个...... 有人有想法吗？

Answer 1

我有类似的问题。我所做的是创建一个按钮来加载 gridview，然后在 jquery 选项卡的选择事件中单击这些按钮。像这样的事情：

$("#tabs").tabs({
        select: function (event, ui) {
            switch (ui.index) {
                case 0:
                    $("#<%= btnOne.ClientID %>").click();
                    break;
                case 1:
                    $("#<%= btnTwo.ClientID %>").click();
                    break;
                case 2:
                    $("#<%= btnThree.ClientID %>").click();
                    break;
            }
        }
 });

Answer 2

如果您想在服务器上执行所有操作，则需要一个更新面板，并使用 __doPostBack 强制回发，以便服务器可以处理请求...您也可以使用 $.ajax 来执行此操作。否则

，所有操作都在客户端上完成，将数据从 Web 服务流式传输到客户端，并在客户端上构建表。

HTH。