官网下载及文档：https://www.jstree.com/

一. 介绍

jsTree是jQuery插件，它提供交互式树。在MIT许可下，它是完全免费的、开源的和分布式的。
jsTree具有可扩展性、可扩展性和可配置性，支持HTML和JSON数据源、Ajax和异步回调加载。

jsTree在Box模型（内容框或边框）中的功能是正确的，可以作为AMD模块加载，并且具有内置的可移动响应设计主题，可以轻松定制。它使用jQuery的事件系统，因此对树中的各种事件的绑定回调是熟悉和容易的。

将解压包中 dist 文件夹 拷贝到项目中，引入.css和.js， jquery必须大于1.9.1

   

    <!-- 引入.css -->
    <link href="static/plugins/jsTree3.3.7/dist/themes/default/style.css" rel="stylesheet">

<!-- 引入jQuery  -->
<script src="static/jquery/jquery-3.3.1.js"></script>
<!-- 引入.js-->
<script src="static/plugins/jsTree3.3.7/dist/jstree.js"></script>

二、入门使用

1、用html标签定义树

jsTree可以将常规无序列表转换为树。

所需的最小标记是一个<ul>节点，其中包含一些嵌套<li>节点，其中包含一些文本。

孩子节点，依次嵌套一个<ul>节点

有一个<div>容器包装<ul>并在该容器上创建实例即可:

$('#htmlTree').jstree();。

        <h2>用html标签定义树</h2>
        <div id="htmlTree">
            <ul>
                <li>Root node 1
                    <ul>
                        <li>chlid node1</li>
                        <li>chlid node2</li>
                        <li>chlid node3</li>
                    </ul>
                </li>
                <li>Root node 2
                    <ul>
                        <li>chlid node1</li>
                        <li>chlid node2</li>
                    </ul>
                </li>
            </ul>
        </div>

    $(function () {
        $("#htmlTree").jstree({}); //一旦DOM准备就绪，就开始初始化jstree实例
    });

         

2、用JSON数据填充树

使用JSON对象填充树，您需要使用$.jstree.defaults.core.dataconfig选项
可以使用AJAX使用服务器返回的JSON填充树。格式保持相同，唯一的区别是JSON不在配置对象内，而是从服务器返回

        <h2>JSON数据格式定义树</h2>
        <div id="jsonjsTree"></div>
        
      $("#jsonjsTree").jstree({
            'core': {
                "data":[
                    {
                        "id": "0",
                        "text": "根节点1",
                        "state":{"opened":true},
                        "children": [
                            {'text': 'child1'},
                            {'text': 'child2'},
                        ]
                    },
                    {
                        "id": "1",
                        "text": "根节点2",
                        "children": [
                            {'text': 'child1'},
                            {'text': 'child2'},
                        ]
                    },
                ]
            }
        });

data：JSON 数据固定格式：

// Expected format of the node (there are no required fields)
{
  id          : "string" // will be autogenerated if omitted
  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
  },
  children    : []  // array of strings or objects
  li_attr     : {}  // attributes for the generated LI node
  a_attr      : {}  // attributes for the generated A node
}

补充：JSON数据的固定格式
提供的JSON数据必须符合一定的格式, 每个对象对应一个节点,如果该节点有子节点，还需要提供children属性。children属性是一个相同格式的对象数组。

节点对象中，还提供了一些可选的配置:

  • id - 这个ID会在对应的‘LI’ 节点上设置html标签的ID属性. 请确保ID的唯一性，每个节点的ID都应该不一样，否则会有出现一些莫名其妙的问题.(注意了, 如果你没有自定义节点的ID，这些ID是自动生成的).
  • text - 节点内容
  • icon - 节点图标，可以设置表示路径、一个或者多个CSS类名、字体图标的字符串.
  • data - 任何数据，设置这个属性没有任何UI上的效果，任何时候都可以读写这个数据.
  • state - 对象类型，一个节点的状态有一下几种: 
    • selected - 节点处于被选中状态
    • opened - 节点处于打开状态
    • disabled - 节点不可选
    • checked - 用于checkbox插件 - 勾选该checkbox(只有当 tie_selection 处于 false时有效)
    • undetermined - 用于checkbox插件 - 状态待定 (只有启用懒加载并且节点没有被加载时生效).
  • type - 用于types插件 - 用来定义节点类型，默认为 "default" 类型.
  • li_attr -包含DOM属性的对象， 会追加到该节点对应的LI标签.
  • a_attr - -包含DOM属性的对象， 会追加到该节点对应的A标签.

如果您不想使用嵌套children方法，则可以使用替代语法，其中每个节点对象都有两个必填字段：id＆parent和no childrenproperty（其他所有内容保持不变）。后面学习

 

三、 配置与插件

$("#tree").jstree({ /* config object goes here */ });

 

config 对象的每一个属性，都对应着一种插件.而属性的值的配置，是专门给该插件提供的.此外还有两个特别的属性"core" 和 "plugins":
        "core" 存放着核心的配置。
        "plugins" 是一个数组，包含了当前要激活的各个插件的字符串名称.

记住，我们需要配置的仅仅是不同于默认配置的那一部分选项.

更详细的方法和事件使用说明，请参考API文档

注意： 在引用"plugins"属性时，必须在 core 中设置 'check_callback': true, 来启用所有引用插件属性。

           默认情况下，所有的修改操作都是不启用的.像拖放,新增，修改，删除这样的功能，需要你配置启用.

"plugins" : [
	"checkbox",
	"contextmenu",
	"dnd",
	"massload",
	"search",
	"sort",
	"state",
	"types",
	"unique",
	"wholerow",
	"changed",
	"conditionalselect"
]

常用插件：

      dnd： 提供拖放功能，重现整理树节点
      checkbox: 标记多选
      contextmenu: 显示右键菜单
      state: 保存用户所浏览节点的状态，便于切换会相同的树时，恢复选中的状态.
      types: 给节点增加一个类型.主要是为了便于控制和维护相同的type节点的配置。 节点设置type属性时，匹配types对象中相同的属性.
      unique: 命名唯一，不允许在同一级下有命名相同的节点. 当移动到的parent节点下，存在同名的节点时，不允许移动.

 

1、多选、拖放和state

<script type="text/javascript">
    $(function () {
        $("#jsonjsTree").jstree({
            "core": {
                "multiple": true,   //单选或多选
                "themes": {
                  "dots": true      //点之间连接线
                },
                "check_callback": true, //启用所有引用插件
                "data":[
                    {
                        "text": "根节点1",
                        "state":{"opened":true},
                        "children": [
                            {'text': 'child11'},
                            {'text': 'child12'},
                        ]
                    },
                    {
                        "text": "根节点2",
                        "children": [
                            {'text': 'child21'},
                            {'text': 'child22'},
                        ]
                    },
                ]
            },
            "plugins": ["state","checkbox","contextmenu","dnd"]
        });
    });
    //获取选中节点 id 和 text 信息
    function acquireCheckbox(){
        var allNodeIds = $('#jsonjsTree').jstree().get_checked();
        $.each(allNodeIds, function (i,val) {
            var nodeTest = $('#jsonjsTree').jstree().get_text(val);
            alert(val + ":" + nodeTest);
        })
    }
</script>

          

2、右击菜单

contextmenu：就是对 contextmenu 扩展功能的重新定义

- items：这里设置需要定义的设置项，前四个都是默认的，后面三个相当于是自定义三个方法应该不难理解，

- label：设置右击之后标签显示内容，

- action：定义方法

 

获取节点信息方式：

var inst = jQuery.jstree.reference(data.reference); 通过reference获取当前选中节点的引用，然后

var obj = inst.get_node(data.reference); 通过get_node方法获取节点的信息

简单 前段右击菜单操作， 可用 ajax 实现与后端交互

        <h2>JSON数据格式定义树</h2>
        <button type="button" class="btn-primary" onclick="acquireCheckbox()">获取选中节点信息</button>
        <button type="button" class="btn-primary" onclick="refreshTree()">刷新树</button>
        <div id="jsonjsTree"></div>

<script type="text/javascript">
    $(function () {
        $("#jsonjsTree").jstree({
            "core": {
                "multiple": true,   //单选或多选
                "themes": {
                  "dots": true      //点之间连接线
                },
                "check_callback": true, //启用所有引用插件
                "data":[
                    {
                        "text": "根节点1",
                        "state":{"opened":true},
                        "children": [
                            {'text': 'child11'},
                            {'text': 'child12'},
                        ]
                    },
                    {
                        "text": "根节点2",
                        "children": [
                            {'text': 'child21'},
                            {'text': 'child22'},
                        ]
                    },
                ]
            },
            "plugins": ["state","checkbox","contextmenu","dnd"],
            "contextmenu":{
                "items": {
                    "create": null,
                    "rename": null,
                    "remove": null,
                    "ccp": null,
                    "add": {
                        "label": "新增",
                        "action": function (data) {
                            var inst = jQuery.jstree.reference(data.reference),
                                obj = inst.get_node(data.reference);
                            //ajax 交互后台
                            console.log(inst + ":" + obj);
                            var newNode = inst.create_node(inst.get_node(data.reference),'请输入名称',"after","","");
                            inst.edit(newNode,newNode.val)
                        }
                    },
                    "delete":{
                        "label":"删除",
                        "action":function(data){
                            var inst = jQuery.jstree.reference(data.reference),
                                obj = inst.get_node(data.reference);
                            if(confirm("删除此节点将会连同子节点一起删除，确定要删除吗？")){
                                    if(1 == 1){
                                        $("#jsonjsTree").jstree().delete_node(data.reference);
                                        alert("删除菜单成功！");
                                    }else{
                                        alert("删除菜单失败！");
                                    }
                            }
                        }
                    },
                    "edit":{
                        "label":"编辑",
                        "icon" : "iconfont icon-fanchuan",
                        "action":function(data){
                            var inst = jQuery.jstree.reference(data.reference),
                                obj = inst.get_node(data.reference);
                            alert(obj.id + ": " + obj.text);
                            $("#jsonjsTree").jstree().edit(obj );

                        }
                    }
                }
            }
        });
    });
    //获取选中节点 id 和 text 信息
    function acquireCheckbox(){
        var allNodeIds = $('#jsonjsTree').jstree().get_checked();
        $.each(allNodeIds, function (i,val) {
            var nodeTest = $('#jsonjsTree').jstree().get_text(val);
            alert(val + ":" + nodeTest);
        })
    }
    //刷新树
    function refreshTree(){
        $("#jsonjsTree").jstree("refresh"); //刷新树
    }
</script>

     

 

参考文章：https://blog.csdn.net/qq_24472595/article/details/70053863

入门使用   end ~

 

 

Logo
腾讯云开发者社区

腾讯云面向开发者汇聚海量精品云计算使用和开发经验，营造开放的云计算技术生态圈。

更多推荐

cover

动物识别系统 python实现+UI

avatar 腾讯云开发者社区

Linux下安装MySQL8.0(超详细)

Linux下安装MySQL8.0(超详细)

avatar 腾讯云开发者社区
cover

光模块问题查看并保证光模块收发功率

avatar 腾讯云开发者社区