怎么样在网页中使用treeview建立树型结构?

时间:2022-04-16 12:36:52
我要做OA,其中有这样的功能 :


第一层1
    第二层1
       第三层1
       第三层2
       第三层3
       第三层4
    第二层2
       第三层n
第一层2
    ......
       ...
第一层n..

实现点击 "第三层n"子节点,当前窗口的另一半显示该节点的具体信息页面(页面内文本框的内容在access库中)


要是能给参考代码,更是感激

5 个解决方案

#1


下载微软提供的Web控件
用Google搜

#2


我已经有啦

#3


up

#4


一个最简单的办法是将数据库中的节点信息转换成XML文件,再与你的TreeView绑定

#5


1.下载地址 
http://msdn.microsoft.com/downloads/samples/internet/ASP_DOT_NET_ServerControls/WebControls/default.asp 
安装后,通过“自定义工具箱”->“.net框架组件”把TreeView添加到工具箱里 

用TreeView实现树菜单 
  具体方法是:创建一个数据库,设计树图信息表S_Menu,包含NodeId、ParentId、NodeName、Address、Icon字段,其它字段根据实际业务
而定,节点名称NodeName将在树型控件的节点上显示,NodeId字段保存节点的唯一标识号,ParentId表示当前节点的父节点号,标识号组成了
一个“链表”,记录了树上节点的结构。设计一个Web窗体其上放置TreeView控件,修改其属性Id为tvMenu。



数据结构如下:
CREATE TABLE [dbo].[S_Menu] (
 [NodeId] [char] (6) COLLATE Chinese_PRC_CI_AS NULL ,
 [ParentId] [char] (6) COLLATE Chinese_PRC_CI_AS NULL ,
 [NodeName] [nvarchar] (50) COLLATE Chinese_PRC_CI_AS NULL ,
 [Address] [nvarchar] (50) COLLATE Chinese_PRC_CI_AS NULL ,
 [Icon] [nvarchar] (50) COLLATE Chinese_PRC_CI_AS NULL
) ON [PRIMARY]
GO



数据库如下:
NodeId ParentId NodeName  Address   Icon
100000 0   公共查询部    icon_document.gif
100001 100000   人民币日报查询  public/a1.aspx  icon_settings.gif
100002 100000   外币日报查询  public/a2.aspx  icon_settings.gif
100003 0   分行科技部    icon_document.gif
100004 100003   人民币日报查询  tech/a1.aspx  icon_settings.gif
100005 100003   外币日报查询  tech/a2.aspx  icon_settings.gif
100006 0   福田支行    icon_document.gif
100007 100006   月存款进度表  a1.aspx   icon_settings.gif
100008 100006   月存款走势图  a2.aspx    icon_settings.gif
100009 0   罗湖支行    icon_document.gif
100010 100009   月存款进度表  a1.aspx   icon_settings.gif
100011 100009   月存款走势图  a2.aspx   icon_settings.gif
   
menu_left.aspx文件如下:
<%@ Register TagPrefix="iewc" Namespace="Microsoft.Web.UI.WebControls" Assembly="Microsoft.Web.UI.WebControls,
Version=1.0.2.226, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>
<%@ Page language="c#" Codebehind="menu_Left.aspx.cs" AutoEventWireup="false" Inherits="hzquery.menu.menu_Left" %>
<HTML>
 <HEAD>
  <title>menu_Left</title>
  <meta name="GENERATOR" Content="Microsoft Visual Studio 7.0">
  <meta name="CODE_LANGUAGE" Content="C#">
  <meta name="vs_defaultClientScript" content="JavaScript">
  <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
 </HEAD>
 <body MS_POSITIONING="GridLayout">
  <form id="menu_Left" method="post" runat="server">
   <iewc:TreeView id="tvMenu" runat="server"></iewc:TreeView>
  </form>
 </body>
</HTML>



CodeBehind代码如下:
using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using Microsoft.Web.UI.WebControls;
using System.Data.SqlClient;



namespace hzquery.menu
{
 /// <summary>
 /// menu_Left 的摘要说明。
 /// </summary>
 public class menu_Left : System.Web.UI.Page
 {
  protected Microsoft.Web.UI.WebControls.TreeView tvMenu;
  SqlConnection Conn;
  SqlDataAdapter myCmd;
  DataSet ds;
  string cmdSelect;



  private void Page_Load(object sender, System.EventArgs e)
  {
   Conn=new SqlConnection(Application["ConnString"].ToString());
   CreateDataSet();
   InitTree(tvMenu.Nodes,"0");
  }
  //建立数据集
  private DataSet CreateDataSet()
  {
   cmdSelect="select * from S_Menu";
   myCmd=new SqlDataAdapter(cmdSelect,Conn);
   ds=new DataSet();
   myCmd.Fill(ds,"tree");
   return ds;
  }
  //建树的基本思路是:从根节点开始递归调用显示子树
         private void InitTree(TreeNodeCollection Nds,string parentId)
  {
   DataView dv=new DataView();
   TreeNode tmpNd;
   string intId;
   dv.Table=ds.Tables["tree"];
   dv.RowFilter="ParentId="" + parentId + """ ;
   foreach(DataRowView drv in dv)
   {
    tmpNd=new TreeNode();
    tmpNd.ID=drv["NodeId"].ToString();
    tmpNd.Text=drv["NodeName"].ToString();
    tmpNd.ImageUrl="../images/"+drv["Icon"].ToString();
    tmpNd.NavigateUrl="../"+drv["Address"].ToString();
    Nds.Add(tmpNd);
    intId=drv["ParentId"].ToString();
    InitTree(tmpNd.Nodes,tmpNd.ID);
   }
  }



  #region Web Form Designer generated code
  override protected void OnInit(EventArgs e)
  {
   InitializeComponent();
   base.OnInit(e);
  }
  private void InitializeComponent()
  {   
   this.Load += new System.EventHandler(this.Page_Load);



  }
  #endregion
 }
}

#1


下载微软提供的Web控件
用Google搜

#2


我已经有啦

#3


up

#4


一个最简单的办法是将数据库中的节点信息转换成XML文件,再与你的TreeView绑定

#5


1.下载地址 
http://msdn.microsoft.com/downloads/samples/internet/ASP_DOT_NET_ServerControls/WebControls/default.asp 
安装后,通过“自定义工具箱”->“.net框架组件”把TreeView添加到工具箱里 

用TreeView实现树菜单 
  具体方法是:创建一个数据库,设计树图信息表S_Menu,包含NodeId、ParentId、NodeName、Address、Icon字段,其它字段根据实际业务
而定,节点名称NodeName将在树型控件的节点上显示,NodeId字段保存节点的唯一标识号,ParentId表示当前节点的父节点号,标识号组成了
一个“链表”,记录了树上节点的结构。设计一个Web窗体其上放置TreeView控件,修改其属性Id为tvMenu。



数据结构如下:
CREATE TABLE [dbo].[S_Menu] (
 [NodeId] [char] (6) COLLATE Chinese_PRC_CI_AS NULL ,
 [ParentId] [char] (6) COLLATE Chinese_PRC_CI_AS NULL ,
 [NodeName] [nvarchar] (50) COLLATE Chinese_PRC_CI_AS NULL ,
 [Address] [nvarchar] (50) COLLATE Chinese_PRC_CI_AS NULL ,
 [Icon] [nvarchar] (50) COLLATE Chinese_PRC_CI_AS NULL
) ON [PRIMARY]
GO



数据库如下:
NodeId ParentId NodeName  Address   Icon
100000 0   公共查询部    icon_document.gif
100001 100000   人民币日报查询  public/a1.aspx  icon_settings.gif
100002 100000   外币日报查询  public/a2.aspx  icon_settings.gif
100003 0   分行科技部    icon_document.gif
100004 100003   人民币日报查询  tech/a1.aspx  icon_settings.gif
100005 100003   外币日报查询  tech/a2.aspx  icon_settings.gif
100006 0   福田支行    icon_document.gif
100007 100006   月存款进度表  a1.aspx   icon_settings.gif
100008 100006   月存款走势图  a2.aspx    icon_settings.gif
100009 0   罗湖支行    icon_document.gif
100010 100009   月存款进度表  a1.aspx   icon_settings.gif
100011 100009   月存款走势图  a2.aspx   icon_settings.gif
   
menu_left.aspx文件如下:
<%@ Register TagPrefix="iewc" Namespace="Microsoft.Web.UI.WebControls" Assembly="Microsoft.Web.UI.WebControls,
Version=1.0.2.226, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>
<%@ Page language="c#" Codebehind="menu_Left.aspx.cs" AutoEventWireup="false" Inherits="hzquery.menu.menu_Left" %>
<HTML>
 <HEAD>
  <title>menu_Left</title>
  <meta name="GENERATOR" Content="Microsoft Visual Studio 7.0">
  <meta name="CODE_LANGUAGE" Content="C#">
  <meta name="vs_defaultClientScript" content="JavaScript">
  <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
 </HEAD>
 <body MS_POSITIONING="GridLayout">
  <form id="menu_Left" method="post" runat="server">
   <iewc:TreeView id="tvMenu" runat="server"></iewc:TreeView>
  </form>
 </body>
</HTML>



CodeBehind代码如下:
using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using Microsoft.Web.UI.WebControls;
using System.Data.SqlClient;



namespace hzquery.menu
{
 /// <summary>
 /// menu_Left 的摘要说明。
 /// </summary>
 public class menu_Left : System.Web.UI.Page
 {
  protected Microsoft.Web.UI.WebControls.TreeView tvMenu;
  SqlConnection Conn;
  SqlDataAdapter myCmd;
  DataSet ds;
  string cmdSelect;



  private void Page_Load(object sender, System.EventArgs e)
  {
   Conn=new SqlConnection(Application["ConnString"].ToString());
   CreateDataSet();
   InitTree(tvMenu.Nodes,"0");
  }
  //建立数据集
  private DataSet CreateDataSet()
  {
   cmdSelect="select * from S_Menu";
   myCmd=new SqlDataAdapter(cmdSelect,Conn);
   ds=new DataSet();
   myCmd.Fill(ds,"tree");
   return ds;
  }
  //建树的基本思路是:从根节点开始递归调用显示子树
         private void InitTree(TreeNodeCollection Nds,string parentId)
  {
   DataView dv=new DataView();
   TreeNode tmpNd;
   string intId;
   dv.Table=ds.Tables["tree"];
   dv.RowFilter="ParentId="" + parentId + """ ;
   foreach(DataRowView drv in dv)
   {
    tmpNd=new TreeNode();
    tmpNd.ID=drv["NodeId"].ToString();
    tmpNd.Text=drv["NodeName"].ToString();
    tmpNd.ImageUrl="../images/"+drv["Icon"].ToString();
    tmpNd.NavigateUrl="../"+drv["Address"].ToString();
    Nds.Add(tmpNd);
    intId=drv["ParentId"].ToString();
    InitTree(tmpNd.Nodes,tmpNd.ID);
   }
  }



  #region Web Form Designer generated code
  override protected void OnInit(EventArgs e)
  {
   InitializeComponent();
   base.OnInit(e);
  }
  private void InitializeComponent()
  {   
   this.Load += new System.EventHandler(this.Page_Load);



  }
  #endregion
 }
}