注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

汇总技巧

你快乐我快乐.... 汇集各类技巧,传播技巧,让我们共同熟练运用技巧..

 
 
 

日志

 
 

基于数据库动态生成树形目录  

2011-06-03 11:55:19|  分类: ◆ASP技巧 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
一、 目录树的广泛应用
为了这段内容,在百度上搜了搜,内容一大通,相关的竟没有。搜什么搜嘛?用处不是明摆着吗?资源管理器文件夹的管理,论坛中多级论坛的管理,JAVA中的AWT正是缺乏包括树形目录这样的组件才用处受限......谁这么没礼貌,一点面子都不给,叫我怎么讲下去?清了清嗓子:
在我们项目中常常会出现自关联的数据表,从整体看去,整个表就呈现为一个树形数据结构。当我们对这个表进行显示、编辑时,如果不采用好的表现形式,会显得很笨拙,采用树形目录进行管理显然是一个不错的主意。
(斧子抡了一圈,感觉好极了,接着讲...)在WEB中树形目录可以用Javascript实现,但一些细节问题上例如树形目录传值(点击一个子节点,打开相关链接),多级目录以及节点的增加、删除、拖动上受各种制肘。其实采用第三方控件显然也是个不错的主意。
二、 关于智岛目录树控件
好,我们今天的主人公--轻便犀利的智岛目录树控件(下载地址:http://www.oapro.com/ostarocx/download/OTree.ocx
target=_blank>http://www.oapro.com/ostarocx/download/OTree.ocx">http://www.oapro.com/ostarocx/download/OTree.ocx

三、 注册添加控件
1. 注册智岛目录树控件
下载(下载地址:
http://www.oapro.com/ostarocx/download/OTree.ocx
target=_blank>http://www.oapro.com/ostarocx/download/OTree.ocx">http://www.oapro.com/ostarocx/download/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
target=_blank>http://www.oapro.com/ostarocx/download/OTree.ocx">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!--节点名称--
 NodeTypehref/NodeType!--节点类型--
 NodeDataMyDesk.aps/NodeData!--节点数据--
 Lock0/Lock!--是否锁定0/1--
 ImageIndex0/ImageIndex
 /NodeItem
 NodeItem
 NodeName我的办公桌\公告通知/NodeName!--节点名称--
 NodeTypehref/NodeType!--节点类型--
 NodeData公告通知.aps/NodeData!--节点数据--
 Lock0/Lock!--是否锁定0/1--
 ImageIndex0/ImageIndex
 /NodeItem
 NodeItem
 NodeName我的办公桌\公告通知\电子邮件/NodeName!--节点名称--
 ImageIndex0/ImageIndex
 /NodeItem
 NodeItem
 NodeName我的办公桌\公告通知\电子邮件\收件箱/NodeName!--节点名称--
 ImageIndex4/ImageIndex
 /NodeItem
 NodeItem
 NodeName我的办公桌\公告通知\电子邮件\发件箱/NodeName!--节点名称--
 ImageIndex4/ImageIndex
 /NodeItem
 NodeItem
 NodeName我的办公桌\公告通知\电子邮件\已发邮件/NodeName!--节点名称--
 /NodeItem
 NodeItem
 NodeName我的办公桌\日程安排/NodeName!--节点名称--
 ImageIndex0/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
 ImageIndex0/ImageIndex
 Creator/Creator
 RightDepartmen|开发部|市场部|/RightDepartmen
 RightUser/RightUser
 Lock0/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.EO
 if rsSchema(TABLE_TYPE)=TABLE then
%
 NodeItem
 NodeName%=datasource%\%=rsSchema(Table_Name)%/NodeName
 NodeTypehref/NodeType
 NodeData%=rsSchema(Table_Name)%/NodeData
 ImageIndex4/ImageIndex
 Creator/Creator
 RightDepartmen|开发部|市场部|/RightDepartmen
 RightUser/RightUser
 Lock0/Lock
 /NodeItem
%
 end i
 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
target=_blank>http://www.oapro.com/ostarocx/sample/Dataman/OTree.asp,datasource=OTree.mdb">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。在这个范例中,从下拉框中选择数据库名称后树形目录的内容会发生变化,点击节点会显示该节点所代表的数据表中的数据内容。整个范例充分展示了上面文章内容的技术细节。下面是范例截图:
target=_blank>http://www.oapro.com/ostarocx/sample/ogrid_f">http://www.oapro.com/ostarocx/sample/ogrid_f。在这个范例中,从下拉框中选择数据库名称后树形目录的内容会发生变化,点击节点会显示该节点所代表的数据表中的数据内容。整个范例充分展示了上面文章内容的技术细节。下面是范例截图:
  评论这张
 
阅读(241)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017