ningwuyu 发表于 2013-2-8 00:13:28

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

写在前面 :
前一篇文章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 > a ins").addClass("root");   
15.$("li > a ins").addClass("folder");   
16.$("li > 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 > a ins").addClass("root");
$("li > a ins").addClass("folder");
$("li > 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;}
页: [1]
查看完整版本: jstree 简单解决方案之节点换肤