Dynatree

Question

需要您的帮助，在此先感谢您。

我正在尝试使用 Dyna 树添加、编辑和删除节点。正在尝试以下事情。

当我通过选择任何节点单击“添加”按钮然后添加带有文本框的新节点并且应该采用节点名称并在模糊时它应该设置值
如果没有输入名称，那么文本框应该从树节点中消失。
如果现有节点，则编辑该节点 - 这有效。

我实现的一些功能请查看下面的 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 tried example

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 的点击事件来管理添加：

使用selectedNode = $("#tree").dynatree("getActiveNode")
使用addChild方法添加child元素
像这样展开 parent 节点：selectedNode.expand(true)
最后为新添加的节点调用editNode函数

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);
        }    
    });

编辑：

您应该更改模糊事件以防止树类别具有多个节点，这些节点具有与 parent 节点相同的 title.get child 列表，并检查是否有除编辑之外的任何节点节点，是否与编辑节点有相同的标题，如果有，让用户知道并且return。所以将此代码添加到模糊事件应该可以解决问题：

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;
}

我也更新了fiddle.

希望对您有所帮助。

Dynatree - javascript 添加编辑和删除节点

Dynatree - javascript Add Edit & Delete node

javascript

jquery

jquery-ui

jquery-dynatree