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;}

相关推荐