Question

我已经在互联网和这个网站上搜索了这个问题的答案，我还没有看到它。如果我错过了帖子，我很抱歉。

我要做的是使用从SQL查询返回的数据在Javascript中填充树。

SQL查询将返回以下数据......

ROOT_NODE_ID LEVEL1_ID LEVEL1_NAME LEVEL2_ID LEVEL2_NAME LEVEL3_ID LEVEL3_NAME LEVEL4_ID LEVEL4_NAME LEVEL5_ID LEVEL5_NAME LEVEL6_ID LEVEL6_NAME LEVEL7_ID LEVEL7_NAME LEVEL8_ID LEVEL8_NAME LEVEL9_ID LEVEL9_NAME LEVEL10_ID LEVEL10_NAME

示例...

Root  (ROOT_NODE_ID)
   Company 1  (LEVEL1_ID)
       Location 1  (LEVEL2_ID)
           Information1  (LEVEL3_ID)
       Location 2  (LEVEL2_ID)
   Company 2  (LEVEL1_ID)

-ROOT_NODE_ID（ROOT）指向当前节点的父节点。

-LEVEL1_ID（公司1）指向根

的子项

-LEVEL2_ID（位置1）指向LEVEL1_ID的子项

-LEVEL3_ID（信息1）指向LEVEL2_ID的子项

-Company 2将以与SQL查询

中的另一行数据相同的方式创建

-Location 2的ROOT_NODE_ID等于公司1，因为公司1是位置2的父公司

我希望这是有道理的。我目前正在使用jquery，这就是我正在构建我的树...

$(function(){

$("#tree2").dynatree({
    checkbox: true,
    }
});

var rootNode = $("#tree2").dynatree("getRoot");
// Call the DynaTreeNode.addChild() member function and pass options for the new node

//Adding Root
var Root = rootNode.addChild({
    title: "Root",
});

//Adding Level 1
var Company1 = Root.addChild({
    title: "Company 1",
});

//Adding Level 1
var Company2 = Root.addChild({
    title: "Company 2",
});

//Adding level 2
var Location1 = Company1.addChild({
    title: "Location 1",
});
//Adding level 2
var Location2 = Company1.addChild({
    title: "Location 2",
});

//Adding level 3
var Information1 = Location1.addChild({
    title: "Information 1",
});

});

MH

<metadata>
<item name="ROOT_NODE_ID" type="xs:decimal" precision="38" /> 
<item name="LEVEL1_ID" type="xs:string" length="2002" /> 
<item name="LEVEL1_NAME" type="xs:string" length="512" /> 
<item name="LEVEL2_ID" type="xs:string" length="2002" /> 
<item name="LEVEL2_NAME" type="xs:string" length="512" /> 
<item name="LEVEL3_ID" type="xs:string" length="2002" /> 
<item name="LEVEL3_NAME" type="xs:string" length="512" /> 
<item name="LEVEL4_ID" type="xs:string" length="2002" /> 
<item name="LEVEL4_NAME" type="xs:string" length="512" /> 
<item name="LEVEL5_ID" type="xs:string" length="2002" /> 
<item name="LEVEL5_NAME" type="xs:string" length="512" /> 
<item name="LEVEL6_ID" type="xs:string" length="2002" /> 
<item name="LEVEL6_NAME" type="xs:string" length="512" /> 
<item name="LEVEL7_ID" type="xs:string" length="2002" /> 
<item name="LEVEL7_NAME" type="xs:string" length="512" /> 
<item name="LEVEL8_ID" type="xs:string" length="2002" /> 
<item name="LEVEL8_NAME" type="xs:string" length="512" /> 
<item name="LEVEL9_ID" type="xs:string" length="2002" /> 
<item name="LEVEL9_NAME" type="xs:string" length="512" /> 
<item name="LEVEL10_ID" type="xs:string" length="2002" /> 
<item name="LEVEL10_NAME" type="xs:string" length="512" /> 
</metadata>
<data>


<row>
<value>5</value> 
<value>5</value> 
<value>Global Root</value> 
<value>10</value> 
<value>Company</value> 
<value>100001</value> 
<value>Customer</value> 
<value>100002</value> 
<value>Customer Site</value> 
<value>120000</value> 
<value>Location</value> 
<value xs:nil="true" /> 
<value xs:nil="true" /> 
<value xs:nil="true" /> 
<value xs:nil="true" /> 
<value xs:nil="true" /> 
<value xs:nil="true" /> 
<value xs:nil="true" /> 
<value xs:nil="true" /> 
<value xs:nil="true" /> 
<value xs:nil="true" /> 
</row>
</data>

Answer 1

构建树结构时，使用递归函数很重要。你永远不应该在树中建立每个深度的函数。

将原始查询从服务器返回到客户端作为文本有点粗糙。我建议将您的查询放入JSON或XML中，以便利用这些工具来实现这一目标。没有理由手动将文本响应解析回数据结构。

在最佳实践中，数据库（内容）和客户端（视图）从不直接相互通信。这就是为什么你没有找到任何有用的信息。

一旦定义了开发环境，例如运行LAMP（Linux，Apache，MySQL，PHP）服务器，我们就可以继续解决存储在表中的数据结构本身：

ID | Parent | Type | Name | Target
1 | 0 | Folder | "Root" | null
2 | 1 | Document | "Read Me" | "SomePath/Readme.txt"
3 | 1 | Folder | "My Documents" | "SomePath/My_Documents/"
4 | 3 | Document | "Black Book" | "SomePath/My_Documents/Black_Book.txt"

我不是DBA，但是如果查看“父”列，您可以看到任何节点都可以有子节点，因此请使用业务逻辑来防止不需要的事情发生，例如具有子节点的文档。谁知道，也许您的业务逻辑是允许文档具有type-＆gt;与其关联的权限子项。无论哪种方式，都不要将树逻辑与业务逻辑混淆。

现在，您的查询结果看起来更像树查询。您有3种典型选择：

1）将其传递到服务器端模板，并将HTML输出到客户端进行渲染。 2）将查询评估为XML树并将其传递给客户端模板。 3）将查询评估为JSON对象并将其传递给客户端模板。

一旦你把所有这些东西都淘汰了，那么我们可以解决方程式的最后一部分，将响应附加到DOM。

$('someLocation').append(response);

我建议现在使用服务器端模板生成。它是最古老的，有多年的文档。

Answer 2

你有两个问题。

将数据从SQL获取到JavaScript。

通常，您必须使用Perl，Python，Ruby或PHP等语言在服务器端动态生成页面。（或者甚至是JavaScript，如果你使用Node.js，但它仍然不会在浏览器中运行。）这可以在你生成你的页面时，或者通过像AJAX这样的技术来完成。我不会再说这个了，因为你会在很多地方找到很多关于它的信息。
使用返回的数据，制作树形结构。

我会有一个哈希/字典/ JavaScript对象，将所有节点的id映射到树中的位置。然后，对于每个节点，您可以找到其父ID对象，并将新节点作为新对象追加，同时将其添加到散列中。当你完成后，你将拥有一棵漂亮的树。（这可以在一个简单的循环中完成。）这一代树结构可以在服务器端语言的服务器端完成，也可以在JavaScript的客户端完成。

如何使用SQL查询中的数据填充Javascript动态树

2 个答案: