如何使用來自SQL查詢的數據填充Javascript動態樹

我已經搜索了互聯網和本網站以獲取該問題的答案，但我還沒有看到它。如果我錯過了一個帖子，我很抱歉。如何使用來自SQL查詢的數據填充Javascript動態樹

我想要做的是使用從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訪問數據的另一行

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

});

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

來源

2012-02-21 Zack

肯定同意克里斯托弗關於每深度沒有功能的答案。你應該也不會再重返每個級別一個單獨的列。父Id身份驗證技術運行良好，或者如果您使用的是Microsoft SQL Server 2008，則它使用HierachyId類型（http://technet.microsoft.com/zh-cn/library/bb677290.aspx）構建對層次結構的支持。 – Makotosan 2012-02-21 17:01:55

當你正在建設一個樹狀結構，用遞歸函數是很重要的。你不應該在樹中每深度建立一個函數。

由於文本有點粗糙，將原始查詢從服務器返回給客戶端。我建議將你的查詢放入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 children與他們關聯。無論哪種方式，不要混淆樹邏輯與業務邏輯。

現在你的查詢結果看起來更像樹查詢應該。您有3個典型的選項：

1）將它通過服務器端模板並將HTML輸出到客戶端進行呈現。 2）將查詢評估到XML樹並將其傳遞給客戶端模板。 3）將查詢評估爲JSON對象並將其傳遞給客戶端模板。

一旦你有了這東西都淘汰了，那麼我們就可以解決這個方程的最後部分，連接到DOM的響應。

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

我建議現在使用服務器端模板生成。它是最古老的並且有多年的文檔。

來源

2012-02-21 16:43:23

我編輯了我的初始文章。我把查詢放入XML中，併發布了一個例子。不知道該怎麼做，因爲這些標籤是模糊的。我不打算每深度有一個功能。我只是以此爲例。我創建了將Parent的名稱和Child的名稱作爲參數的函數，然後添加它們。我只是堅持如何獲取數據。 – Zack 2012-02-21 17:52:33

你有兩個問題。

從SQL獲取數據到JavaScript。

通常你必須在如Perl，Python和Ruby，PHP或語言動態生成在服務器端的頁面。（甚至是JavaScript的，如果你使用Node.js的，但它仍然不會在瀏覽器中運行。）這是可以做到無論是在生成您的網頁，或通過諸如AJAX的技術。我會再說一次，因爲你會在很多地方在網上找到很多關於它的信息。
使用返回的數據，做一個樹形結構。

我將有一個散列/字典/ JavaScript對象將所有節點的ID映射到它們在樹中的位置。然後，對於每個節點，您可以找到它的父id對象，並將新節點作爲新對象追加，並將其添加到散列中。當你完成後，你會有一棵漂亮的樹。（這可以通過一個簡單的循環完成。）這一代樹結構可以在服務器端以服務器端語言完成，也可以在JavaScript客戶端完成。

來源

2012-02-21 16:51:28 btilly

如何使用來自SQL查詢的數據填充Javascript動態樹

回答

相關問題