jstree插件对树操作增删改查的使用

参考答案网址：（谢谢大家分享）

1.https://blog.csdn.net/qq_27717967/article/details/79167605 有例子；不仅增删改；还有搜索功能（下载的例子一定要放到项目里面；不然数据出不来）

2.https://blog.csdn.net/sinat_25552937/article/details/89947604

3.https://www.cnblogs.com/telwanggs/p/7447483.html

4.https://blog.csdn.net/yiding123/article/details/84831263

1、插件说明

jstree官方地址：https://www.jstree.com
bootstrap官方地址：https://v3.bootcss.com

一.Getting started

1.1 下载jstree

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

1.2 引用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 " />

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

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

1.4 在页面加载后好，可以初始化jstree

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

1.5 一些相关的插件，简单说下几个常用的：

Checkbox:复选框

Dnd：可拖拽功能

Contextmenu:菜单功能

二、项目实践

html代码

<input type="button" value="创建" onclick="create()" >
<input type="button" value="重命名" onclick="rename()" >
<input type="button" value="删除" onclick="del()" >
<input type="button" value="上移" onclick="moveup()">
<input type="button" value="下移" onclick="movedown()" >
<div id="jstree1" style="200px;background:#fff322" ></div>

javascript

<script>
        $(function() {
            //创建实例树
            $('#jstree1').jstree({
                "core":{
                    "data":[{"id":"0","parent":"#","state":{"disabled":false,"opened":true,"selected":false},"text":"夏宇信息"},{"id":"69","parent":"0","text":"工程"},{"id":"5","parent":"0","text":"行政"},{"id":"71","parent":"0","text":"迷"},{"id":"1","parent":"0","text":"技术"}],
                    "themes" : {
                        "variant" : "large",//加大
                        "ellipsis" : true //文字多时省略
                    },
                    "check_callback" : true//设置为true,当用户修改数时,允许所有的交互和更好的控制(例如增删改)
                },
                "plugins" : [ "wholerow","themes",'themes','json_data','contextmenu','dnd', 'state', 'types']
                ,"contextmenu":{
                    select_node:false,
                    show_at_node:true,
                    items:{
                        "新建菜单":{
                            "label":"新建菜单",
                            "icon": "glyphicon glyphicon-plus",
                            "action":function(data){
                                var inst = $.jstree.reference(data.reference),
                                    obj = inst.get_node(data.reference);
                                inst.create_node(obj, {}, "last", function (new_node) {
                                    try {
                                        new_node.text="新建设备";
                                        inst.edit(new_node);
                                    } catch (ex) {
                                        setTimeout(function () { inst.edit(new_node); },0);
                                    }
                                });
                            }
                        },
                        "修改菜单":{
                            "separator_before"    : false,
                            "separator_after"    : false,
                            "_disabled"            : false, //(this.check("rename_node", data.reference, this.get_parent(data.reference), "")),
                            "label"                : "修改菜单",
                            "shortcut_label"    : 'F2',
                            "icon"                : "glyphicon glyphicon-leaf",
                            "action"            : function (data) {
                                var inst = $.jstree.reference(data.reference),
                                    obj = inst.get_node(data.reference);
                                inst.edit(obj);
                            }
                        },
                        "删除菜单":{
                            "separator_before"    : false,
                            "icon"                : false,
                            "separator_after"    : false,
                            "_disabled"            : false, //(this.check("delete_node", data.reference, this.get_parent(data.reference), "")),
                            "label"                : "删除菜单",
                            "icon"                :"glyphicon glyphicon-remove",
                            "action"            : function (data) {
                                var inst = $.jstree.reference(data.reference),
                                    obj = inst.get_node(data.reference);
                                if(inst.is_selected(obj)) {
                                    inst.delete_node(inst.get_selected());
                                }
                                else {
                                    inst.delete_node(obj);
                                }
                            }
                        }
                    }
                },
            }).on('select_node.jstree', function(event, data) {
                console.log(data.node);
            }).on('changed.jstree', function(event,data) {
                console.log("-----------changed.jstree");
                console.log("action:" + data.action);
                console.log(data.node);
            });
        });


        function create(){
            var ref = $('#jstree1').jstree(true);
            var currNode = _getCurrNode();
            currNode = ref.create_node(currNode, {"type":"file"});
            if(currNode) {
                ref.edit(currNode);
            }
        }

        function rename(){
            var ref = $('#jstree1').jstree(true);
            var currNode = _getCurrNode();
            ref.edit(currNode);
        }

        function del(){
            var ref = $('#jstree1').jstree(true);
            var currNode = _getCurrNode();
            ref.delete_node(currNode);
        }

        function moveup(){
            var ref = $('#jstree1').jstree(true);
            var currNode = _getCurrNode();
            var prevNode = ref.get_prev_dom(currNode,true);
            ref.move_node(currNode,prevNode,'before');
        }

        function movedown(){
            var ref = $('#jstree1').jstree(true);
            var currNode = _getCurrNode();
            var nextNode = ref.get_next_dom(currNode,true);//返回兄弟节点的下一个节点
            ref.move_node(currNode,nextNode,'after');
        }

        /**
         *    获取当前所选中的结点
         */
        function _getCurrNode(){
            var ref = $('#jstree1').jstree(true),
                sel = ref.get_selected();
            console.log(sel);
            if(!sel.length) {
                console.log("----");
                return false;
            }
            sel = sel[0];
            return sel;
        }
    </script>