时间戳

首页 > 解决方案 > 通过下拉菜单在 jstree 的节点中添加数据无法正常工作

javascript - 通过下拉菜单在 jstree 的节点中添加数据无法正常工作

问题描述

我正在尝试在节点中添加下拉列表，并希望能够创建和删除节点。我能够做到这一点，但是每当我创建/删除节点时，我选择的下拉值就会从创建或删除节点的位置删除。如果有帮助，我将使用 select2 进行下拉。以下是演示链接 https://www.arsallodhi.com/jstree/index.html 在此先感谢

我认为重绘方法被调用，它确实删除了这些值。所以我试图抓住它但不能。

<html>
<head>
    <style>
        .jstree-default .jstree-node, .jstree-leaf {
            min-height: 35px !important;
        }

        .jstree-open .jstree-node {
            padding-top: 15px !important;
        }
    </style>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css"/>
</head>
<body>
<div id="jstreee">
    <ul>
        <li class="jstree-open">
            Organization

        </li>
    </ul>
</div>
<script src="https://kendo.cdn.telerik.com/2019.2.514/js/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<script>
    function formatDropdown1(option) {
        if (option.id) {
            return option.text;
        } else {
            return '';
        }
    };
    function addTagValueClass() {
        $('.tag').select2({
            placeholder: '',
            allowClear: true,
            tags: true,
            templateSelection: formatDropdown1,
        });
    }
    var counter = 0;
    function customMenu2(node) {
        var position = 'inside';
        var parent;
        var selected_id;
        selected_id = parent = $('#jstreee').jstree('get_selected');
        counter++;
        var node_data;
        node_data = "<li class='node-li'><select data-live-search='true' class='tag' placeholder='Tag'><option></option><option value='volvo'>Project</option><option value='saab'>Owner</option><option value='mercede'>Department</option><option value='audi'>Business Unit</option></select></li>"

        var items = {
            createItem: {
                label: "Add Node",
                action: function () {
                    $('#jstreee').jstree().create_node(parent, {"id": "ajson5" + counter, "text": node_data}, position
                        , function () {
                            addTagValueClass();
                            $('#jstreee').jstree().open_node('#' + parent);
                        });
                }
            },
            deleteItem: {
                label: "Remove Node",
                action: function () {
                    if (selected_id != "j1_1") {
                        $('#jstreee').jstree().delete_node(selected_id);
                        addTagValueClass();
                    }
                }
            }

        };
        return items;
    }
    $('#jstreee').on('open_node.jstree', function (e, data) {
        addTagValueClass();
    });
    $('#jstreee').jstree({
        "core": {"check_callback": true, "themes": {"icons": false}, "toggle_node": true}, // so that modifying operations work
        "plugins": ["contextmenu"], contextmenu: {items: customMenu2}
    });
</script>
</body>
</html>

我希望即使在创建或删除节点时，我通过下拉设置的值仍然存在。

标签： javascriptjquerynodesjquery-select2jstree

解决方案

推荐阅读