zoukankan      html  css  js  c++  java
  • JavaScript提高:005:ASP.NET使用easyUI TABS标签显示问题

    前面使用easy ui来实现了一个tabs标签(http://blog.csdn.net/yysyangyangyangshan/article/details/38307477),只是在ASP.NET中使用时发现了一个问题。


    大家都知道。asp.net页面的控件。当控件的事件不是使用 "return js函数();"时,或者控件注冊的是后台的事件,那么整个页面会又一次载入的。此时这个easy ui实现的tabs标签,总是回到了第一个tab页。

    尽管能够借助ajax和jQuery的方法,来实现前后台交互
    ($.ajax方式前后台交互:http://blog.csdn.net/yysyangyangyangshan/article/details/22438077
    $.post方式前后台交互:http://blog.csdn.net/yysyangyangyangshan/article/details/22755007)。
    能够把后台的数据转换为json字符串形式,传递给前台。前台经过拆分还原出内容,赋值给相应的控件。这也不失为一种方式。
    只是。javascript毕竟仅仅是一个辅助的语言。在ASP.NET中假设把全部的前后台交互都用js这样的方式实现,那是不可能的,那就成了舍本逐末。毕竟是用ASP.NET的事件机制。还是非常方便的。


    针对这个tabs问题。该怎样解决呢?
    思路非常easy,无非就是记住上次选中的tab页,然后当页面刷新时读取出上次的tab,在初始化页面的时候,强制显示指定的tab页。
    这里有几个步骤比較重要:
    1、记录选中的tab;
    2、读取指定的tab。
    3、显示指定的tab。




    关于用到的easyui的js以及样式文件,前文已经说过了(http://blog.csdn.net/yysyangyangyangshan/article/details/38306591)。


    直接看全部的代码:
    前台代码例如以下:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <link href="Scripts/EasyUI/themes/icon.css" rel="stylesheet" type="text/css" />
        <link href="Scripts/EasyUI/themes/default/easyui.css" rel="stylesheet" type="text/css" />
        <script src="Scripts/EasyUI/jquery-1.8.0.min.js" type="text/javascript"></script>
        <script src="Scripts/EasyUI/jquery.easyui.min.js" type="text/javascript"></script>
        <script src="Scripts/EasyUI/easyui-lang-zh_CN.js" type="text/javascript"></script>
        <script src="Scripts/Common.js" type="text/javascript"></script>
        <script src="Scripts/Ajax.js" type="text/javascript"></script>
    </head>
    <body>
    <form id="form1" runat="server" >
      <div id="tabTop">
        <div title="标签一" runat="server">
          <table>
           <tr>
            <td>
             <asp:Button ID="btn1" runat="server" Text="点击1" OnClick="Tab1_Button_Click"/>
            </td>
           </tr>
          </table>
        </div>
        <div title="标签二" runat="server">
          <table>
           <tr>
            <td>
             <asp:Button ID="btn2" runat="server" Text="点击2"  OnClick="Tab2_Button_Click"/>
            </td>
           </tr>
          </table>
        </div>
      </div>
      </form>
    </body>
    
    
     <script type="text/javascript">
    
    
         $('#tabTop').tabs({
              $("#tabTop").parent().width(),
             height: "auto",
             onSelect: function (title) {
                 //这是默认的选中事件,可是当运行了pageload这个也会运行
             }
         });
         //初始化—始终显示后台保存的标签
         $(document).ready(function () {
             var tabTitle = parseInt("<%=GetSelectedTab()%>");
             if (tabTitle != null && tabTitle >=0) {
                 $("#tabTop").tabs("select", tabTitle);
             }
    
    
             $('#tabTop').bind('click', function () {
                 buttonTabHeadClick();
             });
         });
    
    
         //标签页点击事件
         function buttonTabHeadClick() {
    
    
             var title = parseInt($('.tabs-selected').index());
             var oldTitle =parseInt("<%=GetSelectedTab()%>");
             if ( oldTitle>=0 && title == oldTitle) {
                 return false;
             }
             var selectObj = new Object();
             selectObj.SelectTabTitle = title;
             selectObj.OperateType = "TabTitle";
    
    
             var htmlObjects = $.ajax({
                 type: "POST",
                 data: selectObj,
                 async: true,
                 success: function (result) {
                 },
                 error: function (result) {
                 }
             });
             return false;
         }
      </script>
    </html>

    $(document).ready(function ():这里是初始化页面时运行的方法。在这里读取之前保存的tab页的索引。然后让tabs显示保存的那个索引的tab;同一时候还绑定了一个tab标签的click事件;
     function buttonTabHeadClick():这个函数,就是当tab标签被选中时记录当前标签的索引,此处用后台的一个静态变量来保存的;
     "<%=GetSelectedTab()%>":完毕前台调用后台的方法。
     两个按钮 点击1和点击2 是測试用的,假设不做不论什么处理。每当按钮点击时,tabs总会显示第一个了。


     
     后台代码:

     public partial class _Default : System.Web.UI.Page
        {
            protected static string SelectTabTitle = "0";
    
    
            protected void Page_Load(object sender, EventArgs e)
            {
                if (!IsPostBack)
                {
    
    
                }
    
    
                switch (Request["OperateType"])
                {
                    case "TabTitle":
                        SetSelectedTab();
                        break;
    
    
                    default:
    
    
                        break;
                }
            }
            /// <summary>
            /// 保存选中的tab
            /// </summary>
            private void SetSelectedTab()
            {
                SelectTabTitle = Request["SelectTabTitle"];
            }
            /// <summary>
            /// 获取选中的tab
            /// </summary>
            /// <returns></returns>
            protected string GetSelectedTab()
            {
                return SelectTabTitle;
            }
    
    
            protected void Tab1_Button_Click(object sender, EventArgs e)
            {
    
    
            }
    
    
            protected void Tab2_Button_Click(object sender, EventArgs e)
            {
    
    
            }
        }
    效果例如以下:
     
     即使在标签2下点击按钮。页面刷新完后,依旧显示标签2。
     
     代码下载:http://download.csdn.net/detail/yysyangyangyangshan/7758201
  • 相关阅读:
    Spring---------ThreadLocal(线程变量副本)
    Spring----Spring的IoC容器
    Spring----IoC Service Provieder
    三种依赖注入的方式
    数据库并发操作可能出现的问题之---更新丢失
    有状态bean与无状态bean
    Spring Data JPA、 MyBatis与Hibernate简单对比
    spring-bean的生命周期
    TCP/IP详解--拥塞控制 & 慢开始、拥塞避免、快重传和快恢复。
    如何在云服务器创建maven私有仓库
  • 原文地址:https://www.cnblogs.com/yutingliuyl/p/6816562.html
Copyright © 2011-2022 走看看