最近完成了项目中的一个树状应用，第一次接触了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. 【腾讯Bugly干货分享】深度学习在OCR中的应用

    本文来自于腾讯bugly开发者社区,未经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/5809bb47cc5e52161640c5c8 Dev Club 是一个交流移动 ...

  2. Java IO2：RandomAccessFile

    RandomAccessFile RandomAccessFile类可以说是Java语言中功能最为丰富的文件访问类,它提供了众多的文件访问方法.RandomAccessFile类支持"随机访 ...

  3. 作业七：团队项目——Alpha版本冲刺阶段-09

    昨天进展:代码编写. 今天安排:代码编写.

  4. Programming Entity Framework CodeFirst--数据库约定和配置

    这一章主要主要讲的是我们的模型如何映射到数据库,而不影响模型,以及不同的映射场景. 一.表名和列名 1.指定表名 [Table("PersonPhotos")] public cl ...

  5. Nim教程【十五】【完结】

    模版 模版是Nim语言中的抽象语法树,它是一种简单的替换机制,在编译期被处理 这个特性使Nim语言可以和C语言很好的运行在一起 像调用一个方法一样调用一个模版 请看如下代码: template `!= ...

  6. Winform 可取消的单选按钮（RadioButton）

    在项目当中有一组选择项,要求单选并且可以取消,但Winform提供的单选按钮一旦选择上就不能取消了,经过研究和测试,总算搞定了功能的要求,主要代码如下,就不一一说明了,代码里有注释,给有需要的朋友一个 ...

  7. Java中常量小知识

    常量分类:常量分为静态常量,非静态常量(全局常量),局部常量 静态常量:要么定义的时候赋初值,要么在静态代码块中赋值 非静态常量:要么在定义的时候赋初值,要么在代码块中赋值 局部常量:可以在定义时赋初 ...

  8. png图片尺寸大小调整

    Android 开发中经常遇到各种hdpi,xhdpi,xxhdpi....很多尺寸大小的png图片要求. 网上也有不少工具,今天我又发现一款在线转换大小的网站,用了一下,一个png 114X114 ...

  9. [Spring框架] Spring中的 ContextLoaderListener 实现原理.

    前言: 这是关于Spring的第三篇文章, 打算后续还会写入AOP 和Spring 事务管理相关的文章, 这么好的两个周末 都在看code了, 确实是有所收获, 现在就来记录一下. 在上一篇讲解Spr ...

  10. Servlet Filter

    Filter : Java中的Filter 并不是一个标准的Servlet ,它不能处理用户请求,也不能对客户端生成响应. 主要用于对HttpServletRequest 进行预处理,也可以对Http ...