jQuery的jsTree入门使用

冷不防 2022-02-28 07:56 338阅读 0赞

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

### 一**. 介绍** ###

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

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

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

![20190326090312573.png][]

<link href="static/plugins/jsTree3.3.7/dist/themes/default/style.css" rel="stylesheet">
    
    
    <script src="static/jquery/jquery-3.3.1.js"></script>
    
    <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实例
        });

![20190326090418792.png][]      ![20190326090654866.png][]

**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文档][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**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDAyODU0_size_16_color_FFFFFF_t_70][]      ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDAyODU0_size_16_color_FFFFFF_t_70 1][] ![20190326142251369.png][]

**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>

![20190326152933858.png][]   ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDAyODU0_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDAyODU0_size_16_color_FFFFFF_t_70 3][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDAyODU0_size_16_color_FFFFFF_t_70 4][]

参考文章：[https://blog.csdn.net/qq\_24472595/article/details/70053863][https_blog.csdn.net_qq_24472595_article_details_70053863]

入门使用   end ~

[https_www.jstree.com]: https://www.jstree.com/
[20190326090312573.png]: /images/20220228/9d6f0b9a6b8d48fc9873e72b62b9fcb9.png
[20190326090418792.png]: https://img-blog.csdnimg.cn/20190326090418792.png
[20190326090654866.png]: /images/20220228/1817a87e948c469c8b7d6605fd4c2019.png
[API]: https://www.jstree.com/api/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDAyODU0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190326141811247.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDAyODU0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDAyODU0_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/2019032614173924.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDAyODU0,size_16,color_FFFFFF,t_70
[20190326142251369.png]: /images/20220228/d5b8e1c673714e1d894d7775be2d735d.png
[20190326152933858.png]: https://img-blog.csdnimg.cn/20190326152933858.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDAyODU0_size_16_color_FFFFFF_t_70 2]: /images/20220228/fdf08a695b554368a3eb400cbea2dff2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDAyODU0_size_16_color_FFFFFF_t_70 3]: /images/20220228/ecb68edd7cdd453dbd2e6ed122b688bd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDAyODU0_size_16_color_FFFFFF_t_70 4]: /images/20220228/affe4182b4eb4299bbd144ffc1233421.png
[https_blog.csdn.net_qq_24472595_article_details_70053863]: https://blog.csdn.net/qq_24472595/article/details/70053863