1

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

我要做的是使用从 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 (Company 1) 指向根的 Child

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

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

- 公司 2 的创建方式与 SQL 查询中的另一行数据相同

- 位置 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",
});

});

小时

<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>
4

2 回答 2

3

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

将原始查询作为文本从服务器返回到客户端有点粗糙。我建议将您的查询放入 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，但是如果你查看“Parent”列，你可以看到任何节点都可以有一个孩子，所以使用业务逻辑来防止发生不需要的事情，例如 Document 有一个孩子。谁知道呢，也许你的业务逻辑是允许一个文档有 type->Permission 与他们相关联的孩子。无论哪种方式，都不要将树逻辑与业务逻辑混淆。

现在您的查询结果看起来更像是一个树查询。您有 3 个典型选项：

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

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

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

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

于 2012-02-21T16:43:23.327 回答
1

You have two issues.

  1. Getting data from SQL to JavaScript.

    Typically you have to dynamically generate a page on the server side in a language like Perl, Python, Ruby, or PHP. (Or even JavaScript if you're using Node.js, but it still won't be running in the browser.) This can be done either when you generate your page, or through a technique like AJAX. I'll say no more about this because you'll find a lot about it online in lots of places.

  2. Using the returned data, make a tree structure.

    I would have a hash/dictionary/JavaScript object mapping the ids of all of the nodes to their places in the tree. Then for each node, you can find its parent id object, and append the new node as a new object, also adding it to the hash. When you are done, you'll have a nice tree. (This can be done in a simple loop.) This generation of the tree structure can be done either on the server side in your server side language, or on the client side in JavaScript.

于 2012-02-21T16:51:28.950 回答