最近完成了项目中的一个树状应用，第一次接触了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. asp.net core webapi之跨域（Cors）访问

    这里说的跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被当作 ...

  2. .NET跨平台实践：用C#开发Linux守护进程（转）

    Linux守护进程(Daemon)是Linux的后台服务进程,它脱离了与控制终端的关联,直接由Linux init进程管理其生命周期,即使你关闭了控制台,daemon也能在后台正常工作. 一句话,为L ...

  3. 用于主题检测的临时日志(431b1c14-8b75-4f42-994f-cfda72208c10 - 3bfe001a-32de-4114-a6b4-4005b770f6d7)

    这是一个未删除的临时日志.请手动删除它.(3bf68152-fcac-4628-92d6-3f8f4d5e0ee4 - 3bfe001a-32de-4114-a6b4-4005b770f6d7)

  4. 【译】ISupportInitialize的用处

    [译]ISupportInitialize的用处 注:本文是对How ISupportInitialize Can Help的翻译.原文作者编写了Sharpgl,这篇文章是对制作Winform控件过程 ...

  5. Ember.js实现单页面应用程序

    1.1.1 摘要 单页应用程序 (SPA) 是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序. SPA使用AJAX和HTML5创建流畅且响应迅速的Web应用程序,不会经常 ...

  6. 据说每个大牛、小牛都应该有自己的库——Ajax

    蹉跎到今天终于要写Ajax部分了,平时工作中除了选择器我用jQuery的最多的就是ajax,所以这部分在自己的框架中必不可少. XMLHttpRequest 我以为对每个使用过Ajax的人来说XMLH ...

  7. JavaScript包装对象

    JavaScript是面向对象的语言,使用”.”操作符可以访问对象的属性和方法,而对于基本类型(null, undefined, bool, number, string)应该是值类型,没有属性和方法 ...

  8. Java关于流知识总结

    流总结: 一.流的分类: 数据单位:字节流  字符流 方向:  输出流 输入流 角色:  节点流 套节流 字节流:以Stream结尾. 字符流:以Reader 和Writer 结尾. 输入流:所有带有 ...

  9. PHP面向对象04_串行化

    oop04复习 2014-9-3 10:48:45 要点: --1.克隆对象 --2.__toString( ) --3. __call( ) --4.自动加载类 --5.对象串行化 1.克隆对象以及 ...

  10. Java程序员的日常 —— 多进程开发

    最近再弄进程管理相关的工作,因此必要的就涉及到各种系统下关于进程的管理. 这里简单的介绍下: 如何在Java中执行命令 在windows下肯定是dos命令了,而在linux则为shell命令.执行的方 ...