jstree 使用简介

最近做项目时，需要显示地区信息（树状结构表），使用的 jquery 扩展插件 jstree，地址是：jstree官网。
使用步骤:

1、引入一个 jstree 的主题样式

<!-- 注意 href 设置的路径 -->
<link rel="stylesheet" href="dist/themes/default/style.min.css" />

2、定义一个放置树状结构的容器

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

3、引入 jQuery

注意，jstree 需要使用jQuery 1.9.0 及以上的版本

<script src="../js/jquery/jquery.1.11.2.min.js" type="text/javascript"></script>

4、引入 jstree 的 js 文件

这里使用的是 3.3 的版本，不同的版本可能会有些许变化

<script type="text/javascript" src="../js/plugins/jstree-3.3/lib/jquery.jstree.min.js"></script>

5、创建一个 jstree 实例

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

6、监听事件

jstree提供了很多事件可供监听，这里监听changed事件

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

7、进行交互

使用 jQuery 获取 jstree 实例，通过插件封装的一些方法实现交互的目的。
如选中节点：

$('button').on('click', function () {//选取 id 为 child_node_1 的节点，有3种实现方式$('#jstree').jstree(true).select_node('child_node_1');$('#jstree').jstree('select_node', 'child_node_1');$.jstree.reference('#jstree').select_node('child_node_1');
});

下面整理了几个简单的例子。

简单使用 jstree

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title></title><link rel="stylesheet" type="text/css" href="dist/themes/default/style.min.css"/>
</head>
<body>
<div id="tree"></div><script type="text/javascript" src="../js/jquery/jquery.1.11.2.min.js"></script>
<script type="text/javascript" src="../js/plugins/jstree-3.3/lib/jquery.jstree.min.js"></script>
<script type="text/javascript">
$(function(){$("#tree").jstree({"core":{"data":[{"id":"123","text":"中国","parent":"#", //root node},{"id":"1231","text":"北京","parent":"123", //parent node},{"id":"1232","text":"上海","parent":"123", //parent node}]
}
});
});
</script>
</body>
</html>

结果如下：

绑定事件的 tree

打印选中的节点的 id 和 text

<div id="tree2"></div>
<script type="text/javascript">
$(function(){$("#tree2").jstree({"core":{"data":[{"id":"123","text":"中国","parent":"#", //root node},{"id":"1231","text":"北京","parent":"123", //root node},{"id":"1232","text":"上海","parent":"123", //root node}]
}
}).on("select_node.jstree",function(e,data){//绑定选中事件处理函数var selectedArray = data.selected;for(var i=0;i<selectedArray.length;i++){var node = data.instance.get_node(data.selected[i]);console.log("selected node id= "+node.id+", text= "+node.text);}
};
});
});
</script>
</html>

效果如图：

带复选框的 tree

<div id="tree3"></div><script type="text/javascript">
$(function(){//省略其他tree的初始化代码
//js初始化
$("#tree3").jstree({"core":{"data":[{"id":"123","text":"中国","parent":"#", //root node},{"id":"1231","text":"北京","parent":"123", //root node},{"id":"1232","text":"上海","parent":"123", //root node}]
},
"plugins":["checkbox"]
});
});

效果如图

ajax初始化节点的 tree
ajax初始化节点有两种思路。
第一种直接AJAX请求，在回调函数中处理返回数据，然后参照 <步骤5> 初始化 jstree 组件；
第二种是先按 <步骤5> 初始化jstree组件，再设置data参数，使用url远程请求数据。
这里主要说第二种。

<div id="ajax_tree"></div>
<script type="text/javascript">
$(function(){//... 省略其他tree的初始化$("#ajax_tree").jstree({"plugins":["wholerow","checkbox"],"core":{"data":{"url":"demo/basic/root.json","dataType":"json"}}});});</script>

root.json 的内容是

[{"id":1,"text":"Root node","children":[{"id":2,"text":"Child node 1"},{"id":3,"text":"Child node 2"}]}]

data 的 json 配置还可以换成如下方式

"data":{"url":"demo/basic/root.json","data":function(node){return node;}}

效果如图

用事件初始化复选框

这里可以使用ready事件，在 jstree 渲染好数据后，选中节点。
第一种方法，使用旧版本的回调函数中的data参数，执行check_node方法；
第二种方法，使用当前版本的select_node方法，即可把完整的节点数据传入，也可只把id传入

  <div id="ajax_tree2"></div>
<script type="text/javascript">
$(function(){//... 省略其他tree的初始化var choosearray = [{"id":2,"text":"Child node 1"}];$("#ajax_tree2").jstree({"plugins":["wholerow","checkbox"],"core":{"data":{"url":"demo/basic/root.json","dataType":"json"}}}).on("ready.jstree", function(e,data){//旧版本的实现data.instance.check_node(choosearray);//新版本的实现//$("#ajax_tree2").jstree(true).select_node(choosearray);//$("#ajax_tree2").jstree(true).select_node("2");});
});</script>

效果如图

获取 checked 的节点

接上一个例子，放置一个a标签点击获取选中的数据。

$().jstree(methodName, arguments), 这里调用 get_checked 方法。参数为 true 时返回选中完整的 node 对象，false时只返回选中的 id。

<p></p><a href="javascript:void(0);" class="button">选中的节点</a></p><script type="text/javascript">
$(function(){//省略其他tree的初始化$("a.button").click(function(){var outList = $("#ajax_tree2").jstree("get_checked",false);console.log(outList);});

效果如图

以上就是一些 jstree 的基本使用，如需深入的使用，请移步jstree官网。

jstree 使用简介相关推荐

jsTree插件简介(三)
UI-plugin JSTree的UI插件:用来处理选择.不选和鼠标悬浮树选项的插件. 一.属性包括: 1.select_limit:指定一次可以选中几个节点,默认为-1,表示无限制选中. 2.sel ...
jsTree插件简介(一)
在用jsTree时可以使用几种插件来支持我们的行为,下面我简要的介绍下各个插件的使用. 1:html_data plugin. html_data即我们要渲染的数据是用html格式来完成tree的展示 ...
jsTree插件简介(四)
CRRM plugin 1 本节以例子为基础,讲解jsTree的crrm插件之create功能,如有不当,敬请拍砖!! crrm plugin提供创建.删除.重命名.移动节点功能. 1.创建节点. 首 ...
jstree文档简介
jstree中文github文档 2017年04月11日 15:22:51 阅读数:29839 jstree Bala...bala...这段就不翻译了. jstree就是个基于JQUERY的树形控件 ...
etcd 笔记（01）— etcd 简介、特点、应用场景、常用术语、分布式 CAP 理论、分布式原理
1. etcd 简介 etcd 官网定义: A highly-available key value store for shared configuration and service discov ...
Docker学习(一)-----Docker简介与安装
一.Docker介绍 1.1什么是docker Docker是一个开源的应用容器引擎,基于Go语言并遵从Apache2.0协议开源 Docker可以让开发者打包他们的应用以及依赖包到一个轻量级,可移植 ...
【Spring】框架简介
[Spring]框架简介 Spring是什么 Spring是分层的Java SE/EE应用full-stack轻量级开源框架,以IOC(Inverse Of Control:反转控制)和AOP(Asp ...
TensorRT简介
TensorRT 介绍引用:https://arleyzhang.github.io/articles/7f4b25ce/ 1 简介 TensorRT是一个高性能的深度学习推理(Inference) ...
谷粒商城学习笔记——第一期：项目简介
一.项目简介 1. 项目背景市面上有5种常见的电商模式 B2B.B2C.C2B.C2C.O2O B2B 模式(Business to Business),是指商家和商家建立的商业关系.如阿里巴巴 B ...

jstree 使用简介

jstree 使用简介相关推荐

最新文章

热门文章