最近完成了项目中的一个树状应用，第一次接触了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. 在VS2015 RC打开CTP中创建的工程

    VS2015终于出了RC了!小伙伴们快来安装试用吧,地址在这里,还有新的Windows 10开发工具哦,要不然是开发不了Universal Windows App的,安装前记得卸载CTP版本. 新的R ...

  2. 【C语言学习】《C Primer Plus》第3章 数据和C

    学习总结 1.C基本数据类型使用11个关键字:int.long.short.unsigned.char.float.double.signed._Bool._Complex和_Imaginary. 2 ...

  3. nw.js FrameLess Window下的窗口拖拽与窗口大小控制

    nw.js FrameLess Window下的窗口拖拽与窗口大小控制 很多时候,我们觉得系统的Frame框很难看,于是想自定义. 自定义Frame的第一步是在package.config文件中将fr ...

  4. Java提高篇（三八）-----Java集合细节（四）：保持compareTo和equals同步

    在Java中我们常使用Comparable接口来实现排序,其中compareTo是实现该接口方法.我们知道compareTo返回0表示两个对象相等,返回正数表示大于,返回负数表示小于.同时我们也知道e ...

  5. JS闭包中的this对象

    我们知道,当函数被作为某个对象的方法调用时,this等于那个对象,不过,匿名函数的执行环境具有全局性,因此其this对象通常指向window. 下面代码很好的说明了这一点: var name = 'T ...

  6. 用批处理文件进行TCP/IP设置,方便在家与办公IP切换

    在公司用公司分配的固定IP上网,回家后又要将本本设置为家里的固定IP上网,每次都要手动重复一个过程: 打开网络中心,选择本地连接,进入属性然后选择IPV4进行TCP/IP的设置,填入IP,子网掩码DN ...

  7. JavaScript 常用功能总结

    小编吐血整理加上翻译,太辛苦了~求赞! 本文主要总结了JavaScript 常用功能总结,如一些常用的JS 对象,基本数据结构,功能函数等,还有一些常用的设计模式. 目录: 众所周知,JavaScri ...

  8. Lucene系列-概述

    为了生存,就得干一行爱一行.那就学习下lucene吧. 全文检索介绍 流程: 建索引 准备待搜索文档 文档分词:将文档分成一个个单独的单词,去除标点符号.停词(无意义的冠词介词等),得到token 语 ...

  9. C#基础入门一

    .net(软件开发平台)-------------------------------------------------------- 学习内容:.net平台下的开发语言. .net freamwo ...

  10. 机械革命 USB装系统各种坑

    买了个号称超强性价比的游戏本- 机械革命, i7+ssd+hd+4G RAM+ GTX850M, 很直接, 直接出厂就一个DOS系统,回来要自己装机. 好吧, 先下了个大白菜软件,用来刻录ISO系统到 ...