基于jstree使用JSON数据组装成树

概述:

前面主要是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都应该遵循相同的格式,或者是普通字符串(这个字符串作为普通文本和任何其它自动生成的)

// Expected format of the node (there are no required fields)
{
 id     : "string" // will be autogenerated if omitted
 text    : "string" // node text
 icon    : "string" // string for custom
 state    : {
  opened  : boolean // is the node open
  disabled : boolean // is the node disabled
  selected : boolean // is the node selected
 },
 children  : [] // array of strings or objects
 li_attr   : {} // attributes for the generated LI node
 a_attr   : {} // attributes for the generated A node
}

2.可选择JSON格式

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

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

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

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

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

// Alternative format of the node (id & parent are required)
{
 id     : "string" // required
 parent   : "string" // required
 text    : "string" // node text
 icon    : "string" // string for custom
 state    : {
  opened  : boolean // is the node open
  disabled : boolean // is the node disabled
  selected : boolean // is the node selected
 },
 li_attr   : {} // attributes for the generated LI node
 a_attr   : {} // attributes for the generated A node
}

3.使用JSON

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

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

 $('#using_json').jstree({ 'core' : {
  'data' : [
    'Simple root node',
    {
     'text' : 'Root node 2',
     'state' : {
      'opened' : true,
      'selected' : true
     },
     'children' : [
      { 'text' : 'Child 1' },
      'Child 2'
     ]
   }
  ]
} });

4.使用可选json格式

$('#using_json_2').jstree({ '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" },
  ]
} });

5.使用AJAX

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

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

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

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

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

6.使用函数

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

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

(0)

相关推荐

  • jquery.jstree 增加节点的双击事件代码

    jsTree 是基于jquery的树插件,支持拖放.复制.删除.快捷键.多选.自定义节点图标.自定义右键菜单.跨页面保存状态等等,总之我想到的它基本上都有了,而且最值得表扬的是它让人感觉一点都不慢哦. jsTree有节点选择事件,即 复制代码 代码如下: .bind("select_node.jstree", function(e, data) { //alert(data.rslt.obj.attr("id") + ":" + data.rsl

  • jquery下jstree简单应用 - v1.0

    第一篇文章,具体使用也过去很长时间了,直接贴码: 1.代码中使用json数据格式(直接在页面中组装成的,并非后台组装,具体方法:function _callBack(d)) 2.提供右键菜单及功能实现 3.具有checkbox,提供获取选中节点ID方法:function getMenuIds() 复制代码 代码如下: <script type="text/javascript" src="@{'/public/javascripts/jquery-1.4.2.min.j

  • 基于jsTree的无限级树JSON数据的转换代码

    jstree 主页 : http://www.jstree.com/ 其中提供了一种从后台取数据渲染成树的形式: 复制代码 代码如下: $("#mytree").tree({ data : { type : "json", url : "${ctx}/user/power!list.do" } }); 对于url中返回的值必须是它定义的json数据形式: 复制代码 代码如下: $("#demo2").tree({ data :

  • jsTree 基于JQuery的排序节点 Bug

    例如: - a (position 1) - b (position 2) - c (position 3) move c between a and b: cp=1 move a between b and c: cp=2 下移位置多加了1,不太清楚为什么,这里提供一种修复方法,也许它不是很好. 把 "position" : data.rslt.cp + i, 换成 "position" : data.rslt.o.index() + i, 可能对你有所帮助

  • JQery jstree 大数据量问题解决方法

    问题解决:生成的树是逐级加载的,在open函数中有一个生成节点的代码: 代码 复制代码 代码如下: for (var i=0; i<data.length; i++) { var n = TREE_OBJ.create(data[i], $(NODE)); if (onaddnode) onaddnode(n); } var firstChild = TREE_OBJ.children(NODE)[0]; if ($(firstChild).attr('id')==-1) TREE_OBJ.re

  • jsTree树控件(基于jQuery, 超强悍)[推荐]

    1.支持基于HTML定义.Json.XML方式加载树节点 2.支持拖放,动态增加.删除.重命名树节点 3.支持复选框 4.支持复制.剪切.粘贴树节点,动态刷新树 5.提供足够的回调方法: 6.此外,还提供了详细的使用文档 下载地址 :http://code.google.com/p/jstree/ 文档 :http://jstree.com/reference/_documentation/1_files.html 例子 :http://jstree.com/reference/_example

  • jsTree事件和交互以及插件plugins详解

    本文为大家分享了jsTree事件和交互以及插件plugins,供大家参考,具体内容如下 1.事件 jsTree在容器中触发变量事件,你可以浏览所有事件,然后了解如何进行监听:https://www.jstree.com/api/#/?q=.jstree%20Event 通过data参数获取更多详细信息关于事件检查. 更多情况下就是你会得到所有节点对象,如果你通过ID获取这个节点,查看节点使用.get_node(). $('#jstree') // listen for event .on('ch

  • 基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用

    在上篇基于BootStrap Metronic开发框架经验小结[一]框架总览及菜单模块的处理,介绍了Bootstrap开发框架的一些基础性概括,包括总体界面效果,以及布局.菜单等内容,本篇继续这一主题,介绍页面内容常用到的数据分页处理,以及Bootstrap插件JSTree的使用. 在数据的界面显示当中,表格数据的展示以及分页是非常常见的处理操作,利用Bootstrap的样式布局,以及JQuery的Ajax数据处理,就能很好实现数据的动态展示和分页处理. 1.列表展示和分页处理1)数据的列表展示

  • 基于jstree使用AJAX请求获取数据形成树

    概述: 一般情况下都是通过ajax进行请求获取数据.boostrap+ajax 1.代码 //权限分配 $('#authority').click(function() { $("#jstree").jstree({ "core" : { "themes" : { "responsive": false }, // so that create works "check_callback" : true,

  • jstree创建无限分级树的方法【基于ajax动态创建子节点】

    本文实例讲述了jstree创建无限分级树的方法.分享给大家供大家参考,具体如下: 首先来看一下效果 页面加载之初 节点全部展开后 首先数据库的表结构如下 其中Id为主键,PId为关联到自身的外键 两个字段均为GUID形式 层级关系主要靠这两个字段维护 其次需要有一个类型 public class MenuType { public Guid Id { get; set; } public Guid PId { get; set; } public string MenuName { get; s

随机推荐