1.dtree方式
dTree 2.05 | www.destroydrop.com/javascript/tree/
| 第一个参数,表示当前节点的ID |
| 第二个参数,表示当前节点的父节点的ID,根节点的值为 -1 |
| 第三个参数,节点要显示的文字 |
| 第四个参数,节点的Url |
| 第五个参数,鼠标移至该节点时节点的Title |
| 第六个参数,节点的target |
| 第七个参数,用做节点的图标,节点没有指定图标时使用默认值 |
| 第八个参数,用做节点打开的图标,节点没有指定图标时使用默认值 |
| 第九个参数,判断节点是否打开 |
tree =new dTree('tree');
tree.add('3','-1','Name,'','','main');//根结点
应用于:可全部下载树
2.xtree
| 第一个参数,根结点显示的文字 |
| 第二个参数,动态生成的.xml文档 |
文件格式
<treeNode>
<TreeNode text=名称 value=编号 src="动态生成xml的地址"(如果存在子结点,否则没有该属性,注意连接符是&) action="链接地址" target="打开框架的id"/>
</treeNode>
var atree = new WebFXLoadTree("Name","/system/loadMenu.shtml?type=tree&menuId=root");
document.write(atree);
应用于:ajax方式动态生成树,即动态生成xml.
3.xmlselTree
A.XML文件形如以下
<?xml version='1.0' encoding='gb2312'?>
<Root>
<TreeNode Title='测试001' CheckData="001" check="true">
<TreeNode Title='目录测试444' CheckData="001" />
</TreeNode>
</Root>
B.参数说明:
Title 结点标题
Caption 鼠标移至结点上时出现的注释
Onclick 点击结点触发的事件
Href 点击结点的链接
Target 打开结点链接时的目标域
NodeXMLSrc 异步加载数据的链接地址
CheckData checkbox框的值
Checked checkbox框是否选中: true选中 false不选中
C.XML转义字符对应码
< < 小于
> > 大于
& & 和
' ' 单引号
" " 双引号
D.实例化函数参数说明:
InitTree(p_sXMLFile, p_sXSLPath, p_oSrcDiv,
p_bCheckChangeChildByFather, p_bAutoGoFisrtLeaf, p_bChangeLeafImg )
m_sXMLFile 输出xml标签的文件
p_sXSLPath 树型xsl/js文件路径 ,默认/treeRes/
p_oSrcDiv 存放div的ID
p_bCheckChangeChildByFather
应用与1类似
4.ext方式
A 动态请求后台,得json数据。
//系统主菜单
SystemMenuPanel = function() {
SystemMenuPanel.superclass.constructor.call(this, {
autoScroll : true,
animate : true,
border : false,
rootVisible : false,
root : new Ext.tree.AsyncTreeNode( {
text : '系统管理',
draggable : false,
expanded : true
}),
loader : new Ext.tree.TreeLoader({
dataUrl:'/system/loadMenu.shtml?type=json',
baseParams: {menuId:'Root'},
clearOnLoad : false ,
preloadChildren : false,
requestMethod : "GET"
}),
listeners : {
beforeload :function(node){
if ('ynode-13' != node.attributes.id)
this.loader.baseParams.menuId = node.attributes.id;
},
click : function(node) {
if (null != node.attributes.url){
panel = new Ext.Panel({
id : node.attributes.id,
title : node.attributes.title,
autoScroll:true,
closable:true,
html:"<div style='height:100%;height:100%'>"
+"<iframe id='ifrm_"+node.attributes.id+"' name='ifrm_"+node.attributes.id+"' src='"+node.attributes.url+"' "
+"width='100%' height='100%' frameborder=0/>"
+"</div>"
});
main.openTab(panel);
}
}
}
});
}
Ext.extend(SystemMenuPanel, Ext.tree.TreePanel);
B.增加到面板中
MenuPanel = function() {
MenuPanel.superclass.constructor.call(this, {
id : 'menu',
region : 'west',
title : "系统菜单",
split : true,
width : 170,
minSize : 125,
maxSize : 300,
collapsible : true,
margins : '0 0 5 5',
cmargins : '0 0 0 0',
layout : "accordion",
defaults:{autoScroll:true},
layoutConfig : {
titleCollapse : true,
animate : true
},
items:[
{
title : "系统管理",
iconCls:"icon-vip",
items : [new SystemMenuPanel()]
}]
});
};
Ext.extend(MenuPanel, Ext.Panel);