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 请下载使用后记得留言您的更正结果,期待各位的答复
- 大小: 3.3 KB
- 大小: 18.4 KB
分享到:
相关推荐
JSTree作为一个强大且灵活的JavaScript树形菜单组件,为开发者提供了解决大数据量加载问题的有效工具。其高效、易用和可扩展的特性,使其在各种Web应用中广泛应用,无论是企业级后台管理界面,还是用户友好的前端...
动态加载是 jsTree 的核心特性之一,它允许在用户滚动或展开树节点时按需加载数据,而不是一次性加载所有数据。这种机制对于处理大量数据特别有用,因为它减少了初始页面加载时间,提高了用户体验。通过设置适当的...
jsTree 有多种事件可以监听,比如 `ready.jstree`(初始化完成)、`select_node.jstree`(节点被选中)和 `rename_node.jstree`(节点重命名)。以下是一个监听节点被选中的例子: ```javascript $('#jstree_demo_...
总结来说,jsTree提供了全面的API来处理树形数据,无论是在基本的操作,如添加、删除和移动节点,还是更复杂的事件处理和动态加载数据,都具有灵活的接口。结合jsTree的中文API文档,开发者可以轻松地在项目中集成和...
这个示例展示了如何在网页上创建一个简单的jsTree实例,包含了两个顶层节点。 总结来说,jsTree是一个功能强大的JavaScript目录树控件,适用于各种需要展示层级关系的场景。其动态加载、丰富的插件支持和高度的...
//JS实现treeview中选中父节点,子节点也选中,如果子节点全部选中,自动选中父节点 //仅支持TreeView //调用方法 TreeView.Attributes.Add("onclick", "OnTreeNodeChecked()");
- **事件**:jsTree提供了丰富的事件,如`select_node.jstree`在节点被选中时触发,`create_node.jstree`在新节点创建后触发,开发者可以监听并处理这些事件。 4. **插件介绍** - **checkbox插件**:允许用户通过...
这个简单Dome提供了一个快速入门的例子,展示了如何在网页中集成JsTree,并实现多选、单选、添加和删除节点等功能。下面将详细介绍JsTree的核心特性以及如何与Bootstrap结合使用。 首先,JsTree是一个基于jQuery的...
**jsTree树形菜单详解** jsTree是一款基于JavaScript的开源库,用于在Web页面中创建交互式的树形结构。它提供了丰富的API、多种主题和插件,使得开发者...无论是简单的导航菜单还是复杂的业务逻辑,jsTree都能胜任。
以上代码展示了如何创建一个简单的 jstree 实例,包含两个顶级节点,其中第一个节点有子节点。 总之,jstree.min.js 是一个强大的 jQuery 插件,为开发者提供了构建交互式树形视图的强大工具,适用于各种需要结构化...
$('#jstree_demo_div').jstree('select_node', '节点1'); ``` 尽管这是一个静态示例,但了解JsTree的基础配置和API对于进一步学习动态数据加载和交互式操作至关重要。随着对JsTree理解的深入,你可以实现动态加载...
**JStree 全面解析** ...无论是简单的静态树还是复杂的动态加载,JStree 都能轻松应对,是开发中实现树形结构的理想选择。通过深入理解和实践,我们可以充分利用 JStree 构建出用户友好的交互式界面。
jsTree 支持多种插件来扩展其功能,如 `checkbox` 插件实现复选框选择,`contextmenu` 插件添加右键菜单,`types` 插件定义不同类型的节点样式等。例如,启用 `checkbox` 插件: ```javascript $('#jstree').jstree...
在移动设备上,为了有效地展示层次结构数据,如文件系统、组织架构或导航菜单,"手机端js tree"成为了一种实用的解决方案。这个技术基于JavaScript,专为智能手机和平板电脑等移动端设备设计,提供了可自定义的树形...
插件扩展了jstree的基本功能,例如搜索、拖放、检查节点等。 5. **$.jstree.plugins**:这个内部使用的对象存储了所有已加载的jstree插件,便于管理和使用。 6. **$.jstree.create**:此函数用于创建一个新的js...
JsTree 提供了丰富的功能,如动态加载、节点重命名、拖放操作等,而且易于集成和自定义,使得开发者能够轻松地创建具有专业外观和功能的树形界面。 **一、安装与引入** JsTree 的使用首先需要下载相应的文件。在...
1. **API方法**:如`jstree('create_node')`用于创建新节点,`jstree('rename_node')`用于重命名节点,`jstree('delete_node')`用于删除节点等。 2. **事件**:jsTree触发一系列事件,如`create_node.jstree`在创建...
1. **节点 (Nodes)**:jsTree 中的基本元素,可以是树的根节点或子节点。每个节点包含文本、ID、图标等属性,并可拥有子节点。 2. **容器 (Container)**:通常是一个 HTML 元素,如 `div`,用于承载整个树结构。 3...
这里,我们可能讨论如何初始化jstree,设置数据源,以及如何利用其内置的功能如展开/折叠节点、搜索、拖放等。 **描述分析:** 由于描述部分是空的,我们无法获取具体的实现细节或问题。不过,通常情况下,jstree...
通过以上介绍,我们可以看出Bootstrap JsTree是一个强大且易用的工具,它提供了一整套解决方案来构建交互式的树形视图,适用于各种Web应用程序。了解并掌握其核心特性和使用方法,对于提升Web应用的用户体验和功能...