概述:

前面主要是html数据,这里主要是json数组

1.格式

jsTree需要一个具体格式JSON数据,在标准的语法没有那个字段是必须的-而是那些是你需要的。请记住你可以获取任何你请求的其他属性,jsTree将会不会碰他们,你将有可能在随后使用它们。

为了改变节点的图标你可以是用属性icon。具体的字符串需要包含/的一个图片的url路径,你可以使用任何其它字符串应用类样式去修饰<i>元素,它将会被用呈现这个图标。你可以使用boolean 值false来jsTree在渲染节点时没有图标。

你可以设置一个节点的状态使用state属性,它值可以使如下值得组合:opened, selected, disabled.

li_attr和a_attr可以直接通过jQuery属性函数获取。

当使用AJAX设置children为false,jsTree将会将渲染这个节点为关闭状态,如果需要打开的时候需要发送额外的请求。

如何内部children都应该遵循相同的格式,或者是普通字符串(这个字符串作为普通文本和任何其它自动生成的)

  1. // Expected format of the node (there are no required fields)
  2. {
  3. id          : "string" // will be autogenerated if omitted
  4. text        : "string" // node text
  5. icon        : "string" // string for custom
  6. state       : {
  7. opened    : boolean  // is the node open
  8. disabled  : boolean  // is the node disabled
  9. selected  : boolean  // is the node selected
  10. },
  11. children    : []  // array of strings or objects
  12. li_attr     : {}  // attributes for the generated LI node
  13. a_attr      : {}  // attributes for the generated A node
  14. }

2.可选择JSON格式

如果你不想使用内部children的方式,你可以使用可选语法,每个节点需要包含两个必须字段:id和parent,没有children属性(其它都保持这个格式)

jsTree 将会自动构建这个层次关系,为表明一个节点应该是根节点可是设置parent属性为"#".

这个种方式大多数用于一次性渲染整棵树,这个数据存储在数据库之间有联结关系。

  1. // Alternative format of the node (id & parent are required)
  2. {
  3. id          : "string" // required
  4. parent      : "string" // required
  5. text        : "string" // node text
  6. icon        : "string" // string for custom
  7. state       : {
  8. opened    : boolean  // is the node open
  9. disabled  : boolean  // is the node disabled
  10. selected  : boolean  // is the node selected
  11. },
  12. li_attr     : {}  // attributes for the generated LI node
  13. a_attr      : {}  // attributes for the generated A node
  14. }

3.使用JSON

为了使用JSON来渲染一棵树,你需要使用$.jstree.defaults.core.data配置选项

这个希望格式为一个数组节点。每个节点应该是一个如上所描述的对象或者是一个简单的字符串(这种情况字符串被用来作为一个节点的文本替换自动生成的文本),任何内部子节点格式是一样的。

  1. $('#using_json').jstree({ 'core' : {
  2. 'data' : [
  3. 'Simple root node',
  4. {
  5. 'text' : 'Root node 2',
  6. 'state' : {
  7. 'opened' : true,
  8. 'selected' : true
  9. },
  10. 'children' : [
  11. { 'text' : 'Child 1' },
  12. 'Child 2'
  13. ]
  14. }
  15. ]
  16. } });

4.使用可选json格式

  1. $('#using_json_2').jstree({ 'core' : {
  2. 'data' : [
  3. { "id" : "ajson1", "parent" : "#", "text" : "Simple root node" },
  4. { "id" : "ajson2", "parent" : "#", "text" : "Root node 2" },
  5. { "id" : "ajson3", "parent" : "ajson2", "text" : "Child 1" },
  6. { "id" : "ajson4", "parent" : "ajson2", "text" : "Child 2" },
  7. ]
  8. } });

5.使用AJAX

你可以使用AJAX向服务器请求返回一个json数据来渲染树,这个格式如上所示,这里唯一不同就是JSON是不可见,它是服务器返回的。

为了使用这个特性,你需要使用$.jstree.defaults.core.data 配置选项

仅仅是使用标准jquery像AJAX配置和jstree将会自动做出一个AJAX请求而返回数据。

除了标准jQuery ajax选项,你可以提供data函数和url路径,这个功能将会运行当前的实例范围内,一个参数被通过表明这个节点被加载了,这个返回值将会用作各自的URL和data

如果你并不会返回json头部信息,至少设置数据类型 jQuery AJAX的选项为“json”

  1. $('#tree').jstree({
  2. 'core' : {
  3. 'data' : {
  4. 'url' : function (node) {
  5. return node.id === '#' ?
  6. 'ajax_roots.json' :
  7. 'ajax_children.json';
  8. },
  9. 'data' : function (node) {
  10. return { 'id' : node.id };
  11. }
  12. }
  13. });

6.使用函数

你可以提供一个函数,这个函数将会接受两个参数,节点加载和回调函数。

  1. $('#tree').jstree({
  2. 'core' : {
  3. 'data' : function (obj, cb) {
  4. cb.call(this,
  5. ['Root 1', 'Root 2']);
  6. }
  7. }});

jstree -- 使用JSON 数据组装成树的更多相关文章

  1. 利用nodejs读取数据库数据生成树结构的json数据

    在做后台管理界面的时候,几乎少不了的一个结构就是树形结构,用来做菜单导航: 那么,最希望的就是树结构的所有数据都是读取的数据库,而不是直接代码当中写死,那我们就一步一步来看: 一,建表 字段通常包括: ...

  2. iOS开发——XML/JSON数据解析

    NSJSONSerialization 接下来就正式开始.苹果官方给出的解析方式是性能最优越的,虽然用起来稍显复杂. 首先我们在上面已经有了我希望得到的信息的网站的API给我们的URL,在OC中,我要 ...

  3. 静态页面中如何传json数据

    首页传递参数组装成json数据,再编码 var param="{type:'"+type+"',text:'"+select_text+"',sele ...

  4. 菜鸟笔记:node.js+mysql中将JSON数据构建为树(递归制作树状菜单数据接口)

    初学Web端开发,今天是第一次将所学做随笔记录,肯定存在多处欠妥,望大家海涵:若有不足,望大家批评指正. 进实验室后分配到的第一个项目,需要制作一个不确定层级树形菜单的数据接口,对于从来没实战编过程的 ...

  5. angular2^ typescript 将 文件和Json数据 合并发送到服务器(2.服务端)

    nodejs 中使用框架 express web框架 multer 文件接受 直接贴代码了,我就不解释了 "use strict"; exports.__esModule = tr ...

  6. 关于iOS中几种第三方对XML/JSON数据解析的使用

    Json XML 大数据时代,我们需要从网络中获取海量的新鲜的各种信息,就不免要跟着两个家伙打交道,这是两种结构化的数据交换格式.一般来讲,我们会从网络获取XML或者Json格式的数据,这些数据有着特 ...

  7. Shell脚本处理JSON数据工具jq

    shell脚本如何方便地处理JSON格式的数据呢,这里介绍一个工具:jq 使用参数介绍:https://stedolan.github.io/jq/manual/ 官方教程简单翻译如下. 1.获取JS ...

  8. json数据在前端(javascript)和后端(php)转换

    学习目的:前后端数据交换   思路: json数据格式是怎么样? 后端各种语言怎么将自己内容转换成json格式的内容? 前端怎么接收json数据?有几种方式? js中怎么将json数据转换成js中的数 ...

  9. jsTree 插件Ajax数据

    完整代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta ...

随机推荐

  1. 使用Swift模拟Window-LFU

    今天參加了某公司2015的校招的机试,大题开放题比較多.有一道大题是Window-LFU比較有意思,当时题目搞了半天没搞明确让干啥- -题目大概是这种:实现一个Window-LFU缓存(事实上就是用数 ...

  2. android意图传參数(四)

    一.依照向导创建一个project,layout的activity_main.xml文件内容例如以下: <RelativeLayout xmlns:android="http://sc ...

  3. poj 3233(矩阵高速幂)

    题目链接:http://poj.org/problem?id=3233. 题意:给出一个公式求这个式子模m的解: 分析:本题就是给的矩阵,所以非常显然是矩阵高速幂,但有一点.本题k的值非常大.所以要用 ...

  4. 2015/12/30 字符集 ASCII 到Unicode

    ——每个软件开发人员应该无条件掌握的知识! ——Unicode伟大的创想! 相信大家一定碰到过,打开某个网页,却显示一堆像乱码,如"бЇЯАзЪСЯ"."�??????? ...

  5. cordova常用命令

    安装 cordova: npm install -g cordova 创建应用程序 cordova create hello com.example.hello HelloWorld 添加平台 cor ...

  6. 关于redis、memcache、mongoDB的对比

    从以下几个维度,对 Redis.memcache.MongoDB 做了对比.1.性能都比较高,性能对我们来说应该都不是瓶颈.总体来讲,TPS 方面 redis 和 memcache 差不多,要大于 m ...

  7. Python 常用算法记录

    一.递归 汉诺塔算法:把A柱的盘子,移动到C柱上,最少需要移动几次,大盘子只能在小盘子下面 1.当盘子的个数为n时,移动的次数应等于2^n – 1 2.描述盘子从A到C: (1)如果A只有一个圆盘,可 ...

  8. 3-4章 第3章 form表单组件与小程序前后端通信

    View它相当于是一个点击触发一个事件,但是它的事件应该是相对来说可能是比较是偏向于页面上的一些展示,或者说是页面上的一些导航的一些跳转.Button它是一个标签, button是一个标签,一般去触发 ...

  9. vue中父组件传数据给子组件

    父组件: <template> <parent> <child :list="list"></child> //在这里绑定list对 ...

  10. Java中的抽象类详解,它存在的意义在哪里?

    学习抽象类前先理解下面这段话: 问你个问题,你知道什么是"东西"吗?什么是"物体"吗? "麻烦你,小王.帮我把那个东西拿过来好吗" 在生活中 ...