TreeView+Iframe构造左边目录右边详细页面效果

最新推荐文章于 2022-01-04 08:31:06 发布

原创

最新推荐文章于 2022-01-04 08:31:06 发布 · 4.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#iframe #javascript #stylesheet #asp #server #class

本文介绍了如何使用TreeView控件和Iframe构建一个通讯录系统，其中左边Iframe展示树形目录，点击目录时，右边Iframe显示对应详细信息。通过JavaScript和服务器端代码实现目录与内容的联动，适用于OA系统的常见布局。

通讯录系统总结：这个通讯录系统的效果是父窗体放两个iframe，左边的iframe里存放的是树型目录，右边iframe里存放的是该目录下的子目录和目录下的所有联系人。当点击左边的树节点时，右边将获得对应的数据，这种效果，我想大部分的OA系统都是这样的实现的，左边是目录，右边是页面，左右实现联动。很经典的做法，这里总结一下，希望对大家有帮助。
父窗体页面放两个iframe

 
         01 
         <html xmlns="[url]http://www.w3.org/1999/xhtml[/url]" > 
        
         02 
         <head runat="server"> 
        
         03 
             <title>主框架</title> 
        
         04 
             <script language="javascript"> 
        
         05 
         function closethis() 
        
         06 
         { 
            
         07 
         document.all.dir.style.display='none'; 
        
         08 
         } 
        
         09 
         function openthis() 
        
         10 
         { 
            
         11 
         document.all.dir.style.display=''; 
        
         12 
         } 
        
         13 
         </script> 
        
         14 
         </head> 
        
         15 
         <body> 
        
         16 
         <table border="0" width="100%" cellpadding="0" class="main-table"> 
        
         17 
         <tr> 
        
         18 
                  <td align="left" id=dir style="width:23%">    
        
         19 
            <iframe id="menu" name="menu" src="PublicCategory.aspx" class="inset-table" width="300" height="600" frameborder="NO" border="0" framespacing="0"></iframe> //左边菜单，这里将放一棵树型目录                                                                                                                                                                                              
        
         20 
               </td>  
        
         21 
                <td width="2%" align=center><a href="javascript:closethis();"><=</a><br><br><br><a href="javascript:openthis();">=></a></td>