ext-ui.com

两个(多个)根节点的树

Posted 周六, 11/01/2008 - 22:25 by admin

改编自ExtJs 自带的tree例子，可以为该树选择两个以上的根节点。

原理:ExtJs 的树并不支持多个根节点,但它提供了一个隐藏根节点的属性.
其实就是相当于新建一个虚拟的根节点,然后把多个节点挂到该节点上,然后再把虚拟的根节点隐藏.
我们看到所有二级节点都变成了根节点,变相实现了多个根节点的功能.

演示(demo)地址在文章最后.

效果图如下：

源代码包括：0008_two_root_tree.html
0008_two_root_tree.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>两个(多个)根节点的树</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="../../examples/examples.css" />
<script type="text/javascript" src="../../examples.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
    // shorthand
    var Tree = Ext.tree;
    
    var tree = new Tree.TreePanel({
        el:'tree-div',
        useArrows:true,
        autoScroll:true,
        animate:true,
        enableDD:true,
		rootVisible : false,
        containerScroll: true, 
        loader: new Tree.TreeLoader({
            dataUrl:'../../examples/tree/get-nodes.php'
        })
    });
	
	var root = new Ext.tree.TreeNode({
					text : 'extjs.org.cn',
					draggable : false,
					id : 'extjs.org.cn'
				});
	tree.setRootNode(root);	

    // set the root node
    var root1 = new Tree.AsyncTreeNode({
        text: 'Ext JS',
        draggable:false,
        id:'source'
    });
    root.appendChild(root1);
	
	// set the root node
    var root2 = new Tree.AsyncTreeNode({
        text: 'Ext Plugins',
        draggable:false,
        id:'plugins'
    });
    root.appendChild(root2);

    // render the tree
    tree.render();
    root.expand();
});
</script>
</head>
<body>
<h1>两个(多个)根节点的树</h1>
<p>改编自ExtJs 自带的tree例子，可以为该树选择两个以上的根节点。</p>

<p>原理:ExtJs 的树并不支持多个根节点,但它提供了一个隐藏根节点的属性.
<br />      其实就是相当于新建一个虚拟的根节点,然后把多个节点挂到该节点上,然后再把虚拟的根节点隐藏.
<br />      我们看到所有二级节点都变成了根节点,变相实现了多个根节点的功能. </p>

<div id="tree-div" style="overflow:auto; height:300px;width:250px;border:1px solid #c3daf9;"></div>

</body>
</html>

演示(demo)地址:
http://extjs.org.cn/extjs/mydemo/tree/0008_two_root_tree.html

（版权声明：本篇文章版权属于extjs.org.cn所有，可以在互联网上进行转载，转载必须保留作者版权声明及链接；也可以文章用于出版、发行或其它商业用途，仅仅需要保留作者版权声明及链接。）

  • 要发表评论，请先登录