一、 目錄樹的廣泛應用
爲了這段內容,在百度上搜了搜,內容一大通,相關的竟沒有。搜什麼搜嘛?用處不是明擺着嗎?資源管理器文件夾的管理,論壇中多級論壇的管理,JAVA中的AWT正是缺乏包括樹形目錄這樣的組件才用處受限......誰這麼沒禮貌,一點面子都不給,叫我怎麼講下去?清了清嗓子:
在我們項目中常常會出現自關聯的數據表,從整體看去,整個表就呈現爲一個樹形數據結構。當我們對這個表進行顯示、編輯時,如果不採用好的表現形式,會顯得很笨拙,採用樹形目錄進行管理顯然是一個不錯的主意。
(斧子掄了一圈,感覺好極了,接着講...)在WEB中樹形目錄可以用Javascript實現,但一些細節問題上例如樹形目錄傳值(點擊一個子節點,打開相關鏈接),多級目錄以及節點的增加、刪除、拖動上受各種制肘。其實採用第三方控件顯然也是個不錯的主意。
二、 關於智島目錄樹控件
好,我們今天的主人公--輕便犀利的智島目錄樹控件(下載地址:http://www.oapro.com/ostarocx/download/OTree.ocx)出場了。它採用VC++6.0開發,是標準的OCX控件,可以應用於Windows環境下VB、VC、PB、Dephi、ASP、JSP等編程語言中。它採用XML文件作爲接口文件,該接口文件既可以是一個現成的文件,也可以是動態生成的XML格式文件(換句話說可以基於數據庫動態生成目錄樹節點)。智島目錄樹控件支持節點的複製、移動、重命名以及權限控件,並且沒有對目錄的層數進行限制。介紹了這麼多,想必欲欲越試了。在ASP中小試牛刀先:
三、 註冊添加控件
1. 註冊智島目錄樹控件
下載(下載地址:http://www.oapro.com/ostarocx/download/OTree.ocx)智島目錄樹控件(其文件名爲OTree.ocx)後,按照如下方法註冊控件:
點擊“開始”→“運行”;在運行對話框中輸入以下命令: regsvr32 < OTree.ocx文件的絕對路徑> 註冊智島目錄樹控件控件 regsvr32 /u < OTree.ocx文件的絕對路徑> 解除智島目錄樹控件的註冊
2. 在頁面中添加智島目錄樹控件
在頁面中加入以下代碼,即可插入智島目錄樹控件:
<object classid="clsid:D835ED15-0BD0-4F24-AC76-A60175AE1137" id="OTree" width="150" height="0" CODEBASE="http://www.oapro.com/ostarocx/download/OTree.ocx"> <param name="_Version" value="65536"> <param name="_ExtentX" value="2646"> <param name="_ExtentY" value="1323"> <param name="_StockProps" value="0"> </object>
其中: width和height:指控件的顯示寬度和高度; id:指控件對象的名稱,通過該名稱實現對控件的操作; CODEBASE:指沒有安裝智島目錄樹控件的客戶端運行該頁面時自動下載安裝該控件的地址。
三、 從XML文件生成樹形目錄
1. XML文檔格式
XML是個好東東,不過也要符合一定的格式呀,不然控件可不認哦!下面是一份XML文檔格式:
<?xml version="1.0" encoding="GB2312"?> <NaviTree> <NodeItem> <NodeName> </NodeName><!--節點名稱--> <NodeType> </NodeType><!--節點類型--> <NodeData> </NodeData><!--節點數據--> <ImageIndex> </ImageIndex><!--節點圖片--> <Creator> </Creator><!--生成者--> <RightDepartmen>|開發部|</RightDepartmen><!--對此目錄有權的部門--> <RightUser> </RightUser><!--對此目錄有權的用戶--> <Lock> </Lock><!--是否鎖定0/1--> </NodeItem> ... </NaviTree>
其中: NodeName:指節點名稱,如有上級節點,要包括上級節點名稱,節點名稱間以符號"/"分隔。例“我的辦公桌/公告通知/電子郵件”表明根節點爲“我的辦公桌”,父節點爲“公告通知”,本節點爲“電子郵件”。如果問你包含五級的節點名稱是怎樣時,呵呵,不要拿西紅柿扔我! NodeType:節點類型,一般均指“href”。 ImageIndex:節點名稱前顯示的小圖標,其中0表示文件夾狀圖標,4表示數據表狀圖標。
下面是一份xml格式文檔源碼:
<?xml version="1.0" encoding="GB2312"?> <NaviTree> <NodeItem> <NodeName>我的辦公桌</NodeName><!--節點名稱--> <NodeType>href</NodeType><!--節點類型--> <NodeData>MyDesk.aps</NodeData><!--節點數據--> <Lock>0</Lock><!--是否鎖定0/1--> <ImageIndex>0</ImageIndex> </NodeItem> <NodeItem> <NodeName>我的辦公桌/公告通知</NodeName><!--節點名稱--> <NodeType>href</NodeType><!--節點類型--> <NodeData>公告通知.aps</NodeData><!--節點數據--> <Lock>0</Lock><!--是否鎖定0/1--> <ImageIndex>0</ImageIndex> </NodeItem> <NodeItem> <NodeName>我的辦公桌/公告通知/電子郵件</NodeName><!--節點名稱--> <ImageIndex>0</ImageIndex> </NodeItem> <NodeItem> <NodeName>我的辦公桌/公告通知/電子郵件/收件箱</NodeName><!--節點名稱--> <ImageIndex>4</ImageIndex> </NodeItem> <NodeItem> <NodeName>我的辦公桌/公告通知/電子郵件/發件箱</NodeName><!--節點名稱--> <ImageIndex>4</ImageIndex> </NodeItem> <NodeItem> <NodeName>我的辦公桌/公告通知/電子郵件/已發郵件</NodeName><!--節點名稱--> </NodeItem> <NodeItem> <NodeName>我的辦公桌/日程安排</NodeName><!--節點名稱--> <ImageIndex>0</ImageIndex> </NodeItem> <NodeItem> <NodeName>我的辦公桌/日程安排/日曆</NodeName><!--節點名稱--> </NodeItem> </NaviTree>
2. 代碼實現
通過以下語句通知智島目錄樹控件打開XML文檔:
OTree.OpenXMLFile("")
其中引號內XML文檔的絕對路徑,例如: OTree.OpenXMLFile("C:/OTree.xml")
運行效果見下圖:
已看見你頻頻點頭的樣子,但又喃喃自語:如果要根據數據庫中內容生成樹形目錄該...?呵呵,下面我們就進入正題(敢情前面這麼多文字是騙稿費的啊?誰?噓...,小聲點,千萬別讓小編聽見):
四、 基於數據庫生成樹形目錄
1. XML文檔格式
將樹形目錄的節點存入數據庫,爲我們動態形成樹形目錄打下良好的基礎。當然,也有些目錄樹是表現一個數據庫中的數據結構(父節點是數據庫名,子節點是數據表)。不管如何,有了前面的基礎,現在我們所需做的只是將數據庫的內容形成上面格式的XML文檔。下面有一份ASP源碼,將數據庫中結構形成XML文檔,其中變量datasource存儲傳遞過來的數據庫名稱。
<?xml version="1.0" encoding="GB2312"?> <NaviTree> <% dim datasource datasource=request("datasource") %> <NodeItem> <NodeName><%=datasource%> <NodeType></NodeType> <NodeData></NodeData> <ImageIndex>0</ImageIndex> <Creator></Creator> <RightDepartmen>|開發部|市場部|</RightDepartmen> <RightUser></RightUser> <Lock>0</Lock> </NodeItem> <% strConn="DBQ="+server.mappath("db/"&datasource)+";DefaultDir=;DRIVER={Microsoft Access Driver (*.mdb)};" set objConn=server.createobject("Adodb.connection") objConn.open strConn set rsSchema=objConn.openSchema(20) rsSchema.movefirst Do Until rsSchema.EOF if rsSchema("TABLE_TYPE")="TABLE" then %> <NodeItem> <NodeName><%=datasource%>/<%=rsSchema("Table_Name")%></NodeName> <NodeType>href</NodeType> <NodeData><%=rsSchema("Table_Name")%></NodeData> <ImageIndex>4</ImageIndex> <Creator></Creator> <RightDepartmen>|開發部|市場部|</RightDepartmen> <RightUser></RightUser> <Lock>0</Lock> </NodeItem> <% end if rsSchema.movenext Loop set objConn=nothing %>
</NaviTree>
2. 代碼實現
這時候的接口方法跟直接打開XML文檔的不一樣了:
OTree.SetNodeXML(OTree.HttpGet("http://www.oapro.com/ostarocx/sample/Dataman/OTree.asp","datasource=OTree.mdb"))
其中方法HttpGet有二個參數,第一個參數爲我們上面介紹的實現數據庫轉換XML格式的網頁地址,一定要爲網址格式,不能用相對或絕對路徑 (因爲目前該方法尚不支持),第二個參數爲傳遞到該文件的參數,這裏我們傳遞的是數據庫名稱。
按照上面的介紹你很快的實現了一個樹形目錄,點根節點,展開,點父節點,展開,再點...,咦,怎麼沒反應?你希望有什麼反應?噢,不好意思,差點忘介紹了:
五、 響應節點事件
智島樹形目錄控件提供了一個接口方法用以響應節點事件:
EventTreeSelchanged(strItemName, strItemData,strItemType)
其中: strItemName 節點名稱 strItemData 節點數據 strItemType 節點類型 這三個參數由智島樹形目錄控件提供給我們開發者,供我們調用。
我們可通過腳本實現對事件的觸發,以下是一範例代碼:
<SCRIPT FOR="OTree" EVENT="EventTreeSelchanged(strItemName, strItemData, strItemType)" LANGUAGE="JavaScript" > alert(strItemName); </SCRIPT>
以上代碼實現了點擊節點時,彈出一對話框顯示該節點的名稱。
六、 範例
嗯,好累呀!用敲鍵盤敲得差點變形的小手揉揉看屏幕看得發酸的大眼睛,又閃過一個念頭,再給出一個範例吧:http://www.oapro.com/ostarocx/sample/ogrid_f 。在這個範例中,從下拉框中選擇數據庫名稱後樹形目錄的內容會發生變化,點擊節點會顯示該節點所代表的數據表中的數據內容。整個範例充分展示了上面文章內容的技術細節。下面是範例截圖:
|