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