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

How to populate a Javascript Dynamic Tree with data from an SQL query

本文关键字:填充 Javascript 动态 数据 何使用 SQL 查询      更新时间:2023-09-26

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

我正在尝试使用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 的子级

-公司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",
});
});

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>

在构建树结构时,使用递归函数非常重要。您永远不应该在树中按深度构建函数。

将原始查询作为文本从服务器返回到客户端有点粗糙。我建议将您的查询放入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);

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

您有两个问题。

  1. 从SQL到JavaScript获取数据

    通常,您必须使用Perl、Python、Ruby或PHP等语言在服务器端动态生成页面。(如果你使用Node.js,甚至是JavaScript,但它仍然不会在浏览器中运行。)这可以在你生成页面时完成,也可以通过AJAX等技术完成。我不再赘述,因为你会在很多地方的网上找到很多关于它的信息。

  2. 使用返回的数据,创建一个树结构

    我会有一个hash/didictionary/JavaScript对象,将所有节点的id映射到它们在树中的位置。然后,对于每个节点,您可以找到其父id对象,并将新节点附加为新对象,同时将其添加到哈希中。当你完成后,你会有一棵漂亮的树。(这可以在一个简单的循环中完成。)树结构的生成可以在服务器端用服务器端语言完成,也可以在客户端用JavaScript完成。