求js遍历树的代码！

chunyou128 2008-11-22 05:18:43
我想点击树下面的button，就可以把树上已选中的文件的绝对路径（只显示file），写到一个文件中，效果如下图：


已完成的代码：http://download.csdn.net/source/784541
先谢过！
...全文
3113 16 打赏 收藏 转发到动态 举报
写回复
用AI写文章
16 条回复
切换为时间正序
请发表友善的回复…
发表回复
chunyou128 2008-11-27
  • 打赏
  • 举报
 回复
第1个div的style改一下就可以了。加一个float属性。
<div id="tree-div" style="overflow:auto; float: left; height:400px;width:250px;border:1px solid #c3daf9;"></div>
这样就可以让div左右排列了...
chunyou128 2008-11-26
  • 打赏
  • 举报
 回复
reorder.js


/*

 * Ext JS Library 2.2

 * Copyright(c) 2006-2008, Ext JS, LLC.

 * licensing@extjs.com

 * 

 * http://extjs.com/license

 */

Ext.QuickTips.init();

Ext.apply(Ext.QuickTips.getQuickTip(),{

//maxWidth: 200,

//minWidth: 100,

//showDelay: 50,

//trackMouse: true,

//hideDelay: true, 

//closable: true,

//autoHide: false,

//draggable: true,

dismissDelay: 0

});



var root = new Ext.tree.AsyncTreeNode({

			text: 'C:',

			draggable:false,

			id:'\\'

});



Ext.onReady(function(){

    // shorthand

    var Tree = Ext.tree;

    

    var tree = new Tree.TreePanel({

        el:'tree-div',

        useArrows:true,

        autoScroll:true,

        animate:true,

        enableDD:true,

        containerScroll: true,



        // auto create TreeLoader

        dataUrl: 'get-nodes.php',



        root: root,

					tbar : [{

        text : "选择目录",

        handler : function() {

        getSelectedItems("Root",root);

        }

        }

        ]



    });

	    tree.on('checkchange', function(node, checked) {      

        node.expand();      

        node.attributes.checked = checked;      

        node.eachChild(function(child) {      

            child.ui.toggleCheck(checked);      

            child.attributes.checked = checked;  

            child.fireEvent('checkchange', child, checked);      

        });      

    }, tree);     







    // render the tree

    tree.render();

    tree.getRootNode().expand();



});



//从根节点遍历整个tree， 把叶子列出来放在一个div里面，

function getSelectedItems(parentPath, _root){

	if(_root){

		for(var i in _root){

			//alert(i + ": " + _root[i]);

		}

		var nodes = _root.childNodes;

		//alert(nodes.length);

		if(nodes.length==0){

		 return;

		}

		for(var i=0; i<nodes.length; i++){

			if(nodes[i].attributes['checked']){

				var div = document.createElement("div");

				div.appendChild(document.createTextNode(parentPath + "\\" + nodes[i].text));

				document.getElementById("selectedItems").appendChild(div);



			}

			if(!nodes[i].leaf){

				//递归调用自己，以实现遍历

				getSelectedItems(parentPath+ "\\" + nodes[i].text,  nodes[i]);

			}

		}

	}

				var s = document.getElementById("selectedItems").innerText

				var  fso  =  new  ActiveXObject("Scripting.FileSystemObject");  

				var  a  =  fso.CreateTextFile("c:\\testfile.txt",  true);  

				a.WriteLine(s);  

				a.Close();  

				alert("我已经在你的C盘根目录下生成了一个testfile.txt的文件！");  



}

reorder.html


<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Reorder TreePanel</title>

<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />

    <!-- GC -->

     <!-- LIBS -->

 	<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>

     <!-- ENDLIBS -->



    <script type="text/javascript" src="ext/ext-all.js"></script>

<script type="text/javascript" src="reorder.js"></script>



<!-- Common Styles for the examples -->

<link rel="stylesheet" type="text/css" href="ext/examples/shared/examples.css" />

</head>

<body>

<script type="text/javascript" src="ext/examples/shared/examples.js"></script><!-- EXAMPLES -->

<p>The js is not minified so it is readable. See <a href="reorder.js">reorder.js</a>.</p>



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

<br>

<div id="selectedItems" style="overflow:auto; height:400px;width:250px;border:1px solid #c3daf9;">

</body>

</html>

上面的代码，在结合我的工程，就能基本回答我提的问题了。。。
youchun128 2008-11-26
  • 打赏
  • 举报
 回复
triace_zhang 2008年11月26日 13点11分04秒 说：
我不会php，但你如果要显示部门全路径，那么tree读取节点的时候就要把部门全路径作为节点的一个属性传到前台。
比如后台的json里的一个节点用path这个属性保存全路径,应该这样写：
{id:'2',text:'AUTOEXEC.BAT',path:'c:/AUTOEXEC.BAT',checked:......}

给button加上点击事件
里面先取得所有选中的节点,比如拼一个字串，用来传给后台,由后台处理程序写入文件：

var nodes = tree.getChecked();
var values = '';

for (var i = 0; i < nodes.length; ++i){
var node = nodes[i];
var value = node.attributes['path']; //取节点的path属性
if (typeof value != 'undefined') {
if (values.length > 0){
values += '\n';
}
values += value;
}
}

然后写一个Ext.Ajax.request 把values传到后台写入文件
chunyou128 2008-11-26
  • 打赏
  • 举报
 回复 


        tbar : [{

            text : "加载通讯录",

            handler : function() {

            getSelectedItems("Root",root);

            }

        }

        ]

在TreePanel中加入上述代码，就可以出现带button的tbar，但加入到我的工程里就出错，不知道为什么？
chunyou128 2008-11-26
  • 打赏
  • 举报
 回复
[Quote=引用 9 楼 chunyou128 的回复:]
代码也运行起来了，但是把所有树叶（文件）的绝对路径都列了出来，我只想列出被选中…
[/Quote]
改下红字部分就行：
function getSelectedItems(parentPath, _root){
if(_root){
for(var i in _root){
//alert(i + ": " + _root[i]);
}
var nodes = _root.childNodes;
if(nodes.length==0){
return;
}
for(var i=0; i<nodes.length; i++){
if(nodes[i].attributes['checked']){ var div = document.createElement("div");
div.appendChild(document.createTextNode(parentPath + "\\" + nodes[i].text));
document.getElementById("selectedItems").appendChild(div);
}
if(!nodes[i].leaf){
//递归调用自己，以实现遍历
getSelectedItems(parentPath+ "\\" + nodes[i].text, nodes[i]);
}
}
}
}
chunyou128 2008-11-25
  • 打赏
  • 举报
 回复
[Quote=引用 10 楼 syukugai 的回复:]
JScript code
if (typeof value != 'undefined' && node.childNodes == null) {
}
[/Quote]
大侠,这句的node.childNodes == null好像不起作用,再说,还是不能把已选择的节点连成绝对路径啊...
不悲不喜 2008-11-25
  • 打赏
  • 举报
 回复 
            for (var i = 0; i < nodes.length; ++i) {

                var node = nodes[i];

                var value = node.attributes['text'];

                if (typeof value != 'undefined' && node.childNodes == null) {

                    values.push(value);

                }

            }
chunyou128 2008-11-25
  • 打赏
  • 举报
 回复 


var nodes = tree.getChecked();

var values = new Array();



for (var i = 0; i < nodes.length; ++i){

var node = nodes[i];

var value = node.attributes['text'];

if (typeof value != 'undefined') {

values.push(value);

}

}

这是triace_zhang大侠给的代码，可以正确获得已选节点的text；sunxing007大侠的代码也运行起来了，但是把所有树叶（文件）的绝对路径都列了出来，我只想列出被选中树叶（文件）的绝对路径，继续求救！

zou_wei_forever 2008-11-24
  • 打赏
  • 举报
 回复
mark
chunyou128 2008-11-24
  • 打赏
  • 举报
 回复
[Quote=引用 1 楼 sunxing007 的回复:]
function getSelectedItems(parentPath, _root){
if(_root){
var nodes = _root.childNodes;
if(nodes.length==0){
return;
}
for(var i=0; i<nodes.length; i++){
var div = document.createElement("div");
div.appendChild(document.createTextNode(parentPath + "\\" + nodes[i].text));
document.getElementById("selectedItems").appendChild(div);
if(!nodes[i].leaf){
//递归调用自己，以实现遍历
getSelectedItems(parentPath+ "\\" + nodes[i].text, nodes[i]);
}
}
}
}
[/Quote]

for(var i=0; i<nodes.length; i++){
var div = document.createElement("div");
if(nodes[i].checked){ div.appendChild(document.createTextNode(parentPath + "\\" + nodes[i].text));
document.getElementById("selectedItems").appendChild(div);
}
if(!nodes[i].leaf){
//递归调用自己，以实现遍历
getSelectedItems(parentPath+ "\\" + nodes[i].text, nodes[i]);
}
}
我想通过红色字体部分获得checked属性，但不行，有没有别的办法了呢？
triace_zhang 2008-11-24
  • 打赏
  • 举报
 回复
extjs的Ext.tree.TreePanel不是有getChecked这个函数吗?就是用来得到所有打上勾的节点的

getChecked( [String attribute], [TreeNode startNode] ) : Array
Retrieve an array of checked nodes, or an array of a specific attribute of checked nodes (e.g. "id")
Retrieve an array of checked nodes, or an array of a specific attribute of checked nodes (e.g. "id")
Parameters:

attribute : String
(optional) Defaults to null (return the actual nodes)
startNode : TreeNode
(optional) The node to start from, defaults to the root
Returns:

Array
wuting202 2008-11-23
  • 打赏
  • 举报
 回复
好好看看API,1.0和2.0有很大的差别的 可能是你用tree的时候属性不对 ，el的内容发一下
sunxing007 2008-11-23
  • 打赏
  • 举报
 回复
不过我参照的api却是2.2的， 也就是说在2.2上面应该没问题。
sunxing007 2008-11-23
  • 打赏
  • 举报
 回复
我的版本为ext2.0的，因为2.2的听说product要收费，就尽量不用了。
chunyou128 2008-11-23
  • 打赏
  • 举报
 回复
大侠，我不知哪里配置错了，firebug报错：
this.el has no properties
Action()("tree-ct")ext-all.js （行 58）
Action()(Object applyTo=tree-ct width=568 height=300)ext-all.js （行 58）
getViewWidth()()ext-base.js （行 9）
getViewWidth()()ext-base.js （行 9）
getViewWidth()()ext-base.js （行 9）
getViewWidth()()ext-base.js （行 9）
(?)()()reorder.js （行 58）
EventManager()()ext-all.js （行 12）
camelFn()()ext-all.js （行 13）
[Break on this error] Ext.Component=function(B){B=B||{};if(B.i...)}});Ext.reg("component",Ext.Component);
sunxing007 2008-11-23
  • 打赏
  • 举报
 回复
我给你做了一个例子，在这个树展开完毕之后就会把所有节点放到一个div里面， 你可以试着改进你的。
tree.js:


var root = null;;

Ext.onReady(function() {

	root = new Ext.tree.TreeNode({

		id : '0',

		text : 'Root',

		leaf : false,

		checked: true

	});

	var level1 = new Ext.tree.TreeNode({

		id : '01',

		leaf : false,

		text : 'Level 1 -1',

		checked: true

	});

	level1.appendChild(new Ext.tree.TreeNode({

		id : '011',

		leaf : false,

		text : 'Level 2 -1',

		checked: true

	}));

	level1.appendChild(new Ext.tree.TreeNode({

		id : '012',

		leaf : false,

		text : 'Level 2 -2',

		checked: true

	}));

	level1.appendChild(new Ext.tree.TreeNode({

		id : '013',

		leaf : false,

		text : 'Level 2 -3',

		checked: false

	}));

	root.appendChild(level1);

	root.appendChild(new Ext.tree.TreeNode({

		id : '02',

		leaf : true,

		text : 'Level 1 -2',

		checked: true

	}));



	var tree = new Ext.tree.TreePanel({

		applyTo : 'tree-ct',

		width : 568,

		height : 300,

		checkModel : 'cascade',

		onlyLeafCheckable : true,

		animate : false,

		rootVisible : true,

		autoScroll : true,

		root : root

	});



	tree.getRootNode().expand();

	

	getSelectedItems("Root",root);



});



//从根节点遍历整个tree， 把叶子列出来放在一个div里面，

function getSelectedItems(parentPath, _root){

	if(_root){

		var nodes = _root.childNodes;

		if(nodes.length==0){

		 return;

		}

		for(var i=0; i<nodes.length; i++){

			var div = document.createElement("div");

			div.appendChild(document.createTextNode(parentPath + "\\" + nodes[i].text));

			document.getElementById("selectedItems").appendChild(div);

			if(!nodes[i].leaf){

				//递归调用自己，以实现遍历

				getSelectedItems(parentPath+ "\\" + nodes[i].text,  nodes[i]);

			}

		}

	}

}

tree.jsp:


<html>

  <head>

    <title>starting page</title>

<库文件需要你自己填上>

    <script type="text/javascript" src="js/tree.js"></script>  

    

    <script type="text/javascript">

    

    </script>

    

    <style type="text/css">

    

    </style>

  </head>

  

  <body>

<DIV id="tree-ct" style="BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; OVERFLOW: auto; HEIGHT: 400px; BORDER-RIGHT-WIDTH: 0px"></DIV>    

<div style="border: solid red 1px;" id="selectedItems"></div>

</body>

</html>
JS遍历树层级关系实现原理解析
主要介绍了JS遍历树层级关系实现原理解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
js代码-蛇形遍历树
js代码-蛇形遍历树
js代码-遍历树树树
js代码-遍历树树树
使用递归和dom遍历dom树形结构
使用递归和dom遍历dom树形结构 完整代码
javascript先序遍历DOM树的方法
DOM树由文档中的所有节点（元素节点、文本节点、注释节点等）所构成的一个树结构，DOM树的解析和构建是浏览器要实现的关键功能。既然DOM树是一个树结构，那么我们就可以使用遍历树结构的相关方法来对DOM树进行遍历，同时DOM2中的”Traversal”模块又提供了两种新的类型，从而可以很方便地实现DOM树的先序遍历。 注：本文中的5种方法都是对DOM的先序遍历方法(深度优先遍历)，并且只关注Element类型。 1. 使用DOM1中的基础接口，递归遍历DOM树 DOM1中为基础类型Node提供了一些api，通过这些api可以完成一些基础的DOM操作。使用递归遍历DOM树的代码比较简单，核心思想就
JavaScript

87,910

社区成员

224,616

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章