使用jsTree，如果已选择/突出显示该父级，如何将新项目添加到现有父级的子组中？

问题描述

<script>

        $(function () {
            @{
                var rootGroup = Model.Groups.FirstOrDefault(group => group.ParentGroupId == null);
            }
            let selectedGroup = "";
            let selectednode = null;
            let groups = {};
            @foreach(var group in Model.Groups) {
                @:groups["@group.GroupId"] = { delete:false,id: "@group.GroupId",parent: "@group.ParentGroupId",name: "@group.Title",order: "@group.OrderNum" };
            }
            $('#groupTree').jstree({
                "checkBox": { "three_state": false },"core": {
                    "check_callback": true,'data': [
                        @foreach (var item in Model.Groups) {
                        @if (item.ParentGroupId == null)
                            {
                                @:{ "id": "@item.GroupId","parent": "#","text": "@item.Title","state": { "disabled": true } },}
                            else
                            {
                                @:{ "id": "@item.GroupId","parent": "@item.ParentGroupId","text": "@item.Title" },}
                        }
                    ],"themes": {
                        "icons": false
                    },},"plugins": ["themes","dnd"]
            }).on('loaded.jstree',function () {
                $("#groupTree").jstree("open_all");
            }).on("select_node.jstree",function (evt,data) {
                $("#group-name-input").val(groups[data.node.id].name);
                selectedGroup = data.node.id;
                selectednode = data.node;
                $("#group-name-input").prop('disabled',false);
                $("#save-group-button").prop('disabled',false);
                $("#delete-group-button").prop('disabled',false);
            }).on("move_node.jstree",data) {
                groups[data.node.id].parent = data.parent;
                groups[data.node.id].order = data.position;
                $("#SerializedGroupinformation").val(JSON.stringify(groups));
            })

            $("#save-group-button").click(function () {
                if (selectedGroup != "") {
                    groups[selectedGroup].name = $("#group-name-input").val();
                    $("#groupTree").jstree('rename_node',selectednode,$("#group-name-input").val());
                    $("#SerializedGroupinformation").val(JSON.stringify(groups));
                    $("#group-name-input").prop('disabled',true);
                    $("#save-group-button").prop('disabled',true);
                    $("#delete-group-button").prop('disabled',true);
                    $("#group-name-input").val("");

                }
            })
            $("#delete-group-button").click(function () {
                if (selectednode.children.length > 0) {

                    swal({
                        title: 'Error!',text: 'The group can not have any children.',icon: 'error'
                    });
                    return;
                }
                groups[selectedGroup].delete = true;
                $("#groupTree").jstree('delete_node',selectednode);
                $("#SerializedGroupinformation").val(JSON.stringify(groups));
                $("#group-name-input").prop('disabled',true);
                $("#save-group-button").prop('disabled',true);
                $("#delete-group-button").prop('disabled',true);
                $("#group-name-input").val("");
            })
            $("#new-group-button").click(function () {
                var name = $("#new-group-input").val();
                var group = { name: name,order: "0",id: "",parent:"" }
                var node = { id: name,text: name };
                $('#groupTree').jstree('create_node',"@rootGroup.GroupId",node,'last');
                groups[name] = group;
                $("#SerializedGroupinformation").val(JSON.stringify(groups));
                $("#group-name-input").prop('disabled',true);
                $("#group-name-input").val("");
                $("#new-group-input").val("");
            })
        });
</script>

考虑到上面的代码，如何将新组作为子级添加到选定的父节点？我没有这样做。有人可以帮忙吗？我是开发新手，我不愿意承认JS不是我的强项...但：）

我已经尝试了多种方法，并将继续这样做，但这是原始代码，我没有尝试解决。预先感谢！

解决方法

以下是演示如何向选定的父项添加新项目的演示： 查看：

<div id="jstree">
</div>
<button id="create">create button</button>

Js代码：

@section scripts{
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var managerTeam = [{
            "id": "m1","text": "M1","children": [{
                "id": "m2","parent": "m1","text": "M2"
            },{
                "id": "t1","text": "T1"
            },{
                "id": "m3","text": "M3","children": [{
                    "id": "t2","parent": "m3","text": "T2"
                },{
                    "id": "t3","text": "T3"
                }],"state": { "opened": true }
            }],"state": { "opened": true }
        }];

           
            $('#create').on('click',function () {
                
                var position = 'inside';
                var newNode = { state: "open",data: "New nooooode!" };
                var parent = $('#jstree').jstree('get_selected')[0];
                $('#jstree')
                    .jstree({
                        "core": {
                            "check_callback": true
                        }
                    })
                    .create_node(parent,newNode,position,false,false); 
            });
        });
       
    </script>
}

结果：