求js遍历树的代码！

2008-11-22 05:18:43 3.2k 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

FastAdmin框架Token验证实战：从登录到API调用的完整流程本文详细解析了在FastAdmin框架中实现Token验证的完整流程，从数据表设计、登录接口签发Token，到核心验证中间件的编写与路由配置，并探讨了在业务API中的调用与安全实践。内容涵盖Token生成策略、有效期管理及安全增强措施，为开发者提供了一套可落地的API身份验证解决方案。阅读详情

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

已完成的代码：http://download.csdn.net/source/784541
先谢过！

...全文

病理图像处理个人手札（三）WSI & MIL 1.什么是WSI？ WSI全称是Whole Slide Image，也就是全视野数字切片，主要应用在病理学细胞图像领域。WSI 是利用数字扫描仪对传统的病理切片进行扫描，采集具有高分辨率的数字图像，再通过计算机将得到的碎片化图像进行无缝拼接整合，制作可视化数字图像的一项技术。与传统载玻片相比，很好地解决了传统的玻璃切片易损坏、易褪色、易丢片、检索困难的问题。一言以蔽之，WSI是对传统载玻片进行数字化。由于是全视野，因此它将包含多尺度的切片在一个文件上面。因此WSI将使用到金字塔模型满足其支持不同分辨率的阅读详情

chunyou128

JavaScript 87,983 成员 224,681 内容

+ 关注 + 加入社区

切换为时间正序

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遍历树的代码！

相关推荐