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
前臺：
父窗體頁面放兩個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;//表示公有
<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.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);
}
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 + "";
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就可以
}
右邊詳細信息頁面：PublicContectPersonList.aspx
這個頁面就沒什麼好介紹的，通過剛纔節點 tNode.NavigateUrl = "PublicContectPersonList.aspx?categoryID=" + tNode.Value + "";
childNode.NavigateUrl = "PublicContectPersonList.aspx?categoryID=" + childNode.Value + "";
傳過來的節點id去數據庫取數據綁定到GridView就可以