jstree 简单解决方案之节点换肤
爱读书的旅行者 2011-03-11
写在前面：
前一篇文章jstree简单解决方案，主要讲了jstree的一些基本用法，在这里讨论一下jstree的节点换皮肤。
当然本文还是基于jstree0.99a版本和jquery-1.3.2.js为基础写的。
Js代码
1.<scripttype="text/javascript"src="jquery-1.3.2.js"></script>
2.<scripttype="text/javascript"src="jquery.tree.js"></script>
3.<scripttype="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.},//enddata
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.<divid="container">
55.<h2class="title">JsTree</h2>
56.<divid="vcsTree"></div>
57.</div>
<scripttype="text/javascript"src="jquery-1.3.2.js"></script>
<scripttype="text/javascript"src="jquery.tree.js"></script>
<scripttype="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"
}
},//enddata
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>
<divid="container">
<h2class="title">JsTree</h2>
<divid="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.Alreadyfixeditwithsomejquerycode:
2.
3.insteadof
4.//jstree的types设置，和上面的代码并无多大区别，只是图片方式和jstree的提取方式是一样的，从一张png图片分割出自己想要的部分(个人说法)。
5.types:{
6."default":{icon:{image:'icon.png',position:'00'}}
7."root":{icon:{image:'icon.png',position:'-16px0'}}
8."folder":{icon:{image:'icon.png',position:'-32px0'}}
9."page":{icon:{image:'icon.png',position:'-32px0'}}
10.}
11.
12.//注释1，放在tree初始化代码后
13.Iwrote(afterinitilizationtree)
14.$("li[rel='root']>ains").addClass("root");
15.$("li[rel='folder']>ains").addClass("folder");
16.$("li[rel='page']>ains").addClass("page");
17.
18.//注释2，添加在style.css文件内
19.andinstyle.css
20..tree-classicli.openains.root,.tree-classicli.openains.folder,.tree-classic
21.li.openains.page
22.{background-image:url('icons.png');}
23..tree-classicli.openains.root{background-position:0-48px;}
24..tree-classicli.openains.folder{background-position:00;}
25..tree-classicli.openains.page{background-position:-16px0;}
Alreadyfixeditwithsomejquerycode:
insteadof
//jstree的types设置，和上面的代码并无多大区别，只是图片方式和jstree的提取方式是一样的，从一张png图片分割出自己想要的部分(个人说法)。
types:{
"default":{icon:{image:'icon.png',position:'00'}}
"root":{icon:{image:'icon.png',position:'-16px0'}}
"folder":{icon:{image:'icon.png',position:'-32px0'}}
"page":{icon:{image:'icon.png',position:'-32px0'}}
}
//注释1，放在tree初始化代码后
Iwrote(afterinitilizationtree)
$("li[rel='root']>ains").addClass("root");
$("li[rel='folder']>ains").addClass("folder");
$("li[rel='page']>ains").addClass("page");
//注释2，添加在style.css文件内
andinstyle.css
.tree-classicli.openains.root,.tree-classicli.openains.folder,.tree-classic
li.openains.page
{background-image:url('icons.png');}
.tree-classicli.openains.root{background-position:0-48px;}
.tree-classicli.openains.folder{background-position:00;}
.tree-classicli.openains.page{background-position:-16px0;}
