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>
<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>
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();
$('#jstree').jstree({
"plugins" : [ "wholerow", "checkbox" ]
});
jsTree config对象的相关参数配置逻辑
config对象主要的对于
$.jstree.defaults中的默认配置进行修改，所以config对象中的参数其实对应的是jsTree 的API中参数$.jstree.defaults开头的参数。
关于config对象的配置方法
当我们需要配置的参数为plugins时，可以如下配置config对象
$('#jstree').jstree({
"plugins" : [ "wholerow", "checkbox" ]
});
$('#jstree').jstree({
"core" : {
"themes" : {
"variant" : "large"
}
},
"checkbox" : {
"keep_selected_style" : false
},
"plugins" : [ "wholerow", "checkbox" ]
});
$("#jstree").jstree({
"core" : {
"multiple" : false,
"animation" : 0
}
});
官网API对于部分参数解释
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 name
return operation === 'rename_node' ? true : false;
}
}
});
core.error
发生错误（操作失败，ajax失败等）时，在实例范围内使用个对象参数调用的回调
个人看法：就是一个回调函数，有一个参数。
core.animation
打开/关闭动画的持续时间（以毫秒为单位，即1s = 1000 ms）
此值设置为false为禁用动画
默认值为200
core.expand_selected_onload
是否在树加载后打开所有选定节点的所有父节点
布尔值，true：打开/false：关闭
core.worker
使用Web Worker 来进行JSON数据的解析
可以使得UI不会呗大请求阻塞
布尔值：默认为true
core.restore_focus
当树容器模糊时应最后一个活动节点是否被聚焦，然后再次聚焦。这有助于使用屏幕阅读器。
布尔值：默认为true
core.keyboard
默认的键盘快捷键（一个对象，其中每个键是按钮名称或组合键-例如’enter’，‘ctrl-space’，’p’等，其值是在实例范围内执行的函数）
themes
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 node
a_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" // 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
}
使用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 };
}
}
});
原文地址:https://blog.csdn.net/belusoi/article/details/126637842
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.7code.cn/show_20138.html
如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！
![[软件工具]文档页数统计工具软件pdf统计页数word统计页数ppt统计页数图文打印店快速报价工具](https://img-blog.csdnimg.cn/direct/09dfbaff3e9a47a9a551dd65fef5d482.jpeg)
![[word] word中怎么插入另外一个word文档 #媒体#职场发展](https://img-blog.csdnimg.cn/img_convert/36ffef6b3060628ccf540a56f6069cb0.png)
