我的上一篇文章《KTree 组件需求规格》，将javascript 树型组件的功能规格定义了下来。我对树型组件的研究，从2周前就开始了，现在代码完成，发布出来，供大家使用。
先看一下效果：
1. 有根节点、有连线、各层树枝显示图片自定义：
2. 无根节点，无连线，各层树枝显示图片自定义：
3. 无连接线、显示CheckBox：
怎么样，不错吧。
下面讲一下怎么在页面上生成这棵树：
1. 引入ktree.js 和ktree.css 文件，这个大家都非常熟悉了：
<link rel="StyleSheet" href="ktree/ktree.css" type="text/css" />
<script type="text/javascript" src="ktree/ktree.js"></script>
2. 确定KTree 要显示的位置，先把script的元素写上：
<script type="text/javascript">
<!-- 我们要写的代码都在这里 -->
</script>
3. 创建树对象，如下：
k = new KTree('k', 'myTree1', 'ktree/img/');
KTree 函数原型为：
function KTree(objName, treeId, imgPath)；
第一个参数：objName:此树对象实例的变量名，必需。就是”=”前面的那个k啊，这个变量必须是全局变量，因此变量前面不能有var。
第二个参数：treeId：树对象的Id，必需。可以任意命名，但名字需要唯一，这样可以支持一个页面有多个树。
第三个变量：KTree 内置图片的存放目录，必需。连线、加减号等都是图片，因此需要指定存放位置，这样开发者就可以根据自己的目录规划，把KTree的图片放到指定的目录下。
4. 设置显示图片：
k.setImageList('ktree/img/base.gif', 'ktree/img/folder.gif',
'ktree/img/folderopen.gif', 'ktree/img/globe.gif', 'table.png',
'shape_handles.png');
setImageList 设置树枝和树叶显示时使用的各个图片，图片个数任意个。那么怎么指定树枝显示是哪个图片，树叶显示是哪个图片？见下面的函数：
k.setDirImages(1, 2);
k.setDirImages(4, 5, 1);
setDirImages 函数是设置显示树枝的图片，函数原型如下：
setDirImages = function(closeIndex, openIndex, dirLevel);
参数如下：
closeIndex : 树枝折叠时，显示图片在ImageList 数组中的索引下标，下标从0开始。
openIndex：树枝展开时，显示图片在ImageList 数组中的索引下标，下标从0开始。
dirLevel: 目录的层次，从0开始，0表示第一层树枝。可选参数，不填时表示默认层次，即没有专门指定图片的树枝层次，都统一使用默认层次指定的折叠和展开图片。
setDirImages函数可以被多次调用，这样就可以为不同层次目录设置不同显示的图片。
设置树叶显示图片的方法：
setLeafImages = function(unselectedIndex, selectedIndex);
unselectedIndex : 树叶未被选中时显示的图片索引，从0开始。
selectedIndex：树叶被选中时显示的图片，可选参数。如不填，则一直显示unselectedIndex的图片。
5. 设置根节点显示：
setRoot = function(rootId, rootName, imageIndex);
设置根节点的参数，如下：
rootId: 根节点的Id值。任何一个树节点，都至少有3个基本属性：id,pid,name. id 指应用程序中此对象的唯一编号（不是HTML Element ID），pid 指父节点的id。Name指显示的文本。此参数可选，缺省为－1。
rootName: 根节点显示的文本，可选参数。如不提供此参数，表示不显示根节点。
imageIndex: 根节点显示图片的索引下标。可选参数。
如果不调用setRoot 函数，表示不显示根节点，树根的id 为 －1。
6. 设置显示风格：
是否显示连线：k.showLine(false); 参数true显示连线，参数false不显示连线。如果不调用此函数，缺省显示连线。
是否显示CheckBox：k.showCheckbox(true);参数true表示树叶节点将显示checkbox, 参数false则不显示。如果不调用此函数，缺省不显示checkbox。
7．增加树枝：
k.addDir(1, -1, '营销资费管理', null, null, 'hypo3.html','mainFrame');
k.addDir(2,1,'产品资费定价');
addDir是增加树枝函数，原型如下：
addDir = function(id, pid, name, icon, openIcon, url, target);
参数如下：
id : 此树枝节点id
pid: 此树枝节点的父节点id。父节点必须在子节点前被加入到树中。如果pid == rootId, 表示此树枝是第1层树枝，dirLevel == 0.
name : 树枝的显示文本。
icon : 树枝折叠时显示的图片。有三种取值：1) null,表示使用setDirImages指定的图片；2) 图片索引下标，数字，表示用ImageList中指定下标的图片显示； 3) 图片全路径的字符串，表示用这个指定的图片来显示；
openIcon : 树枝展开时显示的图片，取值方法与icon 相同。
url：超链接指向的URL，可选
target ：超链接指向的target，可选
8．增加树叶：
k.addLeaf(99,11,'Node 22');
addLeaf 函数增加一个树叶，函数原型如下：
addLeaf = function(id, pid, name, icon, openIcon, url, target);
参数的取值，都与addDir 相同。增加树叶时，树叶的父节点必须已经被填加到树中。
9. 显示树：
document.write(k);
以上语句，其实是调用了KTree.toString() 方法，返回生成好的HTML元素，添加到document中，于是树就显示出来了。
10. 获得选中的节点：
如果树设置成显示checkbox, 那么用户可以多选，获得用户选中了哪些节点的方法是：
var nodes = k.getSelectNodes();
getSelectNodes() 函数返回的是一个数组，数组中每个成员都是一个Node 对象，Node对象的主要属性有id, pid, name, icon, openIcon, url, target，这些都非常简单。
以上，将KTree的使用方法讲解了一下，具体使用，请见我提供的test_ktree.html示例。
[/img]..
社区：
