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不同版本,个人感觉变化还是挺大的。

代码

<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