jsTree 组件官方文档学习

什么是 jsTree

根据jsTree官网的解释：jsTree 是一个jquery 插件, 提供交互式树.它是完全免费的,开源的，并根据MIT许可进行分发。jsTree易于扩展，可定义和配置，它支持HTML和JSON数据源以及AJAX加载。
jsTree可以在盒子模型（内容框或边框）中正常运行，可以作为AMD模块加载，并具有用于响应式设计的内置移动主题，可以轻松自定义。它使用jQuery的事件系统，因此对树中各种事件的绑定回调是熟悉且容易的。

如何使用jsTree

配置环境

使用jsTree可以通过两种方式来进行jsTree的相关配置
1.通过下载jsTree相关文件
2.通过CDNJS的方式导入
要使得jsTree相关功能可以使用，需要分别导入它的css包和jsTree核心文件包。
两种导入方式如下
1.通过下载jsTree文件的方式：下载的文件都在dist/文件夹中

<link rel="stylesheet" href="dist/themes/default/style.min.css" />

<script src="dist/jstree.min.js"></script>

2.通过CDNJS的方式导入

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>

由于jsTree是一个jquery插件，所以要使用jsTree插件，则需要在导入css和关键代码包之后，添加jquery的导入。(jquery同样也可以通过下载或者CDNJS的方式进行导入)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>

使用jsTree

配置完成上述的环境之后，就可以正式进行相关程序的实现了。
1.我们需要为jsTree设置一个容器，通过这个容器可以确定jsTree的出现位置。(id可以自拟，无需和用例一样)

<div id="jstree_demo_div"></div>

2.在DOM准备就绪之后我们就可以创建一个相对应的jsTree实例了

function () { $('#jstree_demo_div').jstree(); }

3.创建实例之后，我们可以通过配置监听事件的方式来使用户和jsTree来达成一些交互，下面举一个官方文档的例子
注：on 响应函数可以和之前提到的实例化插件一同使用，即.jstree().on()

$('#jstree_demo_div').on("changed.jstree", function (e, data) {console.log(data.selected);
});

下面是官网实例的全部代码展示

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>jsTree test</title><!-- 2 包含主题模板CSS文件 --><link rel="stylesheet" href="dist/themes/default/style.min.css" />
</head>
<body><!-- 3 设置容器元素 --><div id="jstree"><!-- 在本例中，树是从内联HTML填充的 --><ul><li>根节点 1<ul><li id="child_node_1">子节点1</li><li>子节点2</li></ul></li><li>根节点 2</li></ul></div><button>演示按钮</button><!-- 4 包含jQuery库 --><script src="dist/libs/jquery.js"></script><!-- 5 包括缩小的jstree源文件 --><script src="dist/jstree.min.js"></script><script>$(function () {// 6 当DOM准备好时创建一个实例$('#jstree').jstree();// 7 绑定到树上触发的事件$('#jstree').on("changed.jstree", function (e, data) {console.log(data.selected);});// 8 与树交互-任何一种方式都可以$('button').on('click', function () {$('#jstree').jstree(true).select_node('child_node_1');$('#jstree').jstree('select_node', 'child_node_1');$.jstree.reference('#jstree').select_node('child_node_1');});});</script>
</body>
</html>

jsTree配置

虽然我们通过上面的教程了解到了如何去创建一个jsTree实例，并了解到了的监听函数和响应事件的配置方法，但是我们对于jsTree的配置还是停留在创建一个简单实例的状态，对于它的一些默认配置无法进行改变。所以为了应对不同的需求，我们需要对jsTree来进行相关的符合我们需求的配置修改。
jsTree配置的修改分为两种：
1.全局配置的修改：会对于之后使用的所有jsTree实例进行修改。

$.jstree.defaults.core.themes.variant = "large";
$('#jstree').jstree();

2.局部配置的修改：对于单个的jsTree进行单独的配置
$().jstree( config对象 )

$('#jstree').jstree({"plugins" : [ "wholerow", "checkbox" ]
});

jsTree config对象的相关参数配置逻辑

config对象主要的对于$.jstree.defaults中的默认配置进行修改，所以config对象中的参数其实对应的是jsTree 的API中参数$.jstree.defaults开头的参数。
关于config对象的配置方法
当我们需要配置的参数为plugins时，可以如下配置config对象

$('#jstree').jstree({"plugins" : [ "wholerow", "checkbox" ]
});

当我们需要同时对多个参数进行配置，各个参数相互之间没有重复部分时，可以如下配置config对象

$('#jstree').jstree({"core" : {"themes" : {"variant" : "large"}},"checkbox" : {"keep_selected_style" : false},"plugins" : [ "wholerow", "checkbox" ]
});

当然，如果有多个配置参数的前置键相同的情况，则可以如下进行配置

$("#jstree").jstree({"core" : {"multiple" : false,"animation" : 0}
});

官网API对于部分参数解释

下面提供一些参数配置解释：一下参数省去了$.jstree.defaults 前缀（也可以直接前往官网查看）

plugins：
配置哪些插件将在实例上处于活动状态。应该是一个字符串数组，其中每个元素都是一个插件名称。默认是 []
个人看法：就是选择激活的其他插件，因为部分的jsTree有一些插件是默认不开启的，需要通过这个参数来进行手动激活。

core

core:
存储核心的所有默认值
个人看法：应该是和defaults一样的存储默认数据的参数，相当于不配置：data、strings、check_callback、error…等配置参数。

core.data
可以传入标准的类似jQuery的AJAX配置，并且jstree将自动确定响应是JSON还是HTML，并使用其填充树。如果是false则保留原jstree容器内的HTML元素用于填充树。
个人看法：data主要还是存储jsTree插件的展示内容，对于data内的数据，主要可以通过三个途径获取。
1.通过直接写如data的方式

// direct data
$('#tree').jstree({'core' : {'data' : ['Simple root node',{'id' : 'node_2','text' : 'Root node with options','state' : { 'opened' : true, 'selected' : true },'children' : [ { 'text' : 'Child 1' }, 'Child 2']}]}
});

2.通过function的方式

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

3.通过AJAX的方式:返回的格式必须是标准的类似JQuery的AJAX配置，返回的数据将存储到node中。AJAX的返回数据格式将在下文的JSON数据模块进行讲解

$('#tree').jstree({'core' : {'data' : {'url' : '/get/children/','data' : function (node) {return { 'id' : node.id };}}});

core.strings
配置整个树中使用的各个字符串
如果返回的是false则不进行任何替换
其中key为需要替换的字符串，value为替换的字符串
应用示例如下:

$('#tree').jstree({'core' : {'strings' : {'Loading ...' : 'Please wait ...'}}
});

core.check_callback
确定当用户尝试修改树的结构时会发生什么情况
如果返回值为false，则创建、重命名、删除、移动或复制之类的所有操作将进行保留。
如果为true 则为允许所有交互，或者使用功能更好的控制
官方使用示例如下：

$('#tree').jstree({'core' : {'check_callback' : function (operation, node, node_parent, node_position, more) {// operation can be 'create_node', 'rename_node', 'delete_node', 'move_node', 'copy_node' or 'edit'// in case of 'rename_node' node_position is filled with the new node namereturn operation === 'rename_node' ? true : false;}}
});

core.error
发生错误（操作失败，ajax失败等）时，在实例范围内使用个对象参数调用的回调
个人看法：就是一个回调函数，有一个参数。

core.animation
打开/关闭动画的持续时间（以毫秒为单位，即1s = 1000 ms）
此值设置为false为禁用动画
默认值为200

core.multiple
指示是否可以选择多个节点的布尔值（true/false）

core.expand_selected_onload
是否在树加载后打开所有选定节点的所有父节点
布尔值，true：打开/ false：关闭

core.worker
使用Web Worker 来进行JSON数据的解析
可以使得UI不会呗大请求阻塞
布尔值：默认为true

core.force_text
强制将节点文本转换成纯文本（并转义HTML）
布尔值：默认为false

core.dblclick_toggle
是否应该双击切换节点
布尔值：默认为true

core.loaded_state
加载的节点是否为状态的一部分
布尔值：默认为false

core.restore_focus
当树容器模糊时应最后一个活动节点是否被聚焦，然后再次聚焦。这有助于使用屏幕阅读器。
布尔值：默认为true

core.keyboard
默认的键盘快捷键（一个对象，其中每个键是按钮名称或组合键-例如’enter’，‘ctrl-space’，'p’等，其值是在实例范围内执行的函数）

themes

core.themes
主题配置对象

core.themes.name
要使用的主题名称
false ：保留默认主题

core.themes.url
主题的CSS文件的URL
false：保留原有的主题CSS
true：尝试自动加载主题

core.themes.dir
所有jstree主题的位置
仅当url设置为true时有效

core.themes.dots
是否显示连接点布尔值

core.themes.icons
是否显示节点图标的布尔值

core.themes.ellipsis
指示是否应显示节点省略号的布尔值
只能和容器上的固定宽度width一起使用

core.themes.stripes
树背景是否为条纹的布尔值

core.themes.variant
指定要使用的主题变体（如果主题支持变体）
一个字符串或false

core.themes.responsive
指定主题的响应版本是否应在较小的屏幕上显示（如果主题支持）
布尔值：默认为 false

出了上述的一些配置选项之外，还有部分选项是和其他的插件进行配置的，如checkbox等。在这里就不描述这些配置，将其放入相对应插件介绍时进行描述。

HTML数据

简单来解释，这个主题就是将HTML作为构成树的数据来进行展示。
如果需要将HTML作为数据，就需要了解HTML数据的构成。通过对于jsTree官方文档的学习可以知道，jsTree可以将常规的无需列表变成树，也就是说我们这里所需要的最小标记为<ul>以及嵌套在其中的<li>节点。
同时，我们同样也需要一个容器来包装jsTree

$('#html1').jstree();

<div id="html1"><ul><li>根节点 1</li><li>根节点 2</li></ul>
</div>

同样，有子节点的节点可以这样表示

<div id="html1"><ul><li>根节点 1<ul><li>子节点 1</li><li><a href="#">子节点 2</a></li></ul></li></ul>
</div>

同样HTML数据的形式也可以通过JSON来进行传输，并且可以配置jsTree的一些配置属性，详细的可以通过官方文档来学习。这里就不多赘述。

JSON数据

要使用JSON数据来进行树的初始化工作，则首先需要了解树节点用JSON格式的数据表达方式。下面就是一个基本的树节点对象的数据表达方式：

{id          : "string" // 如果省略，会自动生成text        : "string" // 节点文本,显示的内容icon        : "string" // 节点图片路径state       : {opened    : boolean  // 节点是否展开disabled  : boolean  // 节点是否不可选selected  : boolean  // 节点是否已经被选择},children    : []  // 子节点li_attr     : {}  // attributes for the generated LI nodea_attr      : {}  // attributes for the generated A node
}

要更改节点的图标，请使用icon属性。指定包含的字符串/将显示该图像作为节点图标。使用任何其他字符串将把该类<i>应用于用于表示图标的元素。您可以使用布尔值false使jsTree渲染不带图标的节点。
当使用设置children为boolean的AJAX时true，jsTree会将节点呈现为关闭状态，并在用户打开该节点时对该节点发出附加请求。也就是可以通过这个功能实现部分加载的功能，而不需要一开始就加载全部的子节点。

备用的JSON格式

备用JSON格式
如果您不想使用嵌套children方法，则可以使用备用语法，其中每个节点对象都有两个必填字段：id & parent 和没有children属性（其他所有内容保持不变）。
jsTree将自动构建层次结构。为了指示节点应该是根节点，请将其parent 属性设置为 “#”.
主要在一次渲染整棵树时使用，当使用邻接关系将数据存储在数据库中时，这很有用。

// Alternative format of the node (id & parent are required)
{id          : "string" // requiredparent      : "string" // requiredtext        : "string" // node texticon        : "string" // string for customstate       : {opened    : boolean  // is the node opendisabled  : boolean  // is the node disabledselected  : boolean  // is the node selected},li_attr     : {}  // attributes for the generated LI nodea_attr      : {}  // attributes for the generated A node
}

使用JSON

要用JSON对象填充树，我们需要配置$.jstree.defaults.core.data 配置选项
期望的格式是节点数组，其中每个节点都应该是如上所述的对象或简单的字符串（在这种情况下，如果是字符串数组，则该字符串用于节点的text属性，其他所有内容都是自动生成的）。嵌套节点children的父属性以相同的方式提供。

$('#using_json').jstree({ 'core' : {'data' : ['简单的根节点',{'text' : '根节点 2','state' : {'opened' : true,'selected' : true},'children' : [{ 'text' : '子 1' },'子 2']}]
} });

备用格式的转换方式

$('#using_json_2').jstree({ 'core' : {'data' : [{ "id" : "ajson1", "parent" : "#", "text" : "简单的根节点" },{ "id" : "ajson2", "parent" : "#", "text" : "根节点 2" },{ "id" : "ajson3", "parent" : "ajson2", "text" : "子 1" },{ "id" : "ajson4", "parent" : "ajson2", "text" : "子 2" },]
} });

同时也可以使用AJAX用服务器返回的JSON填充树。格式与上面相同，唯一的区别是JSON不在config对象内部，而是从服务器返回的。
要利用此选项，您需要使用$.jstree.defaults.core.data 配置选项.
只需使用类似jQuery的标准AJAX配置，jstree就会自动使AJAX请求填充响应。
除了此处的标准jQuery ajax选项之外，您还可以为data 和 url编写响应函数（也可以直接编写url），这些函数将在当前实例的范围内运行，并且将传递参数以指示要加载的节点，这些函数的返回值将用作URL和数据。
如果您没有从服务器返回正确的json标头，则至少将dataTypejQuery AJAX选项设置为"json".
下面是示例：

$('#tree').jstree({
'core' : {'data' : {'url' : function (node) {return node.id === '#' ?'ajax_roots.json' :'ajax_children.json';},'data' : function (node) {return { 'id' : node.id };}}
});

除了上述的一些关键点外，jsTree还有关键的事件和交互的相关教程。这部分具体可以参考jsTree的官方文档。

jsTree 组件官方文档学习相关推荐

HarmonyOS（一）快速开始学习鸿蒙开发，官方文档学习路线解析
系列文章目录 HarmonyOS(一):快速开始学习鸿蒙开发,官方文档学习路线解析 HarmonyOS(二):应用开发环境搭建准备 HarmonyOS(三):创建你的第一个HelloWorld应用文 ...
ZooKeeper官方文档学习笔记03－程序员指南03
我的每一篇这种正经文章,都是我努力克制玩心的成果,我可太难了,和自己做斗争. ZooKeeper官方文档学习笔记04-程序员指南03 绑定 Java绑定客户端配置参数 C绑定陷阱: 常见问题及故障 ...
ZooKeeper官方文档学习笔记01－zookeeper概述
纠结了很久,我决定用官方文档学习 ZooKeeper概述学习文档学习计划 ZooKeeper:分布式应用程序的分布式协调服务设计目标数据模型和分层名称空间节点和短命节点有条件的更新和监视 ...
Spring Framework 官方文档学习（四）之Validation、Data Binding、Type Conversion（二）
接前一篇 Spring Framework 官方文档学习(四)之Validation.Data Binding.Type Conversion(一) 本篇主要内容:Spring Type Conver ...
Spring Boot 官方文档学习（一）入门及使用
Spring Boot 官方文档学习(一)入门及使用个人说明:本文内容都是从为知笔记上复制过来的,样式难免走样,以后再修改吧.另外,本文可以看作官方文档的选择性的翻译(大部分),以及个人使用经验及问 ...
R语言reshape2包-官方文档学习
R语言reshape2包-官方文档学习简介核心函数长数据与宽数据宽数据长数据 melt函数 meltarray meltdataframe meltdefault meltlist cast ...
Spring Data Commons 官方文档学习
Spring Data Commons 官方文档学习 -by LarryZeal Version 1.12.6.Release, 2017-07-27 为知笔记版本在这里,带格式. Table o ...
Spring Framework 官方文档学习（四）之Validation、Data Binding、Type Conversion
本篇太乱,请移步: Spring Framework 官方文档学习(四)之Validation.Data Binding.Type Conversion(一) 写了删删了写,反复几次,对自己的描述很不 ...
Open3D官方文档学习笔记
Open3D官方文档学习笔记第一部分--点云 1 可视化点云 2 体素降采样 3 顶点法线评估 4 访问顶点法线补充:Numpy在Open3D中的应用 5 裁剪点云补充1:获取点云坐标补充2: ...

jsTree 组件官方文档学习

jsTree 组件官方文档学习

什么是 jsTree

如何使用jsTree

配置环境

使用jsTree

jsTree配置

jsTree config对象的相关参数配置逻辑

官网API对于部分参数解释

core

themes

HTML数据

JSON数据

备用的JSON格式

使用JSON

jsTree 组件官方文档学习相关推荐

最新文章

热门文章