JQuery tabcontrol：加载gridview

Posted 2023-05-09

【中文标题】JQuery tabcontrol：加载gridview

【英文标题】：JQuery tabcontrol: load gridview

【发布时间】：2011-02-12 22:15:03

【问题描述】：

我有一个 JQuery/CSS 选项卡控件，它目前处理 4 个选项卡，包含网格视图。 当您点击选项卡时，我希望加载 gridview。这减少了页面的加载时间，因为某些 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，所以我真的不知道如何处理这个...... 有什么想法吗？

【参考方案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;
            
        
 );

【讨论】：

哇，这真的很有创意！谢谢！关于按钮，你做到了button.visible = false?

【参考方案2】：

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

否则，全部在客户端完成，将数据从 Web 服务流式传输到客户端，然后在客户端上构建表。

HTH。

【讨论】：

好吧，我从来没有混合过两者（JQuery 和服务器），但你想尝试的是发出 __doPostBack("", " ")，这会填充可通过 Request.Form 访问的 __EVENTTARGET 和 __EVENTARGUMENT 字段，因此您可以使用它们来确定在回发中填充哪个网格。使用 updatemode="always" 将您的选项卡/网格包裹在一个大的更新面板中（应该是默认设置）。