• Blogs |
• Tutorials |
• Vorträge |

 

  

TreeView erstellen mit MS IE Webcontrols (2)

 

 

Icons zum TreeView hinzufügen

 

Autor: Jürgen Gutsch

Version: 1.0

Sprache: vb.net

 

Benötigt werden (mindestens):

.net Framework 1.0

MS IE Webcontrols

IIS 5.x

IE 5.5

 

Getestet auf:

WinXP

IIS 5.1

IE 6.0

 

Grundlage:

Dieser Artikel basiert auf folgendem Tutorial:

TreeView erstellen mit MS IE Webcontrols

 

Auf einer Anregung eines Webmasters, der Teil 1 des Artikels erfolgreich eingesetzt hat (http://www.bueroedv.de/), hin habe ich mich entschlossen einen zweiten Teil zu schreiben, in dem es darum geht dem TreeView Icons hinzuzufügen. Icons (Symbole) deinen auch der Übersicht und der Strukturierung vin Menüs, sind aber in erster linie EyeCatcher (Blickfänger), die das beschreiben solten, was sich hinter dem Menüpunkt verbirgt.

Im ersten teil hatte ich eine kleine Datenbank angelegt, in der die Menüstruktur abgebildet ist. die Tabelle ("Menu") enthielt den Linktext und evtl eine Url (je nachdem, ob es sich um einen weiterführenden Link handelte, oder um eine Art Verzeichnis, das weitere Links enthielt).

Der Progammcode ist die Tabelle rekursiv durchgegangen, anhand der Spalte "m_parent" habe ich festgelegt, welcher Menüpunk einem anderen untergeordnet ist.

 

Die Datenbank:

Die gleiche Datenbanktabelle, wie in Teil eins, habe ich um drei Spalten erweitert:

m_target: zur besseren Steuerung von weiterführenden Links

m_open_img: hier wird das Icon gespeichert, welches angezeigt werden soll, wenn ein TreeNode geöffnet ist

m_close_img: enthält das standartsymbol, bzw. das Symbol des geschlossenen Treenodes.

 

 

 

Der Code:

Die Hauptänderungen haben in der rekursiven Funktion "getMeTreeView" stattgefunden. Hier habe ich drei neue Variablen definiert (strTarget, strOpenImg und strCloseImg), welche die Werte aus der Datenbank enthalten werden. Innerhalb der Schleife verden erst die Variablen gefüllt und anschließend nach prürung des Variableninhalts werden die Eigenschaften "Target", "ImageUrl" und "ExpandedImageUrl" des aktuellen treeNodes gesetzt ("ImageUrl" setzt das Standartsymbol und "ExpandedImageUrl" das Symbol eines geöffneten Treenodes)

 

Hier noch einmal die komplette Funktion:

Function< getMeTreeView( _
        ByRef< TreeNode As< Microsoft.Web.UI.WebControls.TreeNode, _
        ByRef< DataSet As< System.Data.DataSet, _
        ByVal< parentID As< Integer) _
                As< Microsoft.Web.UI.WebControls.TreeNode

  Dim< tn As< Microsoft.Web.UI.WebControls.TreeNode
  
  ' >>>>> Folgendes Statement füllt ein DataRow-Array mit<
  ' >>>>> allen Daten aus dem DataSet, bei denen die "m_parent<"
  ' >>>>> der als Parameter übergebene ParentID entspricht<
  Dim< dr() As< System.Data.DataRow = _
        DataSet.Tables("MENU").Select("m_parent=" & parentID)

  ' >>>>> Variablen für die TreeNodes:<
  Dim< strText As String<
  Dim< strLink As String<
  Dim< strTarget As String<
  Dim< strOpenImg As String<
  Dim< strCloseImg As String<
  Dim< intId As Integer<

  ' >>>>> Zähler für die For-Schleife:<
  Dim< i As Integer<
  ' >>>>> Diese Schleife geht alle Daten im DataRow-Array durch:<
  For< i = 0 to< dr.Length -1
    ' >>>>> TreeNode Text:<
    strText = dr(i).Item("m_text").ToString
    ' >>>>> TreeNode Link:<
    strLink = dr(i).Item("m_link").ToString
    ' >>>>> TreeNode Target:<
    strTarget = dr(i).Item("m_target").ToString
    ' >>>>> TreeNodeIcon - für geönneten TreeNode:<
    strOpenImg = dr(i).Item("m_open_img").ToString
    ' >>>>> TreeNodeIcon - für geschlossenen TreeNode:<
    strCloseImg = dr(i).Item("m_close_img").ToString
    ' >>>>> ID des TreeNodes:<
    intId = dr(i).Item("m_id")

    ' >>>>> neues TreeNode erzeugen:<
    tn = New< Microsoft.Web.UI.WebControls.TreeNode
    ' >>>>> id Setzen:<
    tn.ID = intId
    ' >>>>> Text setzen:<
    tn.Text = strText
    ' >>>>> Link setzen, wenn vorhanden:<
    If< strLink <> "-" Then< tn.NavigateUrl = strLink
    ' >>>>> Target setzen, wenn vorhanden:<
    If< strTarget <> "-" Then tn.Target = strTarget
    ' >>>>> offenes Icon setzen, wenn vorhanden:<
    If< strOpenImg <> "-" Then< _
                tn.ExpandedImageUrl = imgFolder & strOpenImg
    ' >>>>> geschlossenes Icon setzen, wenn vorhanden:<
    If< strCloseImg <> "-" Then< _
                tn.ImageUrl = imgFolder & strCloseImg
	
    ' >>>>> Schriftart und -Größe Setzen:<
    tn.DefaultStyle.Add("font-family", "arial")
    tn.DefaultStyle.Add("font-size", "11px")

    ' >>>>> rekursiver Aufruf dieser Sub, wobei die Aktuelle< 
    ' >>>>> ID als neue parendID übergeben wird:<
    getMeTreeView(tn, DataSet, intId)
	
    ' >>>>> als letztes wird das eben erzeugte TreeNode dem<
    ' >>>>> dem übergebenen hinzugefügt:<
    TreeNode.Nodes.Add(tn)
  Next<
End Function<

 

Eine weitere kleine Änderung ist auch in der Sub "Page_Load" zu finden, da ich dem RootNode ebenfalls ein kleines Icon verpassen wolte:

 

...
' >>>>> neues TreeNode erzeugen:<
Dim< tn As New< Microsoft.Web.UI.WebControls.TreeNode

' >>>>> ID Setzen:<
tn.ID = 0
' >>>>> Text setzen<
tn.Text = "ROOT"
' >>>>> Scriftformat<
tn.ExpandedImageUrl = imgFolder & "home.gif"
' >>>>> <offenes Icon setzen<
tn.ImageUrl = imgFolder & "home.gif"
' >>>>> <geschlossenes Icon setzen<
tn.DefaultStyle.Add("font-family", "arial")
tn.DefaultStyle.Add("font-size", "11px")

' >>>>> Rekursion aufrufen und Untergeordnete Nodes erzeugen:<
getMeTreeView(tn, getDataSet(), 0)
			
' >>>>> TreeNode mit untergeordneten Nodes< 
' >>>>> dem TreeView hinzufügen<
tv.Nodes.Add(tn)
...

 

Die Variable "imgFolder", die in beiden Funktionen ebenfalls neu ist, enthält den Pfad zum Verzeichnis, in dem die Icons zu finden sind und ist gleich am Anfang des <script>-Blocks definiert:

' >>>>> DatenBank ConnectionString;<
Dim< DS As String< = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" _
                                        & Server.MapPath("test.mdb")
' >>>>> Pfad zum Symbolverzeichnis;<
Dim< imgFolder As String< = "treeviewimages/"

 

Nachdem die Änderungen gemacht sind, sind nun folgende Bilder zu bewundern:

 

Hier die Sourcen:

Donwload: treeview02.zip (68 KB)