jstree.net 概述

最近在项目中要用到jstree这个东西，参考了网络上各位大家的关于jstree的学习摘要，但是大部分jstree的文章中都是引用了jstree的demo，对其没有什么实质的详细阐述，希望本文能给那些和我一样在jstree迷途中的人们打开一盏明灯；而且很多都是英文的学习案例，如果在以下博文中写的有问题的话，大伙有意见请尽管提，我虚心接受。如果写的实在不堪入目请您尽快绕道。

一、jstree概述
递归模型的前端展示将不可避免的使用到tree的结构，几番对照之后，发现tree_view似乎已经不再更新。jstree这个俄国人设计的jquery插件却生命力十足，活力四射。所以就选择这个插件进行研究。jsTree 使用了 jQuery 和 Sarissa，是一个是免费的但是设置灵活的，基于 JavaScript 跨浏览器支持的网页树形部件。


使用的版本号：jsTree 1.0-rc1

jsTree 支持三种数据源头： HTML JSON XML
jsTree 的主要功能有：
同步导入 – 只需要提供一个 URL，就会去请求数据（只适合 JSON 和 XML 数据形式）。
支持打开，关闭，重命名，创建，删除节点（通过预先定义好的规则）
支持多种回调函数（onchange, oncreate, ondelete, onload, 等等）
支持拖拉
支持多重选择
支持多种语言
支持主题（可以修改图标，大小和背景等等）
可以支持动态打开和关闭(configurable)
可选的快捷键导航
支持多个树形部件
另外还可以做为 jQuery 插件。
官方主页：http://www.jstree.com/
jstree在goolge code上的托管项目：
http://code.google.com/p/jstree/

二、jstree使用

本文所讲的jstree是基于jsTree 1.0-rc1版本进行异步加载tree的基本用法，截止到10年6月目前官方最新版本为1.0正式版。前者0.99a以jquery-1.3.2.js为js库为基础构建，后者1.0以jquery-1.4.2.js为基础构建。两者在架构上也非常的不一样，0.99a和1.0为完全不同的构建方式，在用户使用上也是很大的不同。 所以基于用户的不同需求，可以选择不同的jstree不同版本,个人感觉变化还是挺大的。

代码

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript" src="../_lib/jquery.cookie.js"></script>

<script type="text/javascript" src="../_lib/jquery.hotkeys.js"></script>

<script type="text/javascript" src="../jquery.jstree.js"></script>

<div id="demo1" class="demo">
<ul>
<li id="phtml_1">
<a href="#">Root node 1</a>
<ul>
<li id="phtml_2">
<a href="#">Child node 1</a>
</li>
<li id="phtml_3">
<a href="#">Child node 2</a>
</li>
</ul>
</li>
<li id="phtml_4">
<a href="#">Root node 2</a>
</li>
</ul>
</div>
<script type="text/javascript" class="source">
$(function () {
$("#demo1").jstree({
"plugins" : [ "themes", "html_data" ]
});
});
</script>



如果有什么不理解的地方，请给本人留言。我们可以互相交流，共同进步。 jstree功能如读取xml、json格式数据添加、删除节点、异步查找节点并结合.net开发等的功能以后还会继续进行完善，请继续关注。 联系QQ群：161077434