js动态树的生成方式总结

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的地址"(如果存在子结点，否则没有该属性，注意连接符是&amp;)   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转义字符对应码
&lt;  < 小于
&gt;  > 大于
&amp;  &  和
&apos;  ' 单引号
&quot;  " 双引号

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);