Jstree插件

1 什么是JsTree？

jsTree 是一个jquery 插件, 提供交互式树.它是完全免费的,开源的，并根据MIT许可进行分发。jsTree易于扩展，可定义和配置，它支持HTML和JSON数据源以及AJAX加载。

1）支持基于HTML定义、JSON、XML方式加载树节点；

2）支持拖放、动态增加、删除、重命名树节点；

3）支持复选框；

4）支持复制、剪切、粘贴树节点，动态刷新树；

5）提供足够的回调方法；

6）JsTree有极强的扩展性，可以自定义插件支持更广泛的应用。

2 下载jstree

1）下载jstree

从官网下载最新的版本，目前最新的版本为3.3.3，下载完成后，打开压缩包，将dist/下的所有文件复制到你需要使用jstree的项目中。

官网：https://www.jstree.com/

2）引入jstree以及jquery

引用jstree以及jquery，jstree是jquery的一个插件，所以首先引用jquery。

<script src="jquery.min.js"></script>
<script src="dist/jstree.min.js"></script>
<link rel="stylesheet" href="dist/themes/default/style.min.css" />

3）在页面中定义jstree的容器，可以使用div定义

<div id="jstree_demo_div" style="height: 95%;overflow: auto;"></div>

4）初始化jstree

$('#jstree_demo_div').jstree({
            "plugins": [
                "search",
                "wholerow",
                "state",
                "types"
            ],
            "types": {
                "default": {
                    "icon": "glyphicon glyphicon-folder-open"
                },
            },
            //此设置控制级联是否影响禁用的复选框;指示是否单击节点上的任何位置都应相当于单击复选框
            "search": {"show_only_matches": true}, //搜索只显示搜索到的结果以及父节点
            'core':
                {
                    'dblclick_toggle': false,
                    'data': data,
                    "themes": {
                        "variant": "large",//加大
                        "ellipsis": true //文字多时省略
                    },
                }
        }).on('loaded.jstree', function (event, data) {
            $('#jstree_demo_div').jstree().open_all();
            data.instance.clear_state();
        }).bind('activate_node.jstree', function (obj, e) {
            var currentNode = e.node;
            clickTreeNode(currentNode);
        });

5）实现input输入检索

//实现input输入检索
var to = false;
    $('#search_input').keyup(function () {
        if (to) {
            clearTimeout(to);
        }
        to = setTimeout(function () {
            var v = $('#search_input').val();
            $('#jstree_demo_div').jstree(true).search(v);
        }, 250);
    });

6）获取某个节点

//获取某个节点
$("#jstree_demo_div").jstree(true).get_node(currentNode);
//注：修改jstree的状态，则需要放置在ready事件中
$("#jstree_demo_div").bind('ready.jstree', function (obj, e) {
                var elementId = $("#jstree_demo_div").jstree(true).get_node(oldTreeNode).a_attr.id;
                $('#' + elementId).css({'color': '#0B9284'});
            })

参考博文：https://www.cnblogs.com/chenjunsheng/p/10232104.html