标签页实现方法

最新推荐文章于 2024-05-21 07:00:00 发布

phyllis_icic

最新推荐文章于 2024-05-21 07:00:00 发布

阅读量1.1k

点赞数 1

文章标签：标签页分签 tag

本文链接：https://blog.csdn.net/phyllis_icic/article/details/79261736

版权

第一次写标签页特别头疼，因为是小白啥也不会，最后通过一个中间页面进行跳转实现。最近又遇到一个，要做标签页，要求三个页面的数据分别对应数据库内同一张表的同一条字段不同内容，那我之前的办法就不好使，反复尝试，反复失败，最后心肥意冷的我求助公司大佬才做出来……

今天我就把两种方法罗列出来，希望当跟我一样的菜鸟，也遇到这个问题不会急的跟我一样抓耳挠腮

 
 方法一：效果图：（ 
 适用于两个标签页无关联，各自执行各自操作） 

  第一步：框架Dutysetting.aspx（即两个div块） 

  <script type="text/javascript" language="javascript" >
        var isLoad1 = false;
        var isLoad2 = false;

        $(function () {
            $(".easyui-tabs").tabs({
                height: $(window).height(),
                width: $(window).width(),
                border: false,
                onSelect: function (title) {
                    switch (title) {
                        case "假期安排":
                            if (!isLoad1)
                                $("#Iframe1").attr("src", "DutyHoli.aspx");
                            isLoad1 = true;
                            break;

                        case "角色信息":
                            if (!isLoad2)
                                $("#Iframe2").attr("src", "DutyPer.aspx");
                            isLoad2 = true;
                            break;

                    }
                }
            });
        })

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="tt" class="easyui-tabs" style="width: 500px; height: 250px;">
        <div title="假期安排" style="padding: 0px; overflow: hidden">
            <iframe id="Iframe1" frameborder="0" style="height: 100%; width: 100%; overflow: auto">
            </iframe>
        </div>
 
        <div title="角色信息" style="padding: 0px; overflow: hidden">
            <iframe id="Iframe2" frameborder="0" style="height: 100%; width: 100%; overflow: auto">
            </iframe>
        </div>


    </div>
    </form>
</body>
</html>

   第二步： 
 

   1.DutyHoli.aspx（即：假期安排页面） 
 

   正常构架就好 
 

   2.DutyPer.aspx（即角色信息界面）。 
 

   截图省略，如1正常构架就好 
 

 
  方法二：效果图：（ 
  适用于两个标签页有关联，比如属于同一张表的同一条数据） 
 
   该例子的标签页以弹框形式展现，且执行保存三个标签页数据

   第一步：NurseCQI.aspx页面，新增按钮点击js事件 
 

<a class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-add'"
    runat="server" οnclick="PortalItem()" id="Add">新增</a>

<%--js中调用NurseCQIInfo.aspx的LinkSave事件--%>
   
   
    
    function PortalItem() {
   
   
   
   
    
                art.dialog.open('Nurse/symposium/NurseCQIInfo.aspx', {
   
   
   
   
    
                    title: "新增",
   
   
   
   
    
                    width: "950px",
   
   
   
   
    
                    height: "450px",
   
   
   
   
    
                    padding: 0,
   
   
   
   
    
                    cancelVal: '关闭',
   
   
   
   
    
                    cancel: true,
   
   
   
   
    
                    ok: function () {
   
   
   
   
    
                        var iframe = this.iframe.contentWindow;
   
   
   
   
    
                        iframe.document.getElementById('LinkSave').click();
   
   
   
   
    
                        return false;
   
   
   
   
    
                    }
   
   
   
   
    
                });
   
   
   
   
    
            }

   第二步： 
  NurseCQIInfo 
  .aspx页面，搭建与方法 
 

前台aspx：

<%--该事件控制延迟，防止页面显示不完全而出错--%>
   
   
   
   
    
     $(function () {
   
   
   
   
    
                setTimeout(mm, 100)
   
   
   
   
    
            })
   
   
   
   

   
   
   
   

   
   
   
   
    
            function mm() {
   
   
   
   
    
                $(".easyui-tabs").tabs({
   
   
   
   
    
                    height: $(window).height(),
   
   
   
   
    
                    width: $(window).width(),
   
   
   
   
    
                    border: false
   
   
   
   
    
                });
   
   
   
   
    
            }

function SaveInfo() {
            var win = art.dialog.open.origin;
            win.window.loadgrid();
            art.dialog.close();
        }

后台aspx.cs：

protected void btn_save_Click(object sender, EventArgs e)
        {
            DataRow row = null;
            string KeyID = "";
            if (!string.IsNullOrWhiteSpace(_ID))//修改
            {
                KeyID = _ID;
                row = bll.GetCQIByID(_ID).Tables[0].Rows[0];


            }
            else//新增
            {
                row = bll.GetCQIByID(_ID).Tables[0].NewRow();
                row["ID"] = CommonBLL.NewID("Nurse_CQI");//新增时的主键ID
            }
            row["DeptID"] = txtDeptID.Value.Trim();
            row["DeptName"] = txtDeptName.Value.Trim();
            row["ProjectYear"] = Request["txtProjectYear"];

            if (!string.IsNullOrWhiteSpace(_ID))//修改
            {

                bll.UpdateCQI(row);//保存事件 

                YX.Common.JScript.RunJSString(this, "SaveInfo();");//SaveInfo()调用前台方法

            }
            else
            {
                bll.InsertCQI(row);
                YX.Common.JScript.RunJSString(this, "SaveInfo();");

            }
        }

注： 
 
   YX.Common.JScript.RunJSString(this, " 
  SaveInfo();"); 
  //SaveInfo()调用前台方法 
 
 该方法为公司大佬封装的方法，同学们用不了，可换成具有相同功能的操作方法. 

  OVER……

phyllis_icic

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
标签页实现方法

第一次写标签页特别头疼，因为是小白啥也不会，最后通过一个中间页面进行跳转实现。最近又遇到一个，要做标签页，要求三个页面的数据分别对应数据库内同一张表的同一条字段不同内容，那我之前的办法就不好使，反复尝试，反复失败，最后心肥意冷的我求助公司大佬才做出来……今天我就把两种方法罗列出来，希望当跟我一样的菜鸟，也遇到这个问题不会急的跟我一样抓耳挠腮方法一：效果图：（适用于两个标签页无关联，各自
复制链接

扫一扫