jstree API
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jstree API相关的知识，希望对你有一定的参考价值。
https://www.jstree.com/
- drag & drop support(拖放)
- keyboard navigation（键盘导航）
- inline edit, create and delete（行内增、删、改）
- tri-state checkboxes（checkbox图标）
- fuzzy searching （模糊搜索）
- customizable node types（定义节点类型）
需要引入3个脚本文件:
1. jQuery (>= 1.9.1)
2. 一个jstree主题 (默认只有一个主题)
3. jstree资源文件
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jstree/3.3.3/themes/default/style.min.css" /> <script src="//cdnjs.cloudflare.com/ajax/libs/jstree/3.3.3/jstree.min.js"></script>
最简单的定义方法是用写死在html中.你只需要用jquery选择要渲染成jstree的dom元素，然后调用 $.jstree.create(element) 的方式渲染。
<div id="container"> <ul> <li>Root node <ul> <li>Child node 1</li> <li>Child node 2</li> </ul> </li> </ul> </div> <script> $(function() { $(\'#container\').jstree(); }); </script>
HTML定义方法比较简单, 但不够灵活，所以提供了更为灵活的JS方法:
<div id="container"></div> <script> $(function() { $(\'#container\').jstree({ \'core\' : { \'data\' : [ { "text" : "Root node", "children" : [ { "text" : "Child node 1" }, { "text" : "Child node 2" } ] } ] } }); }); </script>
查看代码执行结果
.jstree() 传入一个config对象参数.
core.data 定义的任何数据，用来构造成树节点。如果不设置 JSON数据的固定格式
children属性。 注意, 假如一个对象只有text属性时，你也可以用字符串替换该对象，而该字符串就是text属性的值, 所以上面的例子也可以这么写:
[ { "text" : "Root node", "children" : [ "Child node 1", "Child node 2" ] } ]
节点对象中，还提供了一些可选的配置:
id- 这个ID会在对应的‘LI’ 节点上设置html标签的ID属性. 请确保ID的唯一性，每个节点的ID都应该不一样，否则会有出现一些莫名其妙的问题.icon- 节点图标，可以设置表示路径、一个或者多个CSS类名、字体图标的字符串.data- 任何数据，设置这个属性没有任何UI上的效果，任何时候都可以读写这个数据.state- 对象类型，一个节点的状态有一下几种:selected- 节点处于被选中状态opened- 节点处于打开状态disabled- 节点不可选checked-用于checkbox插件- - 勾选该checkbox(只有当false时有效)undetermined-用于checkbox插件 - 状态待定 (只有启用懒加载并且节点没有被加载时生效).
type- 用于types插件 - 用来定义节点类型，默认为"default"类型.li_attr--包含DOM属性的对象， 会追加到该节点对应的LI标签.a_attr -包含DOM属性的对象， 会追加到该节点对应的A标签.
一个包含可选属性的DEMO:
<div id="container"></div> <script> $(function() { $(\'#container\').jstree({ \'core\' : { \'data\' : [ { "text" : "Root node", "state" : {"opened" : true }, "children" : [ { "text" : "Child node 1", "state" : { "selected" : true }, "icon" : "glyphicon glyphicon-flash" }, { "text" : "Child node 2", "state" : { "disabled" : true } } ] } ] } }); }); </script>
看一个具体的AJAX DEMO
<div id="container"></div> <script> $(function() { $(\'#container\').jstree({ \'core\' : { \'data\' : { "url" : "//www.jstree.com/fiddle/", "dataType" : "json" // needed only if you do not supply JSON headers } } }); }); </script>
后端返回数据:
[{
"id":1,"text":"Root node","children":[
{"id":2,"text":"Child node 1"},
{"id":3,"text":"Child node 2"}
]
}]
除了给core.data设置数组类型的数据之外,还可以设置一个jQuery AJAX config对象.
jsTree会获取设置的URL数据（格式跟前面的JSON格式相同）,并显示.
If you cannot provide proper JSON headers, set core.data.dataType to "json".
The ids in the server response make it possible to identify nodes later (which we will see in the next few demos), but they are not required.
请确保IDS的唯一性
用AJAX和lazy loading（懒加载）来定义树
Lazy loading（懒加载）意味只按需加载节点. 比如当你有大量的数据展示, 而一个请求会很占资源的时候. Lazy loading可以更快速的加载数据 - jstree 会在用户浏览到的时候发送AJAX请求获取节点数据.
修改前面的例子, 用 lazy load加载 “Child node 1” 节点.
<div id="container"></div> <script> $(function() { $(\'#container\').jstree({ \'core\' : { \'data\' : { "url" : "//www.jstree.com/fiddle/?lazy", "data" : function (node) { return { "id" : node.id }; } } } }); }); </script>
首次请求后端返回结果:
1 [{ 2 "id":1,"text":"Root node","children":[ 3 {"id":2,"text":"Child node 1","children":true}, 4 {"id":3,"text":"Child node 2"} 5 ] 6 }]
我们看看发生了什么. 首先是data对象中的 "data" 配置选项. 在jQuery中, 应该是string 或者object类型，而jstree拓展了一下，使其可以设置为function.
每一次jstree需要请求AJAX的时候，就会调用这个function，并将正在打开的节点作为参数传给这个function，该方法的返回值作为AJAX的‘data’参数.为了更好理解，建议打开DEMO链接，查看控制台请求的信息。
可以看到首次请求的链接为：
http://www.jstree.com/fiddle?lazy&id=#，其中
# 是一个比较特别的ID，这个ID表示jstree当前要加载的是根节点.
打开root根节点,可以看到两个子节点，这个操作不会触发AJAX请求，因为这两个子节点的信息早已包含在首次请求中.
往下看， “Child node 1” 节点处于关闭的状态（有一个折叠的图标），因为该节点的 true. 这相当于告诉jstree,该节点将会触发lazy load.
于是打开”Child node 1”节点，可以发现第二个请求:
http://www.jstree.com/fiddle?lazy&id=2，
ID =2 ，对应了”Child node 1”节点的ID，也是data属性设置的function返回的结果.
后端返回数据:
["Child node 3","Child node 4"]
你也可以把 "data"属性一样 - 每一次请求，都会调用该方法，并且将方法的返回值（字符串）作为API地址，进行访问. 这种方法适合这样的URL: http://example.com/get_children/1.
用回调函数定义树
有时候，你不想用jstree自带的AJAX请求数据，你希望用自己的AJAX或者其他的方式请求数据。这时候你就需要用回调函数 。
<div id="container"></div> <script> $(function() { $(\'#container\').jstree({ \'core\' : { \'data\' : function (node, cb) { if(node.id === "#") { cb([{"text" : "Root", "id" : "1", "children" : true}]); } else { cb(["Child"]); } } } }); }); </script>
该回调函数会接收两个参 - 当前需要加载数据的节点，以及获取完数据之后，结束加载的回调方法. 数据的格式跟之前的一样，用上AJAX后也有lazy load的效果.
jstree事件
jstree提供了许多事件，可以观察节点树发生了什么变化. 不管你用什么方式定义树，包含的事件都是一样的.
看一下最基本的 changed事件，该事件在选项改变的时候触发：
<div id="container"></div> <script> $(function() { $(\'#container\').jstree({ \'core\' : { \'data\' : [ {"id" : 1, "text" : "Node 1"}, {"id" : 2, "text" : "Node 2"}, ] } }); $(\'#container\').on("changed.jstree", function (e, data) { console.log("The selected nodes are:"); console.log(data.selected); }); }); </script>
所有的jstree事件都有一个叫 "changed.jstree". 另外，事件回调处理函数，多了一个参数，这个参数包含了该事件的所有信息. 比如当前的例子， data.selected 是一个数组，它包含了所有选中的节点id (注意了, 如果你没有自定义节点的ID，这些ID是自动生成的).
我们稍为拓展一下，取消ID的显示，改为在控制台打印选中节点的text属性。
$(\'#container\').on("changed.jstree", function (e, data) {
console.log(data.instance.get_selected(true)[0].text);
console.log(data.instance.get_node(data.selected[0]).text);
});
上面两行代码的做的事情是一样的，都是获取并打印第一个选中节点的text属性.
为了方便调用jstree的方法， instance 的属性，这个属性代表了这棵树的实例对象。
更详细的方法和事件使用说明，请参考API文档
jstree API
前面的例子中，我们仅仅使用了jstree最粗浅的功能.
下面我们试着获取jstree的实例，并调用实例的方法.
<button>Select node 1</button>
<div id="container"></div>
<script>
$(function() {
$(\'#container\').jstree({
\'core\'以上是关于jstree API的主要内容，如果未能解决你的问题，请参考以下文章