Question

我得到了一些我需要改变的代码。它是由别人建造的，而且不是很整洁......

有一个javascript tabcontrol，包含4个选项卡，其中包含gridviews。所有4个网格视图都是在页面加载期间构建的，但我希望它们在您激活选项卡时加载（因为可以观看侧面，而您不需要特定的网格视图来查看）

所以，我的问题是：如何从javascript标签调用一个事件（加载gridview）？

生成标签的方式:(生成的代码，我知道，非常糟糕）

var obj = 0;
var oid = 0;
var otb = 0;
var myTabs = new Array();
var myTabitems = new Array();
var myTabitem = new Array();
var myTabContent = new Array();
var myLists = new Array();

function showTabContent(tab)
{
    tb = tab.obj;
    id = tab.nr;
    if (myTabs[tb].oid != -1)
    {
        myTabs[tb].myTabContent[myTabs[tb].oid].style.display = 'none';
        myTabs[tb].myTabitem[myTabs[tb].oid].className -= " active";
    }
    myTabs[tb].myTabContent[id].style.display = 'block';
    myTabs[tb].myTabitem[id].className += " active";
    myTabs[tb].oid = id;
}

function boTabs()
{
    var myBlocks = new Array();
    myBlocks = document.getElementsByTagName("div");
    var stopit = myBlocks.length;
    for (var g = 0; g < stopit; g++)
    {
        if (myBlocks[g].className == "tabs")
        {
            myTabs.push(myBlocks[g]);
        }
    }
    var stopit2 = myTabs.length;
    for (var i = 0; i < stopit2; i++)
    {
        myTabs[i].myLists = myTabs[i].getElementsByTagName("ul");
        if (myTabs[i].myLists[0].className == "tabs")
        {
            myTabs[i].myTabitems = myTabs[i].myLists[0].getElementsByTagName("li");
        }
        var stopit3 = myTabs[i].myTabitems.length;
        myTabs[i].obj = i;
        myTabs[i].myTabitem = new Array();
        myTabs[i].myTabContent = new Array();
        for (var j = 0; j < stopit3; j++)
        {
            myTabs[i].myTabitem.push(myTabs[i].myTabitems[j]);
            myTabs[i].myTabitem[j].nr = j; myTabs[i].myTabitem[j].obj = i;
            myTabs[i].myTabitem[j].onclick = function() { showTabContent(this); };
        }
        var myTabDivs = myTabs[i].getElementsByTagName("div");
        for (var j = 0; j < myTabDivs.length; j++)
        {
            if (myTabDivs[j].className == "tabcontent")
            {
                myTabs[i].myTabContent.push(myTabDivs[j]);

        } 
    }
    myTabs[i].myTabitem[0].className += " active";
    myTabs[i].myTabContent[0].style.display = 'block';
    myTabs[i].oid = 0;
    myTabDivs = null;
}
myBlocks = null;

} onload = boTabs;

Answer 1

我会完全更改它以使用JQuery Tabs和JQuery AJAX来加载网格

Answer 2

如果你想要一个JS解决方案，你必须使用JS代码自己构建gridview表...如果你想让服务器完成工作，你需要一个UpdatePanel，并使用客户端_doPostBack方法。如果您喜欢这种方法，可以将Ajax Control Toolkit选项卡容器配置为每当选项卡更改时回发到服务器，您可以使用更新面板包装此控件，看起来所有操作都是使用JS代码完成的。或者，您也可以使用绑定gridview的Web服务并返回HTML ...尚未尝试过，但看到它已完成。

HTH，如果你让我知道你喜欢什么选项，我可以相应更新。

Answer 3

我现在得到了JQuery和CSS制作的tabcontrol。此时所有4个网格视图都绑定在Page_Load上，但是，由于在gridview后面运行te sproc需要时间，因此需要几秒钟。因此我想在tabclick上加载它们...... UpdatePanel似乎是最好的方式......

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;
    });
});

Javascript标签：呼叫事件onclick

3 个答案: