IT教程 | 加入收藏 | 简体 | 繁体
Tangram教程:JavaScript...JQuery教程ExtJS教程Tangram教程Ajax教程
当前位置: 首页 > Js+Ajax > Tangram教程

baidu.ui.Tree 管理和操作TreeNode

2012-07-29来源:[www.121ask.com]热度:0℃ 【字体:

baidu.ui.Tree

Tree:管理和操作TreeNode

  语法: new baidu.ui.Tree(options)  

返回值:<instance> 实例对象

  参数

<Object> * options  
<Object> * options.data 节点数据集合 {text: "", children: [{text: ""},{text: ""}]}
<Boolean> * options.expandable 是否改变trunk的状态到leaf,当一个trunk的子节点数为0时,如果为true,那么就变为leaf的状态,否则就不会变
<Function>    options.onclick 节点被点击后触发。
<Function>    options.ontoggle 节点被展开或收起后触发。
<Function>    options.onload Tree渲染后触发。

实例方法

<void> render(...) 渲染树
<Object> getTreeNodes() 取得树的节点的集合map,treeNode的id与treeNode的键值对。
<TreeNode> getRootNode() 取得树的最根节点
<TreeNode> getTreeNodeById(...) 通过id属性来取得treeNode
<TreeNode> getCurrentNode() 取得树的当前节点
<TreeNode> setCurrentNode(...) 设置节点为树的当前节点
<void> dispose() 销毁Tree对象

 实例:

<body>
 
<div id="treeId" style="padding: 50px;"></div>
 
</body>
 
<script type="text/javascript">
 
var instance = new baidu.ui.Tree({data: {id: "root", type:"", text: "根节点", children: [{id: "rsid0", type:"trunk", text: "节点-0(节点id:rsid0)", children: [{id: "rsid00", type:"leaf", text: "子节点-0-0(节点id: rsid00)", children: [] },{id: "rsid01", type:"leaf", text: "子节点-0-1(节点id: rsid01)", children: [] },{id: "rsid02", type:"leaf", text: "子节点-0-2(节点id: rsid02)", children: [] }] },{id: "rsid1", type:"trunk", text: "节点-1(节点id:rsid1)", children: [{id: "rsid10", type:"leaf", text: "子节点-1-0(节点id: rsid10)", children: [] },{id: "rsid11", type:"leaf", text: "子节点-1-1(节点id: rsid11)", children: [] },{id: "rsid12", type:"leaf", text: "子节点-1-2(节点id: rsid12)", children: [] }] },{id: "rsid2", type:"leaf", text: "节点-2(节点id:rsid2)", children: [] },{id: "rsid3", type:"leaf", text: "节点-3(节点id:rsid3)", children: [] },{id: "rsid4", type:"leaf", text: "节点-4(节点id:rsid4)", children: [] }] }, onload: function(evt){evt.target.getRootNode().expandAll();}});
 
instance.render("treeId");
 
/*
 
(function(){
 
  alert(instance.getRootNode().text);
 
})();
 
*/
 
/*
 
(function(){
 
  var current = instance.getCurrentNode();
 
  alert(current ? current.text : '请选择一个节点');
 
})();
 
*/
 
/*
 
(function(){
 
  var map = baidu.object.keys(instance.getTreeNodes());
 
  alert('总共有 ' + map.length + ' 个节点');
 
})();
 
*/
 
/*
 
(function(c){
 
  var node = getTreeNode.call(this, c);
 
  alert(node ? node.text : '没有该节点,请检查id是否正确');
 
})('rsid0');
 
*/
 
//提示:您可以使用注释中的代码进行演示
 
</script>

 

以上IT文章《baidu.ui.Tree 管理和操作TreeNode》由名客技术网[www.121ask.com]提供阅读!
推广信息
推广信息
名客技术网是一个免费为广大IT技术人员提供IT教程,绿色软件,asp/php/jsp/java/net等实例视频教程,CMS教程,破解软件下载以及学习相关源码、知识的IT网站。
名客技术网如果无意之中侵犯了您的版权,请来电告知,本站将在3个工作日内删除 QQ:175352796
Copyright 2011-2017 Powered by 121ASK.COM, All Rights Reserved.
备案号:鄂ICP备11013833号-3