在.Net環境中,本人覺得iewebcontrols控件做的很不錯,但是在一個Java項目中,我想找一個TreeView web控件,試過了xtree以及YUI,但始終感覺不如iewebcontrols中的treeview做的好,我想:可不可以將它移植過來呢?
我將頁面生成的Html文件保存下來,分析了一下,以下是測試腳本:
- //**********************************************************************************************//
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
- <HTML>
- <HEAD>
- <title>tree</title>
- <meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
- <meta name="CODE_LANGUAGE" content="Visual Basic .NET 7.1">
- <meta name="vs_defaultClientScript" content="JavaScript">
- <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
- <LINK href="css/style.css" _fcksavedurl=""css/style.css"" type="text/css" rel="stylesheet">
- </HEAD>
- <SCRIPT>
- //通過NodeData查找節點
- function getNodeByData(tree,data){
- var root=tree.getChildren();
- for(var i=0;i<root.length;i++){
- if(root[i].getAttribute("NodeData")==data){
- return root[i];
- }else if(root[i].getChildren().length>0){
- var node=getNodeByData(root[i],data);
- if(node!=null) return node;
- }
- }
- return null;
- }
- //通過節點文本查找節點
- function getNodeByText(tree,text){
- var root=tree.getChildren();
- for(var i=0;i<root.length;i++){
- if(root[i].getAttribute("Text")==text){
- return root[i];
- }else if(root[i].getChildren().length>0){
- var node=getNodeByData(root[i],text);
- if(node!=null) return node;
- }
- }
- return null;
- }
- //測試添加節點
- function doadd(){
- //alert(tvNodes.getTreeNode(tvNodes.selectedNodeIndex).getAttribute("NodeData"));
- var node1=getNodeByText(tvNodes,'權限管理');
- var node2=getNodeByData(tvNodes,'1101');
- //alert(node1.getAttribute("NodeData"));
- //alert(node2.getAttribute("Text"));
- var node3=tvNodes.createTreeNode();
- if(node1!=null && node2!=null){
- node3.setAttribute("NodeData","1109");
- node3.setAttribute("Text",node2.getAttribute("Text"));
- node3.setAttribute("NavigateUrl",node2.getAttribute("NavigateUrl"));
- node3.setAttribute("ImageUrl",node2.getAttribute("ImageUrl"));
- node3.setAttribute("SelectedImageUrl",node2.getAttribute("SelectedImageUrl"));
- node3.setAttribute("ExpandedImageUrl",node2.getAttribute("ExpandedImageUrl"));
- node3.setAttribute("Target",node2.getAttribute("Target"));
- node1.add(node3);
- }
- }
- //測試刪除節點
- function dodel(){
- var node=getNodeByData(tvNodes,'1109');
- //alert(node.getParent().getAttribute("Text"));//獲取父節點
- if(node!=null) node.remove();
- }
- </SCRIPT>
- <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" rightmargin="0" scroll="no">
- <form name="Form1" method="post" action="left.aspx" id="Form1">
- <input type="hidden" name="__tvNodes_State__" value=""/>
- <FONT face="宋體">
- <TABLE class="Table0" id="TableLeft" cellSpacing="1" cellPadding="1" border="0" width="180"
- height="100%">
- <TR>
- <TD><?XML:NAMESPACE PREFIX=TVNS />
- <?IMPORT NAMESPACE=TVNS IMPLEMENTATION="webctrl_client/1_0/treeview.htc" />
- <tvns:treeview id="tvNodes" selectedNodeIndex="0" HelperID="__tvNodes_State__" systemImagesPath="./webctrl_client/1_0/TreeImages/" onexpand="javascript: if (this.clickedNodeIndex != null) this.queueEvent('onexpand', this.clickedNodeIndex)" oncollapse="javascript: if (this.clickedNodeIndex != null) this.queueEvent('oncollapse', this.clickedNodeIndex)" oncheck="javascript: if (this.clickedNodeIndex != null) this.queueEvent('oncheck', this.clickedNodeIndex)" onselectedindexchange="javascript: if (event.oldTreeNodeIndex != event.newTreeNodeIndex) this.queueEvent('onselectedindexchange', event.oldTreeNodeIndex + ',' + event.newTreeNodeIndex)" style="height:100%;width:175px;Z-INDEX: 101">
- <tvns:treenode Expanded="True" Selected="true" NavigateUrl="baseinfo/info_employee_main.aspx" NodeData="1000" ImageUrl="images/image/page.gif" SelectedImageUrl="images/image/xiaotu.jpg" ExpandedImageUrl="images/image/expand.gif" Target="mainFrame">
- 基本信息管理<tvns:treenode NavigateUrl="baseinfo/info_employee_main.aspx" NodeData="1001" ImageUrl="images/image/page.gif" SelectedImageUrl="images/image/xiaotu.jpg" ExpandedImageUrl="images/image/expand.gif" Target="mainFrame">
- 用戶管理
- </tvns:treenode><tvns:treenode NavigateUrl="baseinfo/info_company_main.aspx" NodeData="1002" ImageUrl="images/image/page.gif" SelectedImageUrl="images/image/xiaotu.jpg" ExpandedImageUrl="images/image/expand.gif" Target="mainFrame">
- 部門公司管理
- </tvns:treenode><tvns:treenode NavigateUrl="baseinfo/info_BaseCode_main.aspx" NodeData="1003" ImageUrl="images/image/page.gif" SelectedImageUrl="images/image/xiaotu.jpg" ExpandedImageUrl="images/image/expand.gif" Target="mainFrame">
- 基本代碼管理
- </tvns:treenode>
- </tvns:treenode>
- <tvns:treenode Expanded="True" NavigateUrl="right/user_node.aspx" NodeData="1100" ImageUrl="images/image/page.gif" SelectedImageUrl="images/image/xiaotu.jpg" ExpandedImageUrl="images/image/expand.gif" Target="mainFrame">
- 權限管理<tvns:treenode NavigateUrl="right/Auth_node_info.aspx" NodeData="1101" ImageUrl="images/image/page.gif" SelectedImageUrl="images/image/xiaotu.jpg" ExpandedImageUrl="images/image/expand.gif" Target="mainFrame">
- 節點信息
- </tvns:treenode><tvns:treenode NavigateUrl="right/Auth_right_info.aspx" NodeData="1102" ImageUrl="images/image/page.gif" SelectedImageUrl="images/image/xiaotu.jpg" ExpandedImageUrl="images/image/expand.gif" Target="mainFrame">
- 頁面管理
- </tvns:treenode><tvns:treenode NavigateUrl="right/Auth_role_info.aspx" NodeData="1103" ImageUrl="images/image/page.gif" SelectedImageUrl="images/image/xiaotu.jpg" ExpandedImageUrl="images/image/expand.gif" Target="mainFrame">
- 角色信息
- </tvns:treenode><tvns:treenode NavigateUrl="right/user_node.aspx" NodeData="1201" ImageUrl="images/image/page.gif" SelectedImageUrl="images/image/xiaotu.jpg" ExpandedImageUrl="images/image/expand.gif" Target="mainFrame">
- 節點授權
- </tvns:treenode><tvns:treenode NavigateUrl="right/user_right.aspx" NodeData="1202" ImageUrl="images/image/page.gif" SelectedImageUrl="images/image/xiaotu.jpg" ExpandedImageUrl="images/image/expand.gif" Target="mainFrame">
- 頁面授權
- </tvns:treenode><tvns:treenode NavigateUrl="right/user_role.aspx" NodeData="1203" ImageUrl="images/image/page.gif" SelectedImageUrl="images/image/xiaotu.jpg" ExpandedImageUrl="images/image/expand.gif" Target="mainFrame">
- 用戶角色管理
- </tvns:treenode><tvns:treenode NavigateUrl="right/user_query.aspx" NodeData="1204" ImageUrl="images/image/page.gif" SelectedImageUrl="images/image/xiaotu.jpg" ExpandedImageUrl="images/image/expand.gif" Target="mainFrame">
- 查詢授權
- </tvns:treenode>
- </tvns:treenode>
- </tvns:treeview>
- </TD>
- </TR>
- </TABLE>
- <table style="position: absolute; width: 200px; top: 100px; left: 300px; height: 100%;">
- <input type='button' value='add' οnclick='doadd()'></input>
- <input type='button' value='delete' οnclick='dodel()'></input>
- </table>
- </FONT>
- </form>
- </body>
- </HTML>
- //**********************************************************************************************//
在該腳本中,我添加了四個函數,分別用來:(1)通過NodeData查找節點;(2)通過節點文本查找節點;(3)添加節點;(4)刪除節點。我想具備了這幾個功能之後,在jsp當中就可以靈活的使用這個treeview組件了。
技術說明:在這個組件當中,使用了兩個很關鍵的技術:htc以及XML命名空間,當然也用到了DOM和Javascript,在我的腳本當中,使用了裏面的方法和屬性,詳細使用和功能需要揣摩webctrl_client\1_0下的treeview.htc文件中的方法和屬性
說明:在java環境中,如果出現樹的部分圖片顯示不正常,檢查一下圖片鏈接地址是否有問題,參考路徑是systemImagesPath,還有一種可能情況是圖片的名稱大小寫是否一致,不一致的話修改圖片名稱,因爲在java環境中很多服務器的文件名是區分大小寫的。