• 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



  • 相关阅读:
    Java 学习总结(一)
    每日学习心得:SharePoint 为列表中的文件夹添加子项(文件夹)、新增指定内容类型的子项、查询列表中指定的文件夹下的内容
    每日学习心得:SharePoint 2013 自定义列表项添加Callout菜单项、文档关注、SharePoint服务端对象模型查询
    HighCharts使用心得
    ECharts使用心得总结(二)
    每日学习心得:Js基本数据类型常用方法扩展
    每日学习心得:$.extend()方法和(function($){...})(jQuery)详解
    Mustache 使用心得总结
    Extjs editor 设置默认值
    Ext this.getView(...).saveDocumentAs is not a function
  • 原文地址:https://www.cnblogs.com/dodui/p/1779964.html
Copyright © 2020-2023  润新知