Tab选项卡,点击Tab选项卡，绑定事件.....

春风十里耶耶耶 2011-09-20 04:44:08 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">

    <title>Tab选项卡</title>

    <link rel="stylesheet" type="text/css" href="css/mflStyle.css" />

</head>



<script>

    function CallTheServer(arg,context) {



    <%= callBackReference %>



    }

 

    function setTab(n)

    {

        for(i=1;i<=6;i++)

        {

            var menu=document.getElementById("two"+i);

            var con=document.getElementById("zjj_two_"+i); 

            menu.className=i==n?"hover":"";

            con.style.display=i==n?"block":"none";

        } 

     }

</script>



<body>

    <form id="form1" runat="server">

 

        <td style="left: 101px; position: absolute; top: 350px; width: 801px;">

            <asp:ScriptManager ID="ScriptManager1" runat="server">

            </asp:ScriptManager>

            <div id="Tab2" style="width: 800px; height: 123px;">

                <div class="Menubox" style="height: 1px">

                    <ul class="topborder" style="width: 799px; height: 1px; top: 1px; left: 0px;">

                        <li id="two1" onclick="CallTheServer('1','')" style="width: 90px">Tab1</li>

                        <li id="two2" onclick="CallTheServer('2','')" style="width: 94px">Tab2</li>

                        <li id="two3" onclick="CallTheServer('3','')" style="width: 81px">Tab3</li>

                        <li id="two4" onclick="CallTheServer('4','')" style="width: 82px">Tab4</li>

                        <li id="two5" onclick="CallTheServer('5','')" style="width: 81px">Tab5</li>

                        <li id="two6" onclick="CallTheServer('6','')" style="width: 79px">Tab6</li>

                    </ul>

                </div>

                <div id="DIV1" class="Contentbox" style="width: 799px; height: 31px;">

                    <div id="zjj_two_1" style="text-align: left">

                        <asp:UpdatePanel ID="UpdatePanel1" runat="server">

                            <ContentTemplate>

                                <asp:GridView ID="GridView1" runat="server">

                                

                                </asp:GridView>

                            </ContentTemplate>

                        </asp:UpdatePanel>

                         </div>

                    <div id="zjj_two_2" style="display: none; text-align: left">

                        2</div>

                    <div id="zjj_two_3" style="display: none; text-align: left">

                        3</div>

                    <div id="zjj_two_4" style="display: none; text-align: left;">

                        4</div>

                    <div id="zjj_two_5" style="display: none; text-align: left;">

                        5</div>

                    <div id="zjj_two_6" style="display: none; text-align: left;">

                        6</div>

                </div>

            </div>

        </td>

    </form>

</body>






public partial class index : System.Web.UI.Page,ICallbackEventHandler

{

    public string callBackReference;

    private string num;

    protected void Page_Load(object sender, EventArgs e)

    {

        if (!IsPostBack)

        {

            this.callBackReference = this.Page.ClientScript.GetCallbackEventReference(this, "arg", "setTab", "context");

        }

    }

    

    public string GetCallbackResult()

    {

        return this.num;

    }



    public void RaiseCallbackEvent(string eventArgument)

    {

        if (string.IsNullOrEmpty(eventArgument))

        {

            this.num = "0";

        }

        else

        {

            //这里根据值写绑定事件，但是没有用.

            this.num =  eventArgument;

        }

    }



}



1.目前Tab选项卡中存在6项（Tab1，Tab2，...Tab6)(每项都对应一个GridView）,我想实现的效果就是当我点击tab1时，Tab1 下面的GridView手动绑定数据，其余的5个GridView都是空的（也就是没有绑定数据），也就是不想同时绑定6个GridView.
2.上面的代码只有1个GridVidw，但实际上是有6个GridView存在...

3.请您根据上面的Code，給予相应提示或思路...

谢谢...
...全文
621 19 打赏 收藏 转发到动态 举报
写回复
用AI写文章
19 条回复
切换为时间正序
请发表友善的回复…
发表回复
春风十里耶耶耶 2011-09-21
  • 打赏
  • 举报
 回复
[Quote=引用 18 楼 dhjyxia01 的回复:]
引用 16 楼 dygaalove 的回复:
这种方法是可以解决数据绑定的问题，但是选项卡的样式不能变啊，这种方法我尝试添加样式，但是没有效果..

最好的方法就是在我贴代码的部分，指出绑定的事件写在哪里就好了..


而且我不想使用onclick="showGridView(6)" 这种方式，我就是为了避免这个问题，才使用了上面的js调用C#方法...


innerGridV……
[/Quote]

谢谢你，下午再好好研究下...
dhjyxia01 2011-09-21
  • 打赏
  • 举报
 回复
[Quote=引用 16 楼 dygaalove 的回复:]
这种方法是可以解决数据绑定的问题，但是选项卡的样式不能变啊，这种方法我尝试添加样式，但是没有效果..

最好的方法就是在我贴代码的部分，指出绑定的事件写在哪里就好了..


而且我不想使用onclick="showGridView(6)" 这种方式，我就是为了避免这个问题，才使用了上面的js调用C#方法...

[/Quote]
innerGridView.location = "GridViewPage.aspx?flag=" + GVNum;
这个就是事件
每次点击iframe里的页面都会重新定位
然后根据传的参数不同去做处理
我这只是个思路
具体样式什么的你可以自己随便改的
erytbc 2011-09-21
  • 打赏
  • 举报
 回复
http://hi.baidu.com/analyzecode/blog/item/b5fdf1110a5be2c6a7ef3fb1.html
春风十里耶耶耶 2011-09-21
  • 打赏
  • 举报
 回复
[Quote=引用 15 楼 dhjyxia01 的回复:]
HTML code

<head id="Head1" runat="server">
<title>Tab选项卡</title>



<script language="javascript" type="text/javascript">
function showGridView(GVNum) {
innerGridView.locatio……
[/Quote]
这种方法是可以解决数据绑定的问题，但是选项卡的样式不能变啊，这种方法我尝试添加样式，但是没有效果..

最好的方法就是在我贴代码的部分，指出绑定的事件写在哪里就好了..


而且我不想使用onclick="showGridView(6)" 这种方式，我就是为了避免这个问题，才使用了上面的js调用C#方法...
dhjyxia01 2011-09-21
  • 打赏
  • 举报
 回复 


<head id="Head1" runat="server">

    <title>Tab选项卡</title>







<script language="javascript" type="text/javascript">

    function showGridView(GVNum) {

        innerGridView.location = "GridViewPage.aspx?flag=" + GVNum;

    }

 

    

</script>

</head>

<body>

    <form id="form1" runat="server">

 <table width="100%"><tr>

        <td >

          <span id = "two1" style="width:120px; cursor:hand; background-color:#eeeeee" onclick="showGridView(1)" >Tab1</span>

          <span id = "two2" style="width:120px; cursor:hand; background-color:#eeeeee" onclick="showGridView(2)" >Tab2</span>

          <span id = "two3" style="width:120px; cursor:hand; background-color:#eeeeee"  onclick="showGridView(3)">Tab3</span>

          <span id = "two4" style="width:120px; cursor:hand; background-color:#eeeeee" onclick="showGridView(4)" >Tab4</span>

          <span id = "two5" style="width:120px; cursor:hand; background-color:#eeeeee" onclick="showGridView(5)" >Tab5</span>

          <span id = "two6" style="width:120px; cursor:hand; background-color:#eeeeee" onclick="showGridView(6)" >Tab6</span>

        </td>

        

        </tr>

        <tr><td>

        <iframe id = "innerGridView" width="100%" height="300px"></iframe>

        </td></tr>

        </table>

    </form>

</body>


简单写了一个
你只需要再建一个GridViewPage.aspx的页面
根据传过去的不同的flag绑定不同的数据就可以了
春风十里耶耶耶 2011-09-21
  • 打赏
  • 举报
 回复
[Quote=引用 13 楼 dhjyxia01 的回复:]
引用 10 楼 dygaalove 的回复:

引用 3 楼 dhjyxia01 的回复:
ajax应该可以吧
或者就是搞一个IFRAME
然后把gridview放到新的页面里去
在选项卡的onclick事件改变iframe的页面
至于是一个页面传参数还是做6个页面就随便你了


那我现在是怎么做的，你说用IFRAME，我现在DIV存放，道理还不是一样...


不一样呀……
[/Quote]

可能是我理解错了啊，但问题现在不是使用IFrame或DIV问题，而是不能数据绑定啊..
dhjyxia01 2011-09-21
  • 打赏
  • 举报
 回复
[Quote=引用 10 楼 dygaalove 的回复:]

引用 3 楼 dhjyxia01 的回复:
ajax应该可以吧
或者就是搞一个IFRAME
然后把gridview放到新的页面里去
在选项卡的onclick事件改变iframe的页面
至于是一个页面传参数还是做6个页面就随便你了


那我现在是怎么做的，你说用IFRAME，我现在DIV存放，道理还不是一样...
[/Quote]

不一样呀，用IFRAME的话每次点击只会改变IFRAME里面的页面
不用整个页面提交
效果和AJAX差不多
ajaxtop 2011-09-21
  • 打赏
  • 举报
 回复
楼主，你就不能用一个tab之类的控件啊，这样也太吓人了吧

那你就用jquery,控制这几个层的显示

然后后置代码中根据传入的tabindex控制调用相应方法填充
春风十里耶耶耶 2011-09-21
  • 打赏
  • 举报
 回复
求帮助，求解答，求关注...
春风十里耶耶耶 2011-09-21
  • 打赏
  • 举报
 回复
[Quote=引用 3 楼 dhjyxia01 的回复:]
ajax应该可以吧
或者就是搞一个IFRAME
然后把gridview放到新的页面里去
在选项卡的onclick事件改变iframe的页面
至于是一个页面传参数还是做6个页面就随便你了
[/Quote]

那我现在是怎么做的，你说用IFRAME，我现在DIV存放，道理还不是一样...
春风十里耶耶耶 2011-09-21
  • 打赏
  • 举报
 回复
[Quote=引用 4 楼 chenyingshu880603 的回复:]
在点击tab1的时候把需要的帮顶上去，点击tab2的时候把之前的remove掉，或是清楚掉，把需要的绑定上去，这个不难。根据点击事件来判断要帮顶的具体内容就行
[/Quote]

这个思路，我也清楚啊，问题是 根据点击事件来判断要帮顶的具体内容就行 这个在哪里根据？？


我说过了，上面可以找到明确的值，但是绑定起不到作用，所以才发帖求助，思路我知道啦...
摩羯伙夫 2011-09-20
  • 打赏
  • 举报
 回复
把已经查询出来的数据放到session中，第二次就不要到数据库中取直接到session中取

在Page_Unload事件中将session移除

good luck
摩羯伙夫 2011-09-20
  • 打赏
  • 举报
 回复
这个曾经做过 也是用的ASPNETAjax ajax框架，框架里面有一个tab控件的 你用哪个控件

控件里面有很多事情的，当时好像用的是 点击tab触发一个事件（具体名字忘记了），然后在事件里面写绑定方法


zzr494684778 2011-09-20
  • 打赏
  • 举报
 回复
点击Tab1时传一个参数，从后台得到这个参数然后重新绑定，
jhdxhj 2011-09-20
  • 打赏
  • 举报
 回复
[Quote=引用 4 楼 chenyingshu880603 的回复:]
在点击tab1的时候把需要的帮顶上去，点击tab2的时候把之前的remove掉，或是清楚掉，把需要的绑定上去，这个不难。根据点击事件来判断要帮顶的具体内容就行
[/Quote]
同意
Gemini Dean 2011-09-20
  • 打赏
  • 举报
 回复
在点击tab1的时候把需要的帮顶上去，点击tab2的时候把之前的remove掉，或是清楚掉，把需要的绑定上去，这个不难。根据点击事件来判断要帮顶的具体内容就行
dhjyxia01 2011-09-20
  • 打赏
  • 举报
 回复
ajax应该可以吧
或者就是搞一个IFRAME
然后把gridview放到新的页面里去
在选项卡的onclick事件改变iframe的页面
至于是一个页面传参数还是做6个页面就随便你了
lilianghuaer 2011-09-20
  • 打赏
  • 举报
 回复
看起来有点困难啊！！！
春风十里耶耶耶 2011-09-20
  • 打赏
  • 举报
 回复
沙发自己坐，下班就没人了？？
用jQuery事件写Tab选项卡
瞎写的，不喜勿喷。
【vue案例】vue实现tab选项卡
vue实现tab选项卡 文章目录vue实现tab选项卡一、效果图展示二、静态页面结构csshtmljavascript三、vue实现1、将静态结构和样式重构为基于vue模板语法的形式vue实现ul标签渲染2、处理事件绑定和js控制逻辑vue实现点击切换四、完整代码 一、效果图展示 实现的效果图如下： 二、静态页面结构 css <style> *{ margin: 0; padding: 0; box-sizing: border-box; } .tab { wi
Bootstrap给Tab选项卡添加自定义点击事件
Tab选项卡添加自定义点击事件
uni-app中构建tab选项卡
uni-app中构建tab选项卡 手机APP最常见的莫过于tab选项卡，其特点是可以无缝滚动，且不会出现滚动条。有点类似轮播，但是比轮播更灵活。 1.scroll-view uni-app官方文档为我们提供了scroll-view。来实现横向或竖向的滚动 横向 <scroll-view scroll-x="true" class="h-tab" :scroll-left="scroll_le...
父组件菜单栏选项卡与子组件选中tab选项卡绑定
父组件菜单栏选项卡与子组件选中tab选项卡绑定
.NET社区

62,046

社区成员

669,049

社区内容

发帖
与我相关
我的任务
社区描述
.NET技术交流专区
javascript云原生 企业社区
社区管理员
  • ASP.NET
  • .Net开发者社区
  • R小R
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告

.NET 社区是一个围绕开源 .NET 的开放、热情、创新、包容的技术社区。社区致力于为广大 .NET 爱好者提供一个良好的知识共享、协同互助的 .NET 技术交流环境。我们尊重不同意见，支持健康理性的辩论和互动，反对歧视和攻击。

希望和大家一起共同营造一个活跃、友好的社区氛围。

试试用AI创作助手写篇文章吧

+ 用AI写文章