`
ningwuyu
  • 浏览: 49131 次
  • 性别: Icon_minigender_1
  • 来自: 沈阳
社区版块
存档分类
最新评论

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

    博客分类:
  • java
阅读更多


写在前面 :
前一篇文章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;}



分享到:
评论

相关推荐

    JSTree(js写的树形菜单,支持加载10000节点以上)

    JSTree作为一个强大且灵活的JavaScript树形菜单组件,为开发者提供了解决大数据量加载问题的有效工具。其高效、易用和可扩展的特性,使其在各种Web应用中广泛应用,无论是企业级后台管理界面,还是用户友好的前端...

    jsTree 很好用的动态加载数

    动态加载是 jsTree 的核心特性之一,它允许在用户滚动或展开树节点时按需加载数据,而不是一次性加载所有数据。这种机制对于处理大量数据特别有用,因为它减少了初始页面加载时间,提高了用户体验。通过设置适当的...

    jsTree中文文档

    jsTree 有多种事件可以监听,比如 `ready.jstree`(初始化完成)、`select_node.jstree`(节点被选中)和 `rename_node.jstree`(节点重命名)。以下是一个监听节点被选中的例子: ```javascript $('#jstree_demo_...

    jsTree中文api

    总结来说,jsTree提供了全面的API来处理树形数据,无论是在基本的操作,如添加、删除和移动节点,还是更复杂的事件处理和动态加载数据,都具有灵活的接口。结合jsTree的中文API文档,开发者可以轻松地在项目中集成和...

    jstree目录树控件

    这个示例展示了如何在网页上创建一个简单的jsTree实例,包含了两个顶层节点。 总结来说,jsTree是一个功能强大的JavaScript目录树控件,适用于各种需要展示层级关系的场景。其动态加载、丰富的插件支持和高度的...

    使用jsTree实现js树形结构

    **jsTree:构建前端树形结构的利器** jsTree 是一个强大的 ...无论你是新手还是经验丰富的开发者,jsTree 都能提供简洁而强大的解决方案。结合提供的示例代码和文档,你将能够轻松地在项目中集成和定制 jsTree。

    JS实现treeview中选中父节点,子节点也选中,如果子节点全部选中,自动选中父节点

    //JS实现treeview中选中父节点,子节点也选中,如果子节点全部选中,自动选中父节点 //仅支持TreeView //调用方法 TreeView.Attributes.Add("onclick", "OnTreeNodeChecked()");

    jsTree.v.1.0中文文档

    - **事件**:jsTree提供了丰富的事件,如`select_node.jstree`在节点被选中时触发,`create_node.jstree`在新节点创建后触发,开发者可以监听并处理这些事件。 4. **插件介绍** - **checkbox插件**:允许用户通过...

    bootstrap-JsTree简单dome

    这个简单Dome提供了一个快速入门的例子,展示了如何在网页中集成JsTree,并实现多选、单选、添加和删除节点等功能。下面将详细介绍JsTree的核心特性以及如何与Bootstrap结合使用。 首先,JsTree是一个基于jQuery的...

    JsTree 最详细教程及完整实例

    以下是一个简单的 JsTree 实例,展示如何初始化和配置 JsTree: ```html &lt;!DOCTYPE html&gt; &lt;link rel="stylesheet" href="jstree/dist/themes/default/style.css" /&gt; &lt;script src="jstree/dist/jstree.min.js"&gt; ...

    jsTree树形菜单

    **jsTree树形菜单详解** jsTree是一款基于JavaScript的开源库,用于在Web页面中创建交互式的树形结构。它提供了丰富的API、多种主题和插件,使得开发者...无论是简单的导航菜单还是复杂的业务逻辑,jsTree都能胜任。

    jsTree动态tree

    jsTree提供丰富的事件,如`select_node.jstree`(节点选择)、`open_node.jstree`(节点展开)等,可以监听这些事件来执行自定义操作。 ```javascript $('#jstree').on('select_node.jstree', function (e, data) {...

    JsTree静态例子

    $('#jstree_demo_div').jstree('select_node', '节点1'); ``` 尽管这是一个静态示例,但了解JsTree的基础配置和API对于进一步学习动态数据加载和交互式操作至关重要。随着对JsTree理解的深入,你可以实现动态加载...

    jsTree操作 jsTree插件简介

    jsTree 支持多种功能,包括动态加载、异步数据获取、节点的增删改查、搜索、拖放操作以及自定义主题和类型。 **初始化 jsTree** 在使用 jsTree 时,首先需要对元素进行初始化。以下是一个简单的初始化示例: ```...

    JStree(最全)

    **JStree 全面解析** ...无论是简单的静态树还是复杂的动态加载,JStree 都能轻松应对,是开发中实现树形结构的理想选择。通过深入理解和实践,我们可以充分利用 JStree 构建出用户友好的交互式界面。

    jsTree JAVA例子

    jsTree 支持多种插件来扩展其功能,如 `checkbox` 插件实现复选框选择,`contextmenu` 插件添加右键菜单,`types` 插件定义不同类型的节点样式等。例如,启用 `checkbox` 插件: ```javascript $('#jstree').jstree...

    手机端js tree

    在移动设备上,为了有效地展示层次结构数据,如文件系统、组织架构或导航菜单,"手机端js tree"成为了一种实用的解决方案。这个技术基于JavaScript,专为智能手机和平板电脑等移动端设备设计,提供了可自定义的树形...

    JsTree 实例使用

    JsTree 提供了丰富的功能,如动态加载、节点重命名、拖放操作等,而且易于集成和自定义,使得开发者能够轻松地创建具有专业外观和功能的树形界面。 **一、安装与引入** JsTree 的使用首先需要下载相应的文件。在...

    jsTree集经典

    jsTree提供多种功能,如节点的拖放、搜索、上下文菜单、多选、异步加载等,使得用户可以轻松地操作和浏览复杂的数据。 ### 主要特性: 1. **可扩展性**:jsTree支持多种插件,允许添加自定义功能,如拖放、搜索、...

Global site tag (gtag.js) - Google Analytics