从已有的html结构生成树

从已有的html结构生成树

HTML关键代码

<div id="treeContainer" style="width: 200px;">
        <!-- 直接通过DOM中已有的结构生成一棵树  -->
        <div id='root' class="ks-tree-root">
                <span class="ks-tree-node-label">淘宝网</span>
                <div class="ks-tree-children">
                        <div class="ks-tree-node">
                                <span class="ks-tree-node-label">收藏夹</span>
                                <div class="ks-tree-children">
                                        <div class="ks-tree-node">
                                                <span class="ks-tree-node-label">收藏的宝贝</span>
                                        </div>
                                        <div class="ks-tree-node ks-tree-node-folder">
                                                <span class="ks-tree-node-label">收藏的店铺</span>
                                        </div>
                                </div>
                        </div>
                        <div class="ks-tree-node">
                                <span class="ks-tree-node-label">我要买</span>
                        </div>
                </div>
        </div>
</div>

初始化树

KISSY.use("tree", function(S, Tree) {
	var $ = S.all;

	//通过DOM元素结构新建一棵树
	var tree = new Tree({
		content : "淘宝网",

		expanded : true,
		srcNode : "#root"
	});

	tree.render();
    
    //为树增加事件
	tree.on("click", function(e) {
		alert("action : " + e.target.get("content"));
	});

    //增加两个Button来调用树的接口
	$('<input type="button" value="全部收缩" style="margin:5px;"/>')
        .on('click',function(){
            //通过外部调用树的接口操作树
            tree.collapseAll();
        }).prependTo($('#treeContainer'));
    $('<input type="button" value="全部展开" style="margin:5px;"/>')
        .on('click',function(){tree.expandAll();})
        .prependTo($('#treeContainer'));
});