如何使用SQL查询中的数据填充Javascript动态树
How to populate a Javascript Dynamic Tree with data from an SQL query
我已经在互联网和本网站上搜索了这个问题的答案,但我还没有看到。如果我错过了一个帖子,我很抱歉。
我正在尝试使用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);
我建议现在使用服务器端模板生成。它是最古老的,有多年的文献记录。
您有两个问题。
-
从SQL到JavaScript获取数据
通常,您必须使用Perl、Python、Ruby或PHP等语言在服务器端动态生成页面。(如果你使用Node.js,甚至是JavaScript,但它仍然不会在浏览器中运行。)这可以在你生成页面时完成,也可以通过AJAX等技术完成。我不再赘述,因为你会在很多地方的网上找到很多关于它的信息。
-
使用返回的数据,创建一个树结构
我会有一个hash/didictionary/JavaScript对象,将所有节点的id映射到它们在树中的位置。然后,对于每个节点,您可以找到其父id对象,并将新节点附加为新对象,同时将其添加到哈希中。当你完成后,你会有一棵漂亮的树。(这可以在一个简单的循环中完成。)树结构的生成可以在服务器端用服务器端语言完成,也可以在客户端用JavaScript完成。
- Laravel 5.2动态下拉选择不填充(javascript)
- 单击按钮时填充javascript变量
- 使用 PHP 填充 Javascript 饼图
- 用 MySql 数据填充 JavaScript 数组
- 从代码后面填充javascript库
- 如何填充javascript数组
- 如何用随机值预填充 JavaScript 数组
- 使用 Browserify / Webpack(ES6 或 CommonJS)填充 JavaScript 资产
- 如何从 html 表数据填充 javascript 模型
- 填充 JavaScript 数组的更好方法
- 使用 PHP/MySQL 填充 JavaScript 数组
- 禁用表单字段,直到上一个字段已填充 JavaScript
- Rails + charts.js:如何使用数据库中的值填充 Javascript 数组
- 为什么 Netbeans 导航器窗格不使用特定文件名填充 JavaScript 文件
- 如何动态填充javascript函数的选项
- 用 mysql 表数据填充 Javascript OptionArray
- 从模板引擎填充javascript数组
- 如何使用SQL查询中的数据填充Javascript动态树
- 用php函数的返回值填充JavaScript变量
- 编辑自动填充javascript的设置超时