Замена узла jsTree новым узлом - PullRequest
Новая
       9

Замена узла jsTree новым узлом

0 голосов
/ 24 октября 2018

Как можно заменить данный узел jsTree (https://www.jstree.com/) другим узлом? Есть пара похожих вопросов (например, https://stackoverflow.com/a/16681669/1032531),, но они не используют API jsTree (например, create_node)) и не показывать, как к новому узлу, который заменяет оригинальный.

Я предоставил фактический вариант использования вместе с моим существующим кодом ниже, и демонстрационная версия находится в https://output.jsbin.com/xijehek.

В следующем дереве есть узел Add Child, который при нажатии должен заменить этот узел узлом Child, который содержит несколько подузлов (описанных в следующем шаге).

enter image description here

Теперь у дерева есть узел Child с несколькими подузлами. При щелчке по последнему подузлу "Удалить дочерний" узел Child вместе с его подузлами необходимо заменить.с узлом Add Child (описанным в предыдущем шаге).

enter image description here

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>jstree</title>
        <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
        <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
        <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.1/bootstrap3-editable/css/bootstrap-editable.css" />
        <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
    </head>
    <body>
        <button class="btn btn-primary object-browser">Object Browser</button>
        <div id="dialog-object-browser" title="Object Browser" style="display:none">
            <div id="object-browser"></div>
        </div>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
        <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.1/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
        <script src="//cdn.jsdelivr.net/npm/jquery.initialize@1.3.0/jquery.initialize.min.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
        <script>
            $(function(){

                $('button.object-browser').click(function(){
                    $("#dialog-object-browser").dialog('open');
                });

                function getJsTreeObj() {
                    return function (node, cb) {
                        var t=this;
                        var data,
                        sourcesId=2;

                        var response=fakeAjax(node.parents.length);
                        cb(response)
                    };
                }

                $("#dialog-object-browser").dialog({
                    autoOpen    : false,
                    resizable   : true,
                    height      : 800,
                    width       : 1600,
                    modal       : true,
                    open        : function() {
                        $('#object-browser').jstree({
                            'core' : {
                                'data' : getJsTreeObj()
                            }
                        });
                    }
                });

                $.initialize("#dialog-object-browser a.addChild", function() {
                    $(this).editable({
                        pk: 1,
                        value: '',
                        placement: 'right',
                        success: function(response, newValue) {
                            response={"id":494,"ChildProperty1":"Child Property 1","ChildProperty2":"Child Property 2","ChildProperty3":"Child Property 3"}
                            console.log('success', response, newValue, this);
                            alert('replace this node with a child node similar to the others');
                            return {newValue:'Child'};
                        },
                        title: 'Add New Child'
                    });
                });
            });

            var Switch=false;

            function fakeAjax(c)
            {
                switch(c) {
                    case 0:
                        //Get Parent
                        return [{"id":101,"text":"Parent 1","icon":"glyphicon glyphicon-hdd","children":true},{"id":104,"text":"Parent 2","icon":"glyphicon glyphicon-hdd","children":true},{"id":141,"text":"Parent 3","icon":"glyphicon glyphicon-hdd","children":true},{"id":161,"text":"Parent 4","icon":"glyphicon glyphicon-hdd","children":true}];
                    case 1:
                        //get specific object in device
                        Switch=!Switch;
                        return Switch?jsonWithExistingChild:jsonWithOutExistingChild;
                        break;
                    default:
                        throw 'Node depth of '+node.parents.length+' is not supported';
                }
            }

            $( "#dialog-object-browser" ).on( "click", "a.deleteChild", function() {
                if (confirm("Are you sure?")) {
                    console.log('replace')
                    alert('replace this child node with an "Add Child" node')
                }
            })

            var jsonWithExistingChild=[{
                "text": "Parent ID: 1",
                "icon": "glyphicon glyphicon-info-sign"
                }, {
                    "text": "Parent Property 1",
                    "icon": "glyphicon glyphicon-info-sign"
                }, {
                    "text": "Parent Property 2",
                    "icon": "glyphicon glyphicon-info-sign"
                }, {
                    "text": "Parent Property 3",
                    "icon": "glyphicon glyphicon-info-sign"
                }, {
                    "text": "Child",
                    "icon": "glyphicon glyphicon-cog",
                    "children": [{
                        "text": "Child ID: 40",
                        "icon": "glyphicon glyphicon-info-sign"
                        }, {
                            "text": "Child Property 1",
                            "icon": "glyphicon glyphicon-info-sign"
                        }, {
                            "text": "Child Property 2",
                            "icon": "glyphicon glyphicon-info-sign"
                        }, {
                            "text": "Child Property 3",
                            "icon": "glyphicon glyphicon-info-sign"
                        }, {
                            "text": "Delete Child",
                            "a_attr": {
                                "class": "deleteChild"
                            },
                            "icon": "glyphicon glyphicon-remove"
                        }
                    ]
                }
            ];

            var jsonWithOutExistingChild=[{
                "text": "Parent ID: 15",
                "icon": "glyphicon glyphicon-info-sign"
                }, {
                    "text": "Parent Property 1",
                    "icon": "glyphicon glyphicon-info-sign"
                }, {
                    "text": "Parent Property 2",
                    "icon": "glyphicon glyphicon-info-sign"
                }, {
                    "text": "Parent Property 3",
                    "icon": "glyphicon glyphicon-info-sign"
                }, {
                    "text": "Add Child",
                    "a_attr": {
                        "class": "addChild"
                    },
                    "icon": "glyphicon glyphicon-plus-sign"
                }
            ];;

        </script>
    </body>
</html>
...