写在前面 ：
前一篇文章jstree 简单解决方案，主要讲了jstree的一些基本用法，在这里讨论一下jstree的节点换皮肤。
当然本文还是基于 jstree 0.99a 版本和 jquery-1.3.2.js为基础写的。
Js代码
1.<script type="text/javascript" src="jquery-1.3.2.js"></script>
2.<script type="text/javascript" src="jquery.tree.js"></script>
3.<script type="text/javascript" language="javascript">
4. <!--
5. $(function () {
6. $.ajaxSetup({cache:false});//ajax调用不使用缓存
7. $("#vcsTree").tree({//创建树开始
8. data : {
9. type : "json",//类型为json
10. async : true,//动态操作
11. opts : {
12. method : "get",
13. url : "async_json_data2.json"
14. }
15. },//end data
16. ui:{
17. theme_name : "classic"
18. },
19. lang:{
20. loading : "目录加载中……"
21. },
22. rules : {
23. type_attr : "rel", //设置节点类型
24. valid_children : "root" // 只有root节点才能作为顶级结点
25. },
26. types :{
27. "default" : {
28. clickable : true,
29. draggable : false //设置节点不可拖拽
30. },
31. "root" : {
32. valid_children : "folder", //设置下级节点类型，可是数组
33. icon : {
34. image : "root.png"//设置当前节点icon图片,路径自己决定
35. }
36. },
37. "folder" : {
38. valid_children : "leaf",
39. icon : {
40. image : "folder.png"
41. }
42. },
43. "leaf" : {
44. valid_children : "none",
45. icon : {
46. image : "leaf.png"
47. }
48. }
49. }
50. });
51. });
52. //-->
53.</script>
54.<div id="container">
55. <h2 class="title">JsTree</h2>
56. <div id="vcsTree"></div>
57.</div>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.tree.js"></script>
<script type="text/javascript" language="javascript">
<!--
$(function () {
$.ajaxSetup({cache:false});//ajax调用不使用缓存
$("#vcsTree").tree({//创建树开始
data : {
type : "json",//类型为json
async : true,//动态操作
opts : {
method : "get",
url : "async_json_data2.json"
}
},//end data
ui:{
theme_name : "classic"
},
lang:{
loading : "目录加载中……"
},
rules : {
type_attr : "rel", //设置节点类型
valid_children : "root" // 只有root节点才能作为顶级结点
},
types :{
"default" : {
clickable : true,
draggable : false //设置节点不可拖拽
},
"root" : {
valid_children : "folder", //设置下级节点类型，可是数组
icon : {
image : "root.png"//设置当前节点icon图片,路径自己决定
}
},
"folder" : {
valid_children : "leaf",
icon : {
image : "folder.png"
}
},
"leaf" : {
valid_children : "none",
icon : {
image : "leaf.png"
}
}
}
});
});
//-->
</script>
<div id="container">
<h2 class="title">JsTree</h2>
<div id="vcsTree"></div>
</div>
特别提示 ：
jstree0.99a的 换肤固然简单，但是还是存在bug的，不支持IE6，7系列浏览器，但对firefox，和chrome浏览完全兼容，具体bug修正jstree作者已在最新版jstree1.0进行修正。
如果有已经解决此bug的兄弟，希望能告知一下各位兄弟，把代码贴出来大家学习一下。
写在最后:
这里是国外的一位哥们对此bug的修正，他并未修改jstree的源代码，只是在jstree初始化代码后添加了一段代码。
根据他的改写，在IE上不同节点还是不能显示不同的图标，所以感觉 自己 水平有限 ，希望能和各位探讨学习。
仅需修改两处代码：
1. 如注释1处所写，放在tree初始化代码后。
2. 如注释2， 添加在style.css文件内
Js代码
1.Already fixed it with some jquery code:
2.
3.instead of
4.//jstree的types设置 ，和上面的代码并无多大区别，只是图片方式和jstree的提取方式是一样的，从一张png图片分割出自己想要的部分(个人说法)。
5.types : {
6. "default" : { icon : { image : 'icon.png', position : '0 0' } }
7. "root" : { icon : { image : 'icon.png', position : '-16px 0' } }
8. "folder" : { icon : { image : 'icon.png', position : '-32px 0' } }
9. "page" : { icon : { image : 'icon.png', position : '-32px 0' } }
10.}
11.
12.//注释1 ，放在tree初始化代码后
13.I wrote (after initilization tree)
14.$("li[rel='root'] > a ins").addClass("root");
15.$("li[rel='folder'] > a ins").addClass("folder");
16.$("li[rel='page'] > a ins").addClass("page");
17.
18.//注释2 ，添加在style.css文件内
19.and in style.css
20..tree-classic li.open a ins.root, .tree-classic li.open a ins.folder, .tree-classic
21.li.open a ins.page
22.{background-image:url('icons.png');}
23..tree-classic li.open a ins.root{background-position:0 -48px;}
24..tree-classic li.open a ins.folder{background-position:0 0;}
25..tree-classic li.open a ins.page{background-position:-16px 0;}
Already fixed it with some jquery code:
instead of
//jstree的types设置 ，和上面的代码并无多大区别，只是图片方式和jstree的提取方式是一样的，从一张png图片分割出自己想要的部分(个人说法)。
types : {
"default" : { icon : { image : 'icon.png', position : '0 0' } }
"root" : { icon : { image : 'icon.png', position : '-16px 0' } }
"folder" : { icon : { image : 'icon.png', position : '-32px 0' } }
"page" : { icon : { image : 'icon.png', position : '-32px 0' } }
}
//注释1 ，放在tree初始化代码后
I wrote (after initilization tree)
$("li[rel='root'] > a ins").addClass("root");
$("li[rel='folder'] > a ins").addClass("folder");
$("li[rel='page'] > a ins").addClass("page");
//注释2 ，添加在style.css文件内
and in style.css
.tree-classic li.open a ins.root, .tree-classic li.open a ins.folder, .tree-classic
li.open a ins.page
{background-image:url('icons.png');}
.tree-classic li.open a ins.root{background-position:0 -48px;}
.tree-classic li.open a ins.folder{background-position:0 0;}
.tree-classic li.open a ins.page{background-position:-16px 0;}