jstree 使用简介

最新推荐文章于 2024-01-14 07:45:00 发布

gxy_2016

最新推荐文章于 2024-01-14 07:45:00 发布

阅读量2.1k

点赞数 2

分类专栏： Java web 前端文章标签： jquery 插件 jstree

本文链接：https://blog.csdn.net/gxy_2016/article/details/60583619

版权

Java web 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

前端

1 篇文章 0 订阅

订阅专栏

最近做项目时，需要显示地区信息（树状结构表），使用的 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>

结果如下：

example 1

绑定事件的 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>

效果如图：

example 2 picture

带复选框的 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"]
});
});

效果如图

example 3 picture

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;
        }
    }

效果如图
example 4 picture

用事件初始化复选框

这里可以使用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>

效果如图
example 5 picture

获取 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);
    });

效果如图
example picture 6

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

gxy_2016

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
jstree 使用简介

最近做项目时，需要显示地区信息（树状结构表），使用的 jquery 扩展插件 jstree，地址是：jstree官网。使用步骤:1、引入一个 jsTree 的主题样式<link rel="stylesheet" href="dist/themes/default/style.min.css" />2、定义一个放置树状结构的容器<div id="jst
复制链接

扫一扫