使用ComponentArt.WebUI.for.Asp.net.3.0的TreeView控件 dodo

zoukankan html css js c++ java

使用ComponentArt.WebUI.for.Asp.net.3.0的TreeView控件 dodo

　回到今天的主题，使用TreeView控件可以很方便地实现无限级的树状结构管理。适用于无限级商品分类（类别）管理、员工类型管理、地区划分等应用场合。

　　费话少说，我们就开始实现吧！

第一步，设计数据库表。
　　为了实现无限级的树状层次结构，我们可以设计下边表结构。

　　其中，SortId为分类的ID；ParentSortId为上下文分类的父类Id，如果是各不相干的老祖宗（不同系列的根），其父类Id可设为空；Descr为文本文明，将显示在页面上；ImageUrl是每个树结点的文本的前置图标的图片Url，此内容是与控件的ImagesBaseUrl属性相关的，也就是说会从ImagesBaseUrl 属性指定的URL开始找这里的图片。

　　测试数据如下：

第二步，把新建工程并把一个TreeView控件和一个按钮及两个Label拖到WebForm上。如图：

第三步，设置TreeView属性
控件的属性太多不能一一介绍，其实很多属性从名称上已经能猜到是用来干嘛的了，嘿～具体每个属性的说明请查看文档，这里就贴上前台代码以供参考。

1<%@ Page Language="c#"  AutoEventWireup="false" Inherits="WebForm1" CodeBehind="DbTreeDemo.aspx.cs" %>
2<%@ Register TagPrefix="ComponentArt" Namespace="ComponentArt.Web.UI" Assembly="ComponentArt.Web.UI" %>
3<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4<HTML lang="EN">
5    <HEAD>
6        <title>数据驱动的TreeView演示</title>
7        <link href="treeStyle.css" type="text/css" rel="stylesheet">
8    </HEAD>
9    <body>
10        <form id="Form1" method="post" runat="server">
11            <div class="DemoArea"><FONT face="宋体"></FONT>
12            </div>
13            <P>
14                <asp:Button id="btnShow" runat="server" Text="显示"></asp:Button>
15                <ComponentArt:TreeView id="TreeView1" Height="320" Width="220" DragAndDropEnabled="true" NodeEditingEnabled="false"
16                    KeyboardEnabled="true" CssClass="TreeView" NodeCssClass="TreeNode" SelectedNodeCssClass="SelectedTreeNode"
17                    HoverNodeCssClass="HoverTreeNode" NodeEditCssClass="NodeEdit" LineImageWidth="19" LineImageHeight="20"
18                    DefaultImageWidth="16" DefaultImageHeight="16" ItemSpacing="0" NodeLabelPadding="3" ShowLines="true"
19                    LineImagesFolderUrl="images/lines/" ImagesBaseUrl="images/" EnableViewState="true" runat="server" AutoPostBackOnSelect="True"></ComponentArt:TreeView></P>
20            <P>
21                <asp:Label id="Label2" runat="server">选择了：</asp:Label>
22                <asp:Label id="Label1" runat="server">Label</asp:Label></P>
23        </form>
24    </body>
25</HTML>
26
其中<ComponentArt:TreeView>标签的属性可以从VS的属性编辑区找到相应的项。

第四步，编写后台代码
这个嘛，不费话太多了，代码说明一切吧！（已包括事件处理）

  1//=======================================
  2// 数据驱动的TreeView演示
  3//=======================================
  4// by Ryu666 in 2005/12/15 QQ:126940
  5//=======================================
  6using System;
  7using System.Collections;
  8using System.ComponentModel;
  9using System.Data;
10using System.Drawing;
11using System.Web;
12using System.Web.SessionState;
13using System.Web.UI;
14using System.Web.UI.WebControls;
15using System.Web.UI.HtmlControls;
16
17using Microsoft.Practices.EnterpriseLibrary.Data;
18using ComponentArt.Web.UI;
19
20/**//// <summary>
21/// 数据驱动的TreeView演示.
22/// </summary>
23public class WebForm1 : System.Web.UI.Page
24{
25    protected System.Web.UI.WebControls.Label Label1;
26    protected System.Web.UI.WebControls.Button btnShow;
27    protected System.Web.UI.WebControls.Label Label2;
28    protected ComponentArt.Web.UI.TreeView TreeView1;
29
30    private void Page_Load(object sender, System.EventArgs e)
31    {
32
33    }
34
35    /**//// <summary>
36    /// 生成树
37    /// </summary>
38    private void buildTree()
39    {
40        //生成数据源（这里我是用了企业库，你也可以采用其它方式去生成，或者把这部分放到DAL层）
41        Database db = DatabaseFactory.CreateDatabase();
42        DataSet ds = db.ExecuteDataSet(CommandType.Text,"select * from Sort");
43
44        //建立关系
45        ds.Relations.Add("SortRelation", ds.Tables[0].Columns["SortId"], ds.Tables[0].Columns["ParentSortId"]);
46
47        //遍历每行并根据数据行关系生成树
48        foreach(DataRow dbRow in ds.Tables[0].Rows)
49        {
50            if(dbRow.IsNull("ParentSortId"))
51            {
52                ComponentArt.Web.UI.TreeViewNode newNode = CreateNode(dbRow["Descr"].ToString(), dbRow["ImageUrl"].ToString(), true);
53                TreeView1.Nodes.Add(newNode);
54                PopulateSubTree(dbRow, newNode);
55            }
56        }
57    }
58
59    /**//// <summary>
60    /// 组装子树
61    /// </summary>
62    /// <param name="dbRow">数据行</param>
63    /// <param name="node">树节点，将递归添加子节点</param>
64    private void PopulateSubTree(DataRow dbRow, ComponentArt.Web.UI.TreeViewNode node)
65    {
66        foreach (DataRow childRow in dbRow.GetChildRows("SortRelation"))
67        {
68            ComponentArt.Web.UI.TreeViewNode childNode = CreateNode(childRow["Descr"].ToString(), childRow["ImageUrl"].ToString(), true);
69            node.Nodes.Add(childNode);
70            PopulateSubTree(childRow, childNode);
71        }
72    }
73
74    /**//// <summary>
75    /// 生成树节点
76    /// </summary>
77    /// <param name="text">节点显示文本</param>
78    /// <param name="imageurl">节点前的图片url</param>
79    /// <param name="expanded">是否展开</param>
80    /// <returns>树节点</returns>
81    private TreeViewNode CreateNode(string text, string imageurl, bool expanded)
82    {
83        ComponentArt.Web.UI.TreeViewNode node = new ComponentArt.Web.UI.TreeViewNode();
84        node.Text = text;
85        node.ImageUrl = imageurl;
86        node.Expanded = expanded;
87        return node;
88    }
89
90
91    Web 窗体设计器生成的代码
114
115        //节点点选事件处理
116    private void TreeView1_NodeSelected(object sender, ComponentArt.Web.UI.TreeViewNodeEventArgs e)
117    {
118        //通过e.Node.Text可以取得节点的显示文本
119        this.Label1.Text= e.Node.Text;
120    }
121
122        //这个不用说了，也可以把buildTree(); 放到Page_Load里面
123    private void btnShow_Click(object sender, System.EventArgs e)
124    {
125        buildTree();
126    }
127
128}
129

效果图：

　　最后就是要提示一下，这套第三方控件的其它好些控件都有类似的“动态生成”支持，它们的工作原理也都大致相同的，概括地说就是把数据从数据库或者XML文档里面读出来，装载到DataSet里面，然后通过相应的方法将DataSet里面的数据“绑定”到控件中。另外就是提供学习这套控件的两个法宝——“Samples”和“文档”，它们可以帮助你迅速地把这套控件玩透。

查看全文

相关阅读:
学习随笔
 javaWeb(1)
javaWeb(3)----EL,JSTL
开发时要注意的地方！！！
Mybatis（0）——基础入门，hello,Mybatis! （使用IDEA）
SpringAOP——通过JdbcTemplate连接数据库，并使用事务（Transactional）（使用IDEA进行编程）
SpringAOP基础实战知识------hello！AspectJ （使用IDEA进行编程）
5 jQuery
4.1 js 配合dom 案例
 4.js

原文地址：https://www.cnblogs.com/zgqys1980/p/404451.html