Javascript中的泛型树实现

Javascript中的泛型树实现,javascript,tree,Javascript,Tree,有人知道JavaScript的通用树(节点可能有多个子节点)实现吗 它至少应该能够做这些事情 获取父节点 获取子节点 得到所有的后代 删除所有子体 删除子节点 一些实现类似于邻接列表模型 背景:我需要为我的网页存储基于JavaScript的分层数据,我找不到一个好的通用树的JavaScript实现,所以我使用ajax使用邻接列表模型和php将分层数据存储到数据库中。当用户在同一浏览器的两个选项卡中打开同一页或在两个不同的浏览器中打开该页时,就会出现问题,因为两个实例都在向同一个表写入数据,从同一

有人知道JavaScript的通用树(节点可能有多个子节点)实现吗

它至少应该能够做这些事情

  • 获取父节点
  • 获取子节点
  • 得到所有的后代
  • 删除所有子体
  • 删除子节点
  • 一些实现类似于邻接列表模型

    背景:我需要为我的网页存储基于JavaScript的分层数据,我找不到一个好的通用树的JavaScript实现,所以我使用ajax使用邻接列表模型和php将分层数据存储到数据库中。当用户在同一浏览器的两个选项卡中打开同一页或在两个不同的浏览器中打开该页时,就会出现问题,因为两个实例都在向同一个表写入数据,从同一个表读取数据,这会给我带来问题。任何可能的解决方法也会回答我的问题

    编辑:性能确实不是我的限制,在任何时候,我都不会有超过50个条目。

    您可以尝试以下方法:

    或者这样:(只有二进制搜索的树,但olso其他数据结构)

    如果您需要更复杂的东西,您将需要编写自己的库(或至少一个包含您描述的所有方法的对象)

    编辑:

    这是我实现树功能的简单代码。删除所有子代和删除所有子代实际上是相同的。。。因此:

    function Node(value) {
    
        this.value = value;
        this.children = [];
        this.parent = null;
    
        this.setParentNode = function(node) {
            this.parent = node;
        }
    
        this.getParentNode = function() {
            return this.parent;
        }
    
        this.addChild = function(node) {
            node.setParentNode(this);
            this.children[this.children.length] = node;
        }
    
        this.getChildren = function() {
            return this.children;
        }
    
        this.removeChildren = function() {
            this.children = [];
        }
    }
    
    var root = new Node('root');
    root.addChild(new Node('child 0'));
    root.addChild(new Node('child 1'));
    var children = root.getChildren();
    for(var i = 0; i < children.length; i++) {
        for(var j = 0; j < 5; j++) {
            children[i].addChild(new Node('second level child ' + j));
        }
    }
    console.log(root);
    children[0].removeChildren();
    console.log(root);
    console.log(root.getParentNode());
    console.log(children[1].getParentNode());
    
    功能节点(值){
    这个值=值;
    这是:children=[];
    this.parent=null;
    this.setParentNode=函数(节点){
    this.parent=节点;
    }
    this.getParentNode=函数(){
    将此文件返回给父对象;
    }
    this.addChild=函数(节点){
    node.setParentNode(此);
    this.children[this.children.length]=节点;
    }
    this.getChildren=函数(){
    把这个还给孩子们;
    }
    this.removeChildren=函数(){
    这是:children=[];
    }
    }
    var root=新节点(“根”);
    root.addChild(新节点('child 0'));
    addChild(新节点('child 1'));
    var children=root.getChildren();
    对于(变量i=0;i
    在Chrome(或其他支持控制台的浏览器)中运行它。

    尽管您说的是“通用树”,但对于已经内置的
    DOMParser
    来说,您的具体需求听起来足够简单

    我尊重其他程序员的意见,但我仍然认为您可以尝试一下
    DOM
    ,看看它是否适合您

    下面是一个简单的例子,说明它是如何工作的:

    var tXML="<root><fruit><name>apple</name><color>red</color></fruit><fruit><name>pear</name><color>yellow</color></fruit></root>";
    var tree=(new DOMParser).parseFromString(tXML,"text/xml");
    //get descendants
    var childs=tree.documentElement.childNodes;
    for(var i=0;i<childs.length;i++)
    {
     if(childs[i].nodeName=="fruit")
     {
      document.write(childs[i].getElementsByTagName("name")[0].textContent);
      document.write(": ");
      document.write(childs[i].getElementsByTagName("color")[0].textContent);
      document.write("<br />");
     }
    }
    //get child node
    var appl=tree.documentElement.getElementsByTagName("fruit")[0];
    document.write(appl.getElementsByTagName("name")[0].textContent+"<br />");
    //get parent node
    document.write(appl.parentNode.nodeName);
    document.write("<br />");
    //remove child node
    if(tree.documentElement.getElementsByTagName("color").length>1)
    {
     var clr=tree.documentElement.getElementsByTagName("color")[1];
     clr.parentNode.removeChild(clr);
    }
    document.write("<textarea>"+(new XMLSerializer).serializeToString(tree)+"</textarea><br />");
    //remove descendants
    while(tree.documentElement.childNodes.length>0)
    {
     tree.documentElement.removeChild(tree.documentElement.childNodes[0]);
    }
    document.write("<textarea>"+(new XMLSerializer).serializeToString(tree)+"</textarea>");
    
    var-tXML=“appleredpearyellow”;
    var tree=(新的DOMParser.parseFromString(tXML,“text/xml”);
    //传宗接代
    var childs=tree.documentElement.childNodes;
    对于(var i=0;i1)
    {
    var clr=tree.documentElement.getElementsByTagName(“颜色”)[1];
    clr.parentNode.removeChild(clr);
    }
    write(“+(新的XMLSerializer).serializeToString(树)+”
    ); //删除后代 while(tree.documentElement.childNodes.length>0) { tree.documentElement.removeChild(tree.documentElement.childNodes[0]); } write(“+(新的XMLSerializer.serializeToString(树)+”);

    我没有“简化”那些长函数名,因此您可能会有更好的想法。

    您是否正在寻找类似的东西@RJ45它与外观无关它与分层数据存储有关。听起来很像一个简单的XML结构……您是否考虑过
    window.DOMParser()
    ?@路人谢谢您的建议,这是我以前从未知道的。我在浏览那些不多的页面,几分钟的谷歌搜索也给不了我多少。。。。。你能不能告诉我一些页面,它实际上展示了如何将删除条目添加到XML字符串中。请不要建议使用DOM。从API的角度来看,DOM在访问普通树时非常难看。我不想重新发明轮子,二叉树对我不起作用,而且我在JavaScript方面没有什么经验,我认为这还不足以编写新的库。使用@Passerby在上面的评论中告诉我们的XML结构怎么样?我觉得这比编写一个新的库要好一点。有人写过类似的东西吗?请回复@Joachim Sauer写道,使用DOM不是一个好主意,我永远不会建议使用它来完成此任务。您编辑的问题与问题标题不符。检查我编辑的答案。我提供了示例JS代码。这个答案至少对我很有用,谢谢你花时间做的很好。在上面的示例中,为了方便添加子节点,一个快速的小改动是在addChild()方法中添加return。返回this.children[this.children.length-1];