Databasanpassning av dTree - meny
Förord
En trädstruktursmeny är väldigt praktisk att använda och om man inte kan/vill skriva en själv så finns det ett flertal bra att ladda ned. En utmärkt sådan är 'dTree', http://www.destroydrop.com. Eftersom en av våra medlemmar hade önskat en artickel om hur man databasanpassar denna meny, beslöt jag mig för att uppfylla hans önskemål.Skapad efter önskemål från Johan Moberg.
dTree består enkelt beskrivet av en kärna i form av en javascript-fil (dtree.js) samt en vanlig
html-fil som anropar (använder sig) av kärn-filen. Kärn-filen kommer vi ej att beröra pga. att konfiguration av denna inte är nödvändig.
För att jobba med dTree krävs igentligen ingen Javscript erfarenhet utan det räcker med att man
förstår hur man använder de få kommandon som dTree använder.
Häng med »
default.asp (ASP-sidan som ritar ut menyn)
global.asa (Används för att lagra Connection-sträng)
dtree.js (Javascript-koden för menyn [Behöver ej röras])
db.mdb (Databasen för menyinnehåll och konfiguration av menyn)
dtree.css (Stylesheet-fil för inställningar av font, färg etc.)
I.] mytree.add();
Med hjälp av "add" skapar man en mapp eller länk i sitt träd. Om det blir en mapp eller länk beror helt enkelt på om det finns underliggnade länker eller ej.
Egenskaper
id - Unikt ID:nr
pid - Ovanliggande mapps ID. Värdet för "root" måste va -1.
name - Namn på mapp/länk.
url - Sökvägen
title - Text som syns när mus förs över länk/mapp.
target - Eventuell "target". Endast vid användande av frames eller för visning i nytt fönster
icon - Möjlighet att lägga sökväg för ikon. Om blank visas default.
iconOpen - Samma som ovan fast om mapp/länk i öppet läge.
open - Skall mappen vara öppen från start?
Syntax
Exempel
II.] mytree.config
Med hjälp av "config" kan man göra en rad inställningar i trädet.
Inställningarna måste göras var och en för sig. (En rad = en inställning)
Egenskaper
target - Target for all the nodes. [Default = True]
folderLinks - Skall mappar vara länkar. [Default = True]
useSelection - Använd markering (markeras blå). [Default = True]
useCookies - Använd cookies för att komma ihåg senaste utformning. [Default = True]
useLines - Träd visas med linjer. [Default = True]
useIcons - Träd visas med ikoner. [Default = True]
useStatusText - Visa namn på mapp/länk i "statusbar" iställe för "Url". [Default = False]
closeSameLevel - Låt bara en mapp vara öppen åt gången. [Default = False]
inOrder - Om ditt träd är sorterat, allts alla mappar och underlänkar ligger i rätt ordning snabbar denna inställning upp trädet. [Default = False]
Syntax
Exempel
III.] mytree.openAll();
Vet inte om den här behöver närmare förklaring, men som ni säkert redan har listat ut så öppnar den hela trädet.
Exempel
IV.] mytree.closeAll();
Och detta kommand stänger alltså trädet.
Exempel
I denna artickel har jag valt att använda en access databas men man skulle lika gärna kunna använda sig av en MySQL eller MS-SQL databas. För att använda vår meny dynamiskt skapar vi två tabeller, en för att spara våra meny-poster och en för att lagra inställningasmöjligheter.
För meny-posterna flyttar vi över de egenskaper som fanns för kommandot "add". Tabellen ser då ut enligt följande.
Tree_Menu
Fältnamn | Fälttyp
--------------------
ID | Räknare
PID | Tal
Name | Text
Url | Text
Title | Text
Target | Text
Icon | Text
IconOpen | Text
Open | Text
För inställningarna skapar vi följande tabell. (Varje kommando för "config" får en rad i denna tabell.)
ID - Unikt ID
Variable - Här läggs det kommando som skall köras tex. "target".
Default - Värdet kommandot har från början för att kunna återställa menyn.
Value - Värdet kommandot har nu.
Active - Om kommandot skall köras eller ej.
Description - Här finns orginal beskrivning för vad kommandot gör. Detta för att enkelt kunna lista ut ett antal boxar med tillhörande beskrivning i ett ev. admin-system.
Tree_Menu_Config
Fältnamn | Fälttyp
--------------------
ID | Räknare
Variable | Text
Default | Text
Value | Text
Active | Ja/Nej
Description | Text
För att underlätta brukar jag ofta lägga min connectionsträng i en application variable i filen global.asa Tycker detta är ett smidigt sätt att spara connectionsträngen på i ett lite större projekt eller när man flyttar filerna mellan olika maskiner. Smyger alltså in det som ett litet tips här för er som inte nyttjat denna möjlighet tidigare. (Kommer dock inte gå in närmare på hur det fungerar)
Lägg följande kod i en text-fil och döp den till "global.asa":
För att öppna vår connection kör vi sedan:
I head-attributet av vår fil lägger vi sökvägar för *.css och vår javascript fil:
I body börjar vi sedan med att sätta ett namn på vårt träd, skriva ut öppna/stäng funktion samt att starta trädet.
Vi fortsätter med att koppla oss mot databasen, hämta vårt meny innehåll från tabellen "Tree_Menu" och sedan loopa ut innehållet.
Vi hämtar innehållet i vår konfigurationstabell och loopar ut innehållet på samma sätt som ovan innan vi stänger databasen.
Tillslut avslutar vi med att att rita ut trädet och avsluta script-taggen.
Filerna som benämns i denna artickel finns att ladda ned här.
1.) Packa upp dem.
2.) Placera katalogen "dtree" i din wwwroot-katalog.
3.) Ändra sökvägen i filen "global.asa" så att stämmer med din lokala sökväg.
4.) Klart!
Obs! Detta dokument innehåller fel i html-taggar, en sluttagg saknas. Vänligen korrigera dessa!
Introduktion
dTree består enkelt beskrivet av en kärna i form av en javascript-fil (dtree.js) samt en vanlig html-fil som anropar (använder sig) av kärn-filen. Kärn-filen kommer vi ej att beröra pga. att konfiguration av denna inte är nödvändig.
För att jobba med dTree krävs igentligen ingen Javscript erfarenhet utan det räcker med att man
förstår hur man använder de få kommandon som dTree använder.
Häng med »
Filer som används i artikeln
default.asp (ASP-sidan som ritar ut menyn)
global.asa (Används för att lagra Connection-sträng)
dtree.js (Javascript-koden för menyn [Behöver ej röras])
db.mdb (Databasen för menyinnehåll och konfiguration av menyn)
dtree.css (Stylesheet-fil för inställningar av font, färg etc.)
Kommandon
I.] mytree.add();Med hjälp av "add" skapar man en mapp eller länk i sitt träd. Om det blir en mapp eller länk beror helt enkelt på om det finns underliggnade länker eller ej.
Egenskaper
id - Unikt ID:nr
pid - Ovanliggande mapps ID. Värdet för "root" måste va -1.
name - Namn på mapp/länk.
url - Sökvägen
title - Text som syns när mus förs över länk/mapp.
target - Eventuell "target". Endast vid användande av frames eller för visning i nytt fönster
icon - Möjlighet att lägga sökväg för ikon. Om blank visas default.
iconOpen - Samma som ovan fast om mapp/länk i öppet läge.
open - Skall mappen vara öppen från start?
Syntax
mytree.add(id, pid, 'name', 'url', 'title', 'target', 'icon', 'iconopen', open);
Exempel
mytree.add(0, -1,'My Tree','default.asp');
II.] mytree.config
Med hjälp av "config" kan man göra en rad inställningar i trädet.
Inställningarna måste göras var och en för sig. (En rad = en inställning)
Egenskaper
target - Target for all the nodes. [Default = True]
folderLinks - Skall mappar vara länkar. [Default = True]
useSelection - Använd markering (markeras blå). [Default = True]
useCookies - Använd cookies för att komma ihåg senaste utformning. [Default = True]
useLines - Träd visas med linjer. [Default = True]
useIcons - Träd visas med ikoner. [Default = True]
useStatusText - Visa namn på mapp/länk i "statusbar" iställe för "Url". [Default = False]
closeSameLevel - Låt bara en mapp vara öppen åt gången. [Default = False]
inOrder - Om ditt träd är sorterat, allts alla mappar och underlänkar ligger i rätt ordning snabbar denna inställning upp trädet. [Default = False]
Syntax
mytree.config.parameter = 0/1;
Exempel
mytree.config.useSelection = 0;
III.] mytree.openAll();
Vet inte om den här behöver närmare förklaring, men som ni säkert redan har listat ut så öppnar den hela trädet.
Exempel
<a href="javascript:mytree.openAll();">Open all</a>
IV.] mytree.closeAll();
Och detta kommand stänger alltså trädet.
Exempel
<a href="javascript:mytree.closeAll();">Close all</a>
Exempel på menykod
<body>
<script type="text/javascript">
<!--
MyTree = new dTree('MyTree');
MyTree.add(0,-1,'Min Meny','default.asp','Test','','','','');
MyTree.add(1,0,'Frukt','default.asp','Test','','','','');
MyTree.add(2,0,'Sport','default.asp','Test','','','');
MyTree.add(3,1,'Äpple','default.asp','Test','','','','');
MyTree.add(4,2,'Fotboll','default.asp','Test','','','');
MyTree.add(5,0,'Djur','default.asp','Test','','','');
MyTree.add(6,5,'Apa','default.asp','Test','','','');
MyTree.add(7,5,'Ko','default.asp','Test','','','');
MyTree.add(8,1,'Bannan','default.asp','Test','','','');
MyTree.add(9,2,'Handboll','default.asp','Test','','','');
MyTree.add(10,1,'Citron','default.asp','Test','','','','');
MyTree.config.useSelection = 0;
document.write(MyTree);
//-->
</script>
Skapa och strukturera databasen
I denna artickel har jag valt att använda en access databas men man skulle lika gärna kunna använda sig av en MySQL eller MS-SQL databas. För att använda vår meny dynamiskt skapar vi två tabeller, en för att spara våra meny-poster och en för att lagra inställningasmöjligheter.För meny-posterna flyttar vi över de egenskaper som fanns för kommandot "add". Tabellen ser då ut enligt följande.
Tree_Menu
Fältnamn | Fälttyp
--------------------
ID | Räknare
PID | Tal
Name | Text
Url | Text
Title | Text
Target | Text
Icon | Text
IconOpen | Text
Open | Text
För inställningarna skapar vi följande tabell. (Varje kommando för "config" får en rad i denna tabell.)
ID - Unikt ID
Variable - Här läggs det kommando som skall köras tex. "target".
Default - Värdet kommandot har från början för att kunna återställa menyn.
Value - Värdet kommandot har nu.
Active - Om kommandot skall köras eller ej.
Description - Här finns orginal beskrivning för vad kommandot gör. Detta för att enkelt kunna lista ut ett antal boxar med tillhörande beskrivning i ett ev. admin-system.
Tree_Menu_Config
Fältnamn | Fälttyp
--------------------
ID | Räknare
Variable | Text
Default | Text
Value | Text
Active | Ja/Nej
Description | Text
Filen global.asa
För att underlätta brukar jag ofta lägga min connectionsträng i en application variable i filen global.asa Tycker detta är ett smidigt sätt att spara connectionsträngen på i ett lite större projekt eller när man flyttar filerna mellan olika maskiner. Smyger alltså in det som ett litet tips här för er som inte nyttjat denna möjlighet tidigare. (Kommer dock inte gå in närmare på hur det fungerar)Lägg följande kod i en text-fil och döp den till "global.asa":
<script language=VBScript runat=Server>
Sub Application_OnStart()
application("DBpath") = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=D:\Inetpub\wwwroot\asp\dtree\db\db.mdb;Persist Security Info=False"
End Sub
</script>
För att öppna vår connection kör vi sedan:
ObjConn.Open Application("DBpath")
Hämta info från databas och lista ut meny samt inställningar
I head-attributet av vår fil lägger vi sökvägar för *.css och vår javascript fil:
Response.Write("") & vbCrlf
Response.Write("<script type=""text/javascript"" src=""dtree/dtree.js""></script>") & vbCrlf
I body börjar vi sedan med att sätta ett namn på vårt träd, skriva ut öppna/stäng funktion samt att starta trädet.
'//Set Tree Name
strMenuName = "MyTree"
'//Open & Close All
Response.Write("<a href=""javascript: " & strMenuName & ".openAll();"">open all</a> | <a href=""javascript: " & strMenuName & ".closeAll();"">close all</a></p>") & vbCrlf
Response.Write("<script type=""text/javascript"">") & vbCrlf
Response.Write("<!--") & vbCrlf
'//Start Tree
Response.Write(strMenuName & " = new dTree('" & strMenuName & "');") & vbCrlf
Vi fortsätter med att koppla oss mot databasen, hämta vårt meny innehåll från tabellen "Tree_Menu" och sedan loopa ut innehållet.
'//Build Tree
Set ObjConn = Server.CreateObject("ADODB.Connection")
ObjConn.Open Application("DBpath")
Set ObjRs = Server.CreateObject("ADODB.Recordset")
strSQL = "SELECT * FROM Tree_Menu;"
ObjRs.Open strSQL,ObjConn,3,1
If Not ObjRs.EOF Then
intNumberOfRecords = ObjRs.RecordCount
For intMenuItem = 1 To intNumberOfRecords
Response.Write(strMenuName & ".add(" & (objRs("ID")-1) & "," & (objRs("PID")-1) & ",'" & objRs("Name") & "','" & objRs("Url") & "','" & objRs("Title") & "','" & objRs("Target") & "','" & objRs("Icon") & "','" & objRs("IconOpen") & "','" & objRs("Open") & "');") & vbCrlf
ObjRs.MoveNext
Next
End If
strSQL = ""
intNumberOfRecords = 0
ObjRs.Close
Vi hämtar innehållet i vår konfigurationstabell och loopar ut innehållet på samma sätt som ovan innan vi stänger databasen.
'//Tree Configuration
strSQL = "SELECT * FROM Tree_Menu_Config WHERE Active = True;"
ObjRs.Open strSQL,ObjConn,3,1
If Not ObjRs.EOF Then
intNumberOfRecords = ObjRs.RecordCount
For intConfigItem = 1 To intNumberOfRecords
Response.Write(strMenuName & ".config." & ObjRs("Variable") & " = " & ObjRs("Value") & ";") & vbCrlf
ObjRs.MoveNext
Next
End If
strSQL = ""
intNumberOfRecords = 0
ObjRs.Close
Set ObjRs = Nothing
ObjConn.Close
Set ObjConn = Nothing
Tillslut avslutar vi med att att rita ut trädet och avsluta script-taggen.
'//Write Tree
Response.Write("document.write(" & strMenuName & ");") & vbCrlf
Response.Write("//-->") & vbCrlf
Response.Write("</script>") & vbCrlf
Koden i sin helhet
<%
Response.Write("<html>") & vbCrlf
Response.Write("<head>") & vbCrlf
Response.Write("<title>dTree Menu") & vbCrlf
Response.Write("<link rel=""StyleSheet"" href=""css/dtree.css"" type=""text/css"" />") & vbCrlf
Response.Write("<script type=""text/javascript"" src=""dtree/dtree.js""></script>") & vbCrlf
Response.Write("") & vbCrlf
Response.Write("") & vbCrlf
Response.Write("<div class=""dtree"">") & vbCrlf
'//Set Tree Name
strMenuName = "MyTree"
'//Open & Close All
Response.Write("<a href=""javascript: " & strMenuName & ".openAll();"">open all | close all</a>") & vbCrlf
Response.Write("<script type=""text/javascript"">") & vbCrlf
Response.Write("<!--") & vbCrlf
'//Start Tree
Response.Write(strMenuName & " = new dTree('" & strMenuName & "');") & vbCrlf
'//Build Tree
Set ObjConn = Server.CreateObject("ADODB.Connection")
ObjConn.Open Application("DBpath")
Set ObjRs = Server.CreateObject("ADODB.Recordset")
strSQL = "SELECT * FROM Tree_Menu;"
ObjRs.Open strSQL,ObjConn,3,1
If Not ObjRs.EOF Then
intNumberOfRecords = ObjRs.RecordCount
For intMenuItem = 1 To intNumberOfRecords
Response.Write(strMenuName & ".add(" & (objRs("ID")-1) & "," & (objRs("PID")-1) & ",'" & objRs("Name") & "','" & objRs("Url") & "','" & objRs("Title") & "','" & objRs("Target") & "','" & objRs("Icon") & "','" & objRs("IconOpen") & "','" & objRs("Open") & "');") & vbCrlf
ObjRs.MoveNext
Next
End If
strSQL = ""
intNumberOfRecords = 0
ObjRs.Close
'//Tree Configuration
strSQL = "SELECT * FROM Tree_Menu_Config WHERE Active = True;"
ObjRs.Open strSQL,ObjConn,3,1
If Not ObjRs.EOF Then
intNumberOfRecords = ObjRs.RecordCount
For intConfigItem = 1 To intNumberOfRecords
Response.Write(strMenuName & ".config." & ObjRs("Variable") & " = " & ObjRs("Value") & ";") & vbCrlf
ObjRs.MoveNext
Next
End If
strSQL = ""
intNumberOfRecords = 0
ObjRs.Close
Set ObjRs = Nothing
ObjConn.Close
Set ObjConn = Nothing
'//Write Tree
Response.Write("document.write(" & strMenuName & ");") & vbCrlf
Response.Write("//-->") & vbCrlf
Response.Write("</script>") & vbCrlf
Response.Write("</div>") & vbCrlf
Response.Write("</body>") & vbCrlf
Response.Write("</html>") & vbCrlf
%>
Ladda ner filerna
Filerna som benämns i denna artickel finns att ladda ned här.1.) Packa upp dem.
2.) Placera katalogen "dtree" i din wwwroot-katalog.
3.) Ändra sökvägen i filen "global.asa" så att stämmer med din lokala sökväg.
4.) Klart!
Obs! Detta dokument innehåller fel i html-taggar, en sluttagg saknas. Vänligen korrigera dessa!
Johan Moberg
Jag skulle vilja tacka dig Anders för artikeln, den verkar kanon! Ska genast sätta mig ner och läsa igenom den. TACK!
Anders Friborg
Artickeln såg lite ostrukturerad ut så jag passade på att strukturera upp den. Ändrat så att innehållsförteckningen fungerar korrekt, ändrat stavfel samt snyggat till layout. Är det något jag missat eller att ni rent av har problem med artickeln -> skicka ett iMail.
Anna-Karin Söderberg
Det skulle vara bra om exempel filerna kom upp så att man kan kolla dem om man har problem med att få koden att fungera.
Anders Friborg
Ett tekniskt missöde gjorde att filerna försvann. Nu är de tillbaka på sin rätta plats igen. Enjoy!
Sina Tikab
var finns filerna?