最近完成了项目中的一个树状应用，第一次接触了jstree这个插件，总的来说它的官方文档还是比较详细的，但是在使用过程中还是出现了一些问题，下面我就来谈谈这款插件的使用和心得。

首先项目需要构建一棵树，利用jstree插件我们先在页面上静态的把这棵树渲染出来，参照官方文档（http://www.jstree.com/），代码如下：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <link rel="stylesheet" type="text/css" href="js/jstree/themes/default/style.min.css">

 </head>

 <body>

     <div id="jstree">

     </div>

     <script src="js/jquery.js"></script>

     <script src="js/jstree/jstree.min.js"></script>

     <script src="js/jstree/jstree.checkbox.js"></script>

     <script>

         $(function(){

             $("#jstree").jstree({

                   "plugins" : ["checkbox"],

                   'core' : {

                   'data' :  [

                        { "id" : "ajson1", "parent" : "#", "text" : "Simple root node" },

                        { "id" : "ajson2", "parent" : "#", "text" : "Root node 2" },

                        { "id" : "ajson3", "parent" : "ajson2", "text" : "Child 1" },

                        { "id" : "ajson4", "parent" : "ajson2", "text" : "Child 2" },

                     ]

                 });

         });

     </script>

 </body>

 </html>

现在我们的数据是通过JS完全写死的，真实项目中我们需要向后台发送请求获取渲染数据，所以得利用jstree自己封装的ajax方式，代码如下：

     <script>

         $(function(){

             $("#jstree").jstree({

                   "plugins" : ["checkbox"],

                   'core' : {

                   'data' : {

                     'url' : '/usual/psd_demo_push/1/', //请求地址

                     'data' : function (node) {

                       return { 'id' : node.id };

                     }

                   }

                 });

         });

     </script>

这样这个插件就会向

'/usual/psd_demo_push/1/'

发送请求，返回的数据和原来我们静态写死在js里的格式是一致的，但需要注意的是，这一数据必须是json对象（object），如果返回的json字符串（string）渲染页面也会失败，这一问题

非常不易发现，因为通过浏览器观察这两种数据是一样的，当我用typeof将其格式打印出来后只有显示object的才能渲染出来，同时我们能使用的属性也必须按照官方文档提供的那样，额外属性则必须写在li_attr或a_attr中，否则是取不到值的：

 {

   id          : "string"

   parent      : "string"

   text        : "string"

   icon        : "string"

   state       : {

     opened    : boolean

     disabled  : boolean

     selected  : boolean

   },

   li_attr     : {}

   a_attr      : {}

 }

刚才我们通过动态的方式实现了树的显示，但是如果服务器端传输的数据量很大，我们需要异步加载数据的话，jstree也提供了这一的功能，在刚才的js代码中的已经运用到了，即：

 'data' : function (node) {

       return { 'id' : node.id };

 }

但是如果按照上述方法进行测试确是行不通的，因为通过上述形式的data格式，我们只知道每一个节点的父节点（parent）是哪一个，但是我们不知道该节点下是否存在子节点，所以我们点击父节点的时候没有办法判断该节点下的子节点个数，也就无法从后台获取数据，通过查阅官方文档及所搜其他资料后发现，如果需要异步获取数据，data的格式必须使用官方提供的第二种形式：

 'data' : [

        'Simple root node',

        {

          'text' : 'Root node 2',

          'state' : {

            'opened' : true,

            'selected' : true

          },

          'children' : [

            { 'text' : 'Child 1' },

            'Child 2'

          ]

       }

  ]

在这一种json形式中提供了每一个节点的'children'属性，如果没有则不含子节点，这样当存在子节点时后台提供'children':true就ok了，当点击该节点展开按钮后children中的json内容就会动态渲染到页面中，实现异步获取，大大减轻了页面的数据传输量。

所以最后建议使用第二种格式，如下：

 {

   id          : "string"

   text        : "string"

   icon        : "string"

   state       : {

     opened    : boolean

     disabled  : boolean

     selected  : boolean

   },

   children    : []

   li_attr     : {}

   a_attr      : {}

 }

具体的演示操作官方也提供了它的地址：

http://jsfiddle.net/vakata/2kwkh2uL/5/

大家可以对其进行调试，观察其数据请求的形式和内容，对使用该插件会有很大的帮助，同时官方文档也提供了非常丰富的api，github：

https://github.com/vakata/jstree#the-required-json-format

利用jstree插件轻松构建树应用的更多相关文章

  1. docker微服务部署之：五、利用DockerMaven插件自动构建镜像

    docker微服务部署之:四.安装docker.docker中安装mysql和jdk1.8.手动构建镜像.部署项目 在上一篇文章中,我们是手动构建镜像,即: 4.1.2.5.1.2.6.1.2中的将d ...

  2. 掌握这个Python小技巧，轻松构建cytoscape导入文件

    今天小编和大家分享如何借助Python脚本轻松构建cytoscape导入文件.Cytoscape是一个非常适合展示各种相互作用关系的可视化软件. 具体来说就是可以用于蛋白互作网络的展示,miRNA与蛋 ...

  3. 【大话QT之十六】使用ctkPluginFramework插件系统构建项目实战

    "使用ctkPluginFramework插件系统构建项目实战",这篇文章是写博客以来最纠结的一篇文章. 倒不是由于技术都多么困难,而是想去描写叙述一个项目架构採用ctkPlugi ...

  4. 【笔记】jstree插件的基本使用

    官网地址:https://www.jstree.com/ json返回参数格式:推荐第二种方式 不需要在重新拼接返回格式 不刷新页面重新初始化 jstree时使用:$.jstree.destroy() ...

  5. 利用 Rational ClearCase ClearMake 构建高性能的企业级构建环境

    转载地址:http://www.ibm.com/developerworks/cn/rational/r-cn-clearmakebuild/ 构建管理是 IBM® Rational® ClearCa ...

  6. 利用Chrome插件向指定页面植入js，劫持 XSS

    资源来自:http://www.2cto.com/Article/201307/225986.html 首页 > 安全 > 网站安全 > 正文 利用Chrome插件向指定页面植入js ...

  7. 利用Nutch和Tomcat构建搜索引擎

    利用Nutch和Tomcat构建搜索引擎 1.安装环境及软件版本介绍 本教程是在Linux Ubuntu 12.04 desktop i386操作系统上搭建,结合使用了Nutch-1.2和Apache ...

  8. Xamarin.iOS - 利用Settings插件与EAIntroView制作App的欢迎界面

    Xamarin.iOS - 利用Settings插件与EAIntroView制作App的欢迎界面 关于欢迎界面 很多App第一次启动都会有一个欢迎界面,欢迎界面往往决定这用户对App的第一映像,所以欢 ...

  9. jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)

    这篇文章主要介绍了jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate),需要的朋友可以参考下 使用jQuery ui首先需要引入jQuery类库 ...

随机推荐

  1. Redis 系列 (一) StackExchange.Redis的使用

    一.DLL安装 用NuGet搜索StackExchange.Redis,然后下载就可以. ConnectionMultiplexer对象是StackExchange.Redis最中枢的对象.这个类的实 ...

  2. 【腾讯Bugly干货分享】深入源码探索 ReactNative 通信机制

    Bugly 技术干货系列内容主要涉及移动开发方向,是由 Bugly 邀请腾讯内部各位技术大咖,通过日常工作经验的总结以及感悟撰写而成,内容均属原创,转载请标明出处. 本文从源码角度剖析 RNA 中 J ...

  3. Java虚拟机4：内存溢出

    堆溢出 Java堆唯一的作用就是存储对象实例,只要保证不断创建对象并且对象不被回收,那么对象数量达到最大堆容量限制后就会产生内存溢出异常了.所以测试的时候把堆的大小固定住并且让堆不可扩展即可.测试代码 ...

  4. 用DirectX实现魔方（三）视角变换及缩放（附源码）

    在本系列第一篇介绍过鼠标按键的功能,如下. 左键拖拽 - 旋转魔方 右键拖拽 - 变换视角 滚轮 - 缩放魔方 今天研究一下如何实现后面两个功能,用到的技术主要是Arcball,Arcball是实现M ...

  5. 诡异的 未处理的IOErrorEvent 2035

    今天游戏发布上线之后,总是随机的出现卡死. 换了个safari之后,看到抛了 IOErrorEvent. 问题是,我所有的Loader都加入了contentLoaderInfo监听.而抛出来的又没有堆 ...

  6. 深度解析SDN——利益、战略、技术、实践（实战派专家力作，业内众多专家推荐）

    深度解析SDN——利益.战略.技术.实践(实战派专家力作,业内众多专家推荐) 张卫峰 编   ISBN 978-7-121-21821-7 2013年11月出版 定价:59.00元 232页 16开 ...

  7. WPF入门教程系列二——Application介绍

    一.Application介绍 WPF和WinForm 很相似, WPF与WinForm一样有一个 Application对象来进行一些全局的行为和操作,并且每个 Domain (应用程序域)中仅且只 ...

  8. KnockoutJS 3.X API 第五章 高级应用(3) 虚拟元素绑定

    注意:这是一种高级技术,通常仅在创建可重用绑定的库时使用. 这不是你通常需要做的时候使用Knockout构建应用程序. Knockout的控制流绑定(例如,if和foreach)不仅可以应用于常规DO ...

  9. Java基础-接口．编写2个接口：InterfaceA和InterfaceB；在接口InterfaceA中有个方法void printCapitalLetter()；在接口InterfaceB中有个方法void printLowercaseLetter()；然 后写一个类Print实现接口InterfaceA和InterfaceB，要求 方法 实现输出大写英文字母表的功能，printLowerca

    #34．编写2个接口:InterfaceA和InterfaceB:在接口InterfaceA中有个方法void printCapitalLetter():在接口InterfaceB中有个方法void ...

  10. Android Service小记

    Service 是Android 的一种组件,跟线程无关. Service 分两种启动方式 startService()和bindService() 两种都需要在Androidmanifest.xml ...