iFrame左树目录

2024-05-14 19:48:43

iFrame左树目录

通讯录系统总结：这个通讯录系统的效果是父窗体放两个iframe，左边的iframe里存放的是树型目录，右边iframe里存放的是该目录下的子目录和目录下的所有联系人。当点击左边的树节点时，右边将获得对应的数据，这种效果，我想大部分的OA系统都是这样的实现的，左边是目录，右边是页面，左右实现联动。很经典的做法，这里总结一下，希望对大家有帮助。
父窗体页面放两个iframe
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>主框架</title>
    <script language="javascript">
function closethis()
{
  document.all.dir.style.display='none';
}
function openthis()
{
 document.all.dir.style.display='';
}
</script>
</head>
<body>
<table  border="0" width="100%" cellpadding="0" class="main-table">
  <tr>
         <td align="left" id=dir  style="width:23%">  
  <iframe id="menu" name="menu" src="PublicCategory.aspx" class="inset-table" width="300" height="600" frameborder="NO" border="0" framespacing="0"></iframe> //左边菜单，这里将放一棵树型目录                                                                                                                                                                                            
      </td> 
       <td width="2%" align=center><a href="closethis();"><=< /a><br><br><br><a href="javascript:openthis();">=></a></td>
      <td align="left" style="width:75%">
      <iframe id="Right" name="Right" src="PublicContectPersonList.aspx" class="outset-table" width="100%" height="600"  frameborder="NO" border="1" framespacing="0" noresize align=middle></iframe>// 右边详细页面，点击左边的树型目录得到  
      </td>                                                                                                                                                                                    
   </tr>                                                                                                                                                                                          
</table>
 </body>
</html>
左边目录子页面PublicCategory.aspx
前台：
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>公有目录</title>
      <link href="../../Skin/<%=Session["_SkinPath"] %>/CSS/style.css" type="text/css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
    <div style="width:100%;">
        <table class="main-table" style="width: 283; height: 100%">
             <tr class="title">
                    <td align="left">目录列表：</td>
                </tr>
            <tr class="line-even" >
                <td style="width: 100%" valign="top">
                   <asp:TreeView ID="tvCategory" runat="server" Height="560" ImageSet="Contacts" Width="283">
                        <Nodes>
                            <asp:TreeNode Text="公用通讯录" Value="公用通讯录">
                                <asp:TreeNode Text="新建节点" Value="新建节点">
                                    <asp:TreeNode Text="新建节点" Value="新建节点"></asp:TreeNode>
                                </asp:TreeNode>
                                <asp:TreeNode Text="新建节点" Value="新建节点"></asp:TreeNode>
                            </asp:TreeNode>
                        </Nodes>
                       <SelectedNodeStyle BackColor="#C0FFFF" />
                    </asp:TreeView>
                </td>
            </tr>
        </table>
   
    </div>
    </form>
</body>
</html>
后台：
public partial class PublicCategory : System.Web.UI.Page
    {
        DataTable dt = null;
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!this.IsPostBack)
            {
                int ispublic =1;//表示公有
dt = Classes.BusinessObject.TXLBiz.GetAllCategory(ispublic, Convert.ToInt32(Session["_userId"].ToString()));//调用业务逻辑层方法得到所有的目录
                this.initTree(dt);
            }
        }
        /// <summary>
        /// 初始化树
        /// </summary>
        /// <param name="dt">取得所有的目录</param>
        private void initTree(DataTable dt)
        {
            this.tvCategory.Nodes.Clear();//先清理原先的
            if (dt!=null&&dt.Rows.Count == 0) return;
            DataRow[] Rows = dt.Select("parentID=0");
            if (Rows.Length == 0) return;
            foreach (DataRow row in Rows)
            {
                    TreeNode tNode = new TreeNode();
                    tNode.Value = row["categoryID"].ToString();
                    tNode.Text = row["title"].ToString();
                    tNode.NavigateUrl = "PublicContectPersonList.aspx?categoryID=" + tNode.Value + "";
                    tNode.Target = "Right";//指向父窗体右边的那个iframe
this.tvCategory.Nodes.Add(tNode);
                    createChildNode(tNode, tNode.Value);
             }
}

/// <summary>
        /// 创建子节点
        /// </summary>
        /// <param name="node"></param>
        /// <param name="strParentNo"></param>
        private void createChildNode(TreeNode node, string strParentNo)
        {

DataRow[] Rows = dt.Select("parentID='" + Convert.ToInt32(strParentNo) + "'");
            foreach (DataRow row in Rows)
            {
                TreeNode childNode = new TreeNode();
childNode.Value = row["categoryID"].ToString();
                childNode.Target = "Right";//指向父窗体右边的那个iframe
                childNode.Text = row["title"].ToString();
                childNode.NavigateUrl = "PublicContectPersonList.aspx?categoryID=" + childNode.Value + "";
node.ChildNodes.Add(childNode);
createChildNode(childNode, row["categoryID"].ToString());
}
}
}
右边详细信息页面：PublicContectPersonList.aspx
这个页面就没什么好介绍的，通过刚才节点  tNode.NavigateUrl = "PublicContectPersonList.aspx?categoryID=" + tNode.Value + "";
  childNode.NavigateUrl = "PublicContectPersonList.aspx?categoryID=" + childNode.Value + "";
传过来的节点id去数据库取数据绑定到GridView就可以

转载于:https://blog.51cto.com/zhangshuoyin/1105072

iFrame左树目录相关推荐

  1. 基于JEECG-BOOT制作“左树右表”交互页面

    前置知识: 1.ant-design-vue 2.vue的slot概念 需求效果: 如上界面所示. 后端不改动,基于jeecg-boot生成的代码,前端自定义,分为左右两块,典型的"左树右表 ...

  2. JeePlus左树右表之 表单【右表】自动获取列表【左树 】中的id

    JeePlus 左树右表中表单[右表]自动获取列表[左树 ]中的id 左树右表中表单[右表]和列表[左树 ]中有个关联.新建[右表]的时候每次都需要手动选择[左树 ]中的数据.并进行绑定. 方法: 1 ...

  3. EasyUI树目录结构

    EasyUI树目录结构,通过后台返回的json数据resualt,通过eval()解析成对象给treeData 从而实现动态数据:下面是treeData 数据默认的数据格式: //动态菜单数据 var ...

  4. vue 左树右表增加左右拖拽的功能

    左树右表 是后台很常见的功能,当左树内容过长,可能就要考虑到拖拽的功能了 这里简单说一下我的实现思路, <div class='left-tree'> <div>......这 ...

  5. Php xml 目录,PHP-PHP+xml的无限分类树目录的方法？

    无限分类树的代码有很多,下面是个示例: /** by lenush; */ class Tree { var $data = array(); var $child = array(-1=>ar ...

  6. mysql目录树_MySQL B+树目录及索引优化_mysql

    MySQL的索引实现由很多种实现,包括hash索引,B+索引,全文索引等,本文只讨论B+树索引. 为什么使用B+树索引? 1.评价一个索引好坏主要看IO的访问次数,B+树红黑树来说,树高很小(出度很大 ...

  7. c#如何实现从xml中加载树目录，并且显示完整的Text

    谈到xml,相信有一定编程基础的童鞋们都比较清楚了.xml文件格式类似于嵌套的样式,这种独特的层次结构很容易使我们联想到目录树,因此这不禁让我们对两者之间产生一种牵线的想法.这不禁,使我们有这么一个问 ...

  8. linux如何查看树目录结构,Linux查看目录结构树之tree命令

    1. tree命令简介 本文主要讲解如何查看Linux的目录结构,有时我们需要查看某目录里的结构,使用cd命令一层层查看显然不实际,效率也不高,这是可以使用tree命令,Linux tree命令用于以 ...

  9. 一个java实现的简单日历，采用左树右列表的方式实现，具有参考意义

    在论坛里面看到的,觉得挺好,具有参考价值. 直接将两个文件放在一起就可以运行. /**//* File CalendarBean.java *  author:*** *  Date:2007-12- ...

  10. Markdown生成左边框目录

    自从接触了Markdown后就一直用这种语言写学习笔记. 但是一直在纠结如何生成方便的目录. 下面是我搞得一个简单的模板可以生成固定在屏幕左边的目录. 就是这种 第一步,编辑器 首先,需要一个可以自动 ...

最新文章

  1. 11岁姑娘挑战8分钟编程小程序！蚂蚁金服董事长井贤栋：欢迎加入
  2. 从事IT行业需要了解到
  3. 在python中等号前面与后面分别是什么意思-Python中冒号等于（：=）是什么意思？...
  4. Linux网络服务之DNS（1）
  5. [NOI2011]阿狸的打字机
  6. 《Windows via C/C++》学习笔记 —— “线程同步”之“检测死锁”
  7. 在Windows 7中的Windows Media Player 12中快速预览歌曲
  8. [蓝桥杯2016初赛]方格填数-next_permutation
  9. 利用Python中的BeautifulSoup库爬取豆瓣读书中书本信息
  10. open***2.3.12安装与easy-rsa3的使用
  11. 复合赋值位运算符“＆=、| =”
  12. Java 算法 瓷砖铺放
  13. SEO网站关键词挖掘策略
  14. 苹果IOS 10.0.2屏蔽垃圾短信
  15. 全球及中国抗体药物市场展望规划及专项深度调研报告2021-2027年
  16. win10家庭版（阉割版）打开远程桌面服务
  17. 消费品行业经销商渠道数据同步及管理
  18. 谈谈SVM和SVR的区别
  19. 书论49 蔡襄《论书》
  20. 【Unity3D-Mirror多人坦克大战】生命盾牌物品的创建、物品动画的创建（九）

热门文章

  1. 从零基础入门Tensorflow2.0 ----八、39.4. gpu4
  2. FastAPI 对用户文件的管理（上传、下载、删除）
  3. retrievefile文件字节为0_linux环境下下 FTPClient.retrieveFile() 下载稍大一点的文件就卡死了-问答-阿里云开发者社区-阿里云...
  4. 文档级关系抽取方法总结
  5. Java中的双冒号::是什么玩意？有这个语法？
  6. spring service加上@autowired 空指针_Spring整合activeMQ和JsonP
  7. python调用matlab函数_python调用matlab的m自定义函数方法
  8. php+app接口返回json数据,PHP对接APP的接口类，可返回json数据，xml数据
  9. java 中的radix_线程“main”中的异常java.lang.NumberFormatException：Radix超出范围
  10. python解密m3u8播放_Python3 通过m3u8连接获取完整媒体文件（附全网视频VIP观看方法）...