jsTree插件简介(一)

在用jsTree时可以使用几种插件来支持我们的行为，下面我简要的介绍下各个插件的使用。

1：html_data plugin。

html_data即我们要渲染的数据是用html格式来完成tree的展示。其中所要渲染的html数据可以来自直接的html文本，例如

$(function () {$("#demo2").jstree({ "core" : { "initially_open" : [ "root" ] },"html_data" : {"data" : "<li id='root'><a href='#'>Root node</a><ul><li><a href='#'>Child node</a></li></ul></li>"},"plugins" : [ "themes", "html_data" ]});
});

也可以是使用json取得的html，

$(function () {$("#demo3").jstree({ "html_data" : {"ajax" : {"url" : "/static/v.1.0pre/_docs/_html_data.html","data" : function (n) { return { id : n.attr ? n.attr("id") : 0 }; }}},"plugins" : [ "themes", "html_data" ]});
});

也可以是两种情况的混合体。

我模拟了第一种情况，在http://download.csdn.net/detail/yizhizouxiaqu/4211029 html_data.html中展示。

2、json_data:使用json格式的数据来展示树结构，这是我使用的方式

这种方式也可以使用固定的json数据，也可以从后台取得json数据，还可以是两者的混合，例子见http://download.csdn.net/detail/yizhizouxiaqu/4211029 json_data.html

这里提到一个参数progressive_render，当有很多嵌套时可以把这个值设置为true。据说很有用

例如

$(function () {$("#demo3").jstree({ "json_data" : {"data" : [{ "data" : "A node", "children" : [ "Child 1", "Child 2" ]},{ "attr" : { "id" : "li.node.id2" }, "data" : { "title" : "Long format demo", "attr" : { "href" : "#" } } }],"progressive_render" : true},"plugins" : [ "themes", "json_data" ]});
});

3、xml_data plugin:这种插件支持平行和嵌套的两种xml格式，嵌套的结构和平行结构仅仅不同的是parent_id上，平行结构有parent_id属性。

parent_id定义了在平行结构中的父节点，根节点值为0；

state:open or closed

item：对应了li

例子请见http://download.csdn.net/detail/yizhizouxiaqu/4211029 xml_data.html

诶呀@！！！不能传文件

jsTree插件简介(一)相关推荐

jsTree插件简介(三)
UI-plugin JSTree的UI插件:用来处理选择.不选和鼠标悬浮树选项的插件. 一.属性包括: 1.select_limit:指定一次可以选中几个节点,默认为-1,表示无限制选中. 2.sel ...
jsTree插件简介(四)
CRRM plugin 1 本节以例子为基础,讲解jsTree的crrm插件之create功能,如有不当,敬请拍砖!! crrm plugin提供创建.删除.重命名.移动节点功能. 1.创建节点. 首 ...
【Flutter】开发 Flutter 包和插件 ( Flutter 包和插件简介 | 创建 Flutter 插件 | 创建 Dart 包 )
文章目录一.Flutter 包和插件简介二.创建 Flutter 插件 1.Android Studio 中可视化创建 2.命令行创建三.创建 Dart 包 1.Android Studio 中 ...
【Android Protobuf 序列化】Protobuf 使用 ( protobuf-gradle-plugin 插件简介 | Android Studio 中配置插件 | AS 中编译源文件 )
文章目录一.protobuf-gradle-plugin 插件简介二.Android Studio 中配置 protobuf-gradle-plugin 插件三.Android Studio 中 ...
jmeter性能测试常用插件简介
jmeter性能测试常用插件简介 jmeter作为一个开源的接口性能测试工具,相对于商业性软件loadrunner来说,优点是更加灵活方便,操作简单.但相对来说,专业性和对性能参数的分析相对比较薄弱. ...
obs 直播多路推流插件简介
目录 obs官网简介 obs下载地址多路推流插件下载地址多路推流插件 windows版安装使用多路推流插件 mac版安装使用 (未测试) 注意最新版 OBS-Studio-27.0-Fu ...
jquery jstree 插件的使用
最近一个项目需要用到jstree 这个jQuery插件,就研究了下,做目录树菜单还是很强大的,下面对经常会用到几个用法做下说明. 1. 首先页面引用 jquery.jstree 2. html ...
jstree插件对树操作增删改查的使用
1.插件说明 jstree官方地址:https://www.jstree.com bootstrap官方地址:https://v3.bootcss.com font-awesome官方地址:http: ...
Kubernetes插件：Intel sriov-cni插件简介/修改
github blog:https://xftony.github.io sriov-cni简介 sriov-cni是hustcat/sriov-cni开发的一种容器网络插件(Container Ne ...

jsTree插件简介(一)

jsTree插件简介(一)相关推荐

最新文章

热门文章