Dynatree - javascript Добавить Редактировать и Удалить узел

Question

Нужна ваша помощь и большое спасибо заранее.

Я пытаюсь сделать Добавить, Изменить и удалить узел, используя дерево Dyna. Следующие вещи пытаюсь.

1. Когда я нажимаю кнопку "Добавить", выбирая любой узел, тогда добавляется новый узел с текстовым полем, который должен принять имя узла и при размытии должен установить значение.
2. Если имя не введено, текстовое поле должно исчезнуть из узла дерева.
3. Если существующие узлы, то отредактируйте узел - это работает.

Некоторые функциональные возможности, которых я достиг, просмотрите ниже jsfiddle и помогите мне

Ниже мой jsfiddle URL, пожалуйста, помогите

$(function(){
$("#tree").dynatree({
  onActivate: function(node) {
    $("#info").text("You activated " + node);
  },
  children: [
    {title: "Item 1"},
    {title: "Folder 2", isFolder: true,
      children: [
        {title: "Sub-item 2.1"},
        {title: "Sub-item 2.2"}
      ]
    },
    {title: "Item 3"}
  ],selectMode: 1,
        checkbox: true,
  onSelect: function(select, node) {
            // Display list of selected nodes
            var s = node.tree.getSelectedNodes().join(", ");
            selectedNode = node;

        },


        onClick: function(node, event) {
            if( event.shiftKey ){
                editNode(node);
                return false;
            }
        },
        onDblClick: function(node, event) {
            editNode(node);
            return false;
        },
        onKeydown: function(node, event) {
            switch( event.which ) {
            case 113: // [F2]
                editNode(node);
                return false;
            case 13: // [enter]
                if( isMac ){
                    editNode(node);
                    return false;
                }
            }
        }
});

 var nodeExists = false;
 var selectedNode = null;
    function validateForm(){
if( selectedNode == null){
            alert("Please select node to add folder");
            return false;
        }
        if(selectedNode != null){
            nodeExists = findNodeByTitle(selectedNode,$("#newFolderName").val());
            return nodeExists;
        }
    }



function findNodeByTitle(tree, title){
        var match = true;
        tree.visit(function(node){
            if(node.data.title == title) {
                //match = node.data.title;
                alert("Folder : "+title +" already exists")
                match = false;
                return false;
            }
        }, true);
        return match;
    }

function editNode(node){
        var prevTitle = node.data.title,
            tree = node.tree;
        // Disable dynatree mouse- and key handling
        tree.$widget.unbind();
        // Replace node with <input>
        $(".dynatree-title", node.span).html("<input id='editNode' value='" + prevTitle + "'>");
        // Focus <input> and bind keyboard handler
        $("input#editNode")
            .focus()
            .keydown(function(event){
                switch( event.which ) {
                case 27: // [esc]
                    // discard changes on [esc]
                    $("input#editNode").val(prevTitle);
                    $(this).blur();
                    break;
                case 13: // [enter]
                    // simulate blur to accept new value
                    $(this).blur();
                    break;
                }
            }).blur(function(event){
                // Accept new value, when user leaves <input>
                var title = $("input#editNode").val();
                console.log("onblur",title);
                console.log("prevTitle",prevTitle);
                if(title == ''){
                    openChildFunction(selectedNode);
                }else{
                    node.setTitle(title);
                    // Re-enable mouse and keyboard handlling
                    tree.$widget.bind();
                    node.focus();
                }


            });
    }




$("#btnAddCode").click(function(event){
        // Sample: add an hierarchic branch using code.
        // This is how we would add tree nodes programatically
        event.preventDefault();
        var node = $("#tree").dynatree("getActiveNode");

        if( validateForm()){
             var rx = /[<>:"\/\\|?*\x00-\x1F]|^(?:aux|con|clock\$|nul|prn|com[1-9]|lpt[1-9])$/i;
                if(rx.test($("#newFolderName").val())) {
                  alert("Error: Input contains invalid characters!");
                  return false;
               }

            var node = $("#tree").dynatree("getActiveNode");
            var childNode = selectedNode.addChild({
                title: '',
            });
            $(".dynatree-title", childNode.span).html("<input id='editNode' value=''>");
            var dict = $("#tree").dynatree("getTree").toDict();
        } 


    });

});

Код

Jsfiddle попробовал пример

Answer 1

Добавлять removeNode Функция, подобная этой, чтобы удалить выбранный узел, если он пуст:

function removeNode(node){
   node.remove();
}

изменить событие размытия, как это, чтобы вызвать removeNode на пустых заголовках:

.blur(function(event){
      var title = $("input#editNode").val();
      //removes the node if title is empty
      if(title == ""){
         removeNode(node);
         tree.$widget.bind();
         return;
      }
      ....
});

наконец, измените событие щелчка btnAddCode следующим образом, чтобы управлять добавлением:

1. получить выбранный узел, используя selectedNode = $("#tree").dynatree("getActiveNode")
2. добавить дочерний элемент, используя addChild метод
3. разверните родительский узел следующим образом:selectedNode.expand(true)
4. и, наконец, позвонить editNode функция для вновь добавленного узла

---

Событие click в btnAddCode должно выглядеть так:

    $("#btnAddCode").click(function(event){

        event.preventDefault();
        selectedNode = $("#tree").dynatree("getActiveNode");

        if( validateForm()){
             var rx = /[<>:"\/\\|?*\x00-\x1F]|^(?:aux|con|clock\$|nul|prn|com[1-9]|lpt[1-9])$/i;
                if(rx.test($("#newFolderName").val())) {
                  alert("Error: Input contains invalid characters!");
                  return false;
                }   
                var childNode = selectedNode.addChild({
                   title: "My new node",
                   tooltip: "This folder and all child nodes were added programmatically."
                });
                selectedNode.expand(true);
                editNode(childNode);
        }    
    });

Редактировать:

Вы должны изменить событие размытия, чтобы в категории дерева не было нескольких узлов с одинаковым дочерним списком title.get родительского узла, и проверьте, имеет ли какой-либо из них, кроме узла редактирования, такой же заголовок, как и у узла редактирования, если это так, сообщите пользователю и вернитесь. поэтому добавление этого кода в событие размытия должно помочь:

var parentChilds = node.parent.childList;
var titleAvalible = false;
$.each(parentChilds,function(_index){
    if(this.data.key != node.data.key && this.data.title == title){
       titleAvalible = true;
    }
});
if(titleAvalible){
    alert("A node with same title is avalible");
    return;
}

Я также обновил скрипку.

надеюсь, это поможет.