Question

需要你的帮助，并提前致谢。

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

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

我已经取得了一些功能，请在下面查看jsfiddle并帮助我

以下是我的jsfiddle网址，请帮忙

$(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方法
像这样展开父节点：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);
        }    
    });

修改

你应该改变模糊事件，以防止具有多个节点的树类具有相同的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;
}

我还更新了fiddle。

Dynatree - javascript添加编辑＆amp;删除节点

1 个答案: