jstree 简单解决方案之节点换肤

jstree王者归来： QQqun 105564508  希望能与各位在线交流探讨



写在前面 ：
前一篇文章jstree 简单解决方案，主要讲了jstree的一些基本用法，在这里讨论一下jstree的节点换皮肤。
当然本文还是基于 jstree 0.99a 版本和 jquery-1.3.2.js为基础写的。

<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文件内

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

在firefox上效果：


本代码见附件： themes.rar    请下载使用后记得留言您的更正结果，期待各位的答复

测试过的兄弟，赶紧回个帖啊，大家探讨一下

本段 js代码 是添加一楼.tree()方法后面的一段代码：
功能：  在对应节点图标添加 css类，增加对 IE 浏览器的 支持 。

 $("li[rel='root'] a:first-child ins").addClass('root');
 $("li[rel='folder'] a:first-child ins").addClass('folder');
 $("li[rel='leaf'] a:first-child ins").addClass('leaf');

本段 css代码 是添加在jstree  classic 皮肤包的style.css文件里：
功能： 添加 在IE 显示对应节点图标 的样式

/* NODE ICONS  ADD BY GAOJC*/
.tree-classic li.open a ins.root { background:url("root.png") no-repeat; }
.tree-classic li.open a ins.folder { background:url("folder.png") no-repeat; }
.tree-classic li.open a ins.leaf { background:url("leaf.png") no-repeat; }

但结果令人失望，IE还是不支持节点换肤，哪位能解决此处问题的回复一下。谢谢

嘿嘿，节点换肤问题终于解决了，问题并没有想象的那么复杂，只是在json串里，添加节点的图标即可，其原理就是给节点添加css，替换掉原始节点的背景图片。
之前1楼中写在最后的代码也是添加样式，然后让样式生效，只是我一直没有使用出来效果。
1楼中代码里的types里的root，folder，leaf代码就可以去掉了。

在json里添加如此代码：    在data属性添加   icon:"root.png",
json代码格式应为：

[
{attributes: {id : "rootnode",rel: "root"},
data : {title: "rootnode",icon:"root.png"},
state: "closed"
]

原理如图示：

你的例子在IE6下看没有成功！

请仔细看3楼的回复，那里有测试成功的范例

你就给一个正确的嘛，方正你说的三个方法都试了，还是不行！

以前不怎么明白，现在感觉jstree真不错啊，收藏一下