Javascriptの動的ツリーにSQLクエリのデータを入力する方法

Question

この質問に対する回答のためにインターネットとこのWebサイトを精査しましたが、まだ見ていません。私が郵便を見逃した場合、私の謝罪。

私がしようとしているのは、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は、当社1場所2

の親であるため

-Location 2のROOT_NODE_IDは、会社1等しくなるSQLクエリからのデータの別の行と同じように作成されます

これは意味があると思います。あなたはツリー構造を構築しているとき、再帰関数を使用することが重要である...

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

を私は現在、jqueryのを使用していますが、これは私が私のツリーを構築しています方法です。ツリー内の深さごとに関数を作成するべきではありません。

サーバからクライアントへの生のクエリをテキストとして返すのは少し難解です。私はあなたの質問をJSONまたはXMLに入れて、そのためのツールを活用することをお勧めします。テキスト応答を手動で解析してデータ構造に戻す理由はありません。

ベストプラクティスでは、データベース（コンテンツ）とクライアント（ビュー）が互いに直接話すことはありません。それで、あなたはそれをやっていく上で有益な情報が見つからないのです。

あなたは、このようなLAMP（Linuxでは、Apacheのは、MySQL、PHP）サーバーを実行しているとして、あなたのdevの環境を定義したら、次に我々は、それ自体がテーブルに格納されているデータ構造に対処する上で移動することができます。

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ではありませんが、 "親"列を見ると、どのノードにも子があることがわかります。したがって、ビジネスロジックを使用して、子を持つDocumentなどの望ましくないことを防ぐことができます。だれかが知っている、おそらくあなたのビジネスロジックは、ドキュメントに関連付けられた型 - >許可の子を持つことを許可することです。いずれにしても、ツリーロジックをビジネスロジックと混同しないでください。

これで、クエリの結果はツリークエリのようになります。あなたは典型的な3つのオプションを持っています：

1）それをサーバーサイドのテンプレートに渡し、HTMLをクライアントに出力してレンダリングします。 2）クエリをXMLツリーに評価し、それをクライアント側のテンプレートに渡します。 3）問合せを評価してJSONオブジェクトを作成し、それをクライアント側のテンプレートに渡します。

これらのものがすべて消滅したら、方程式の最後の部分に対処し、応答をDOMに添付します。

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

私は今、サーバー側のテンプレート生成を使用することをお勧めします。それは最も古く、何年ものドキュメンテーションを持っています。

Answer 2

あなたには2つの問題があります。

1. SQLからJavaScriptへのデータの取得。

   通常、Perl、Python、Ruby、PHPなどの言語でページを動的に生成する必要があります。 （Node.jsを使用している場合はJavaScriptでも、それでもブラウザでは実行されません）。これは、ページを生成するとき、またはAJAXのような手法を使って行うことができます。これについてはこれ以上は言及しません。なぜなら、多くの場所でオンラインで多くのことを見つけるからです。

2. 返されたデータを使用して、ツリー構造を作成します。

   すべてのノードのIDをツリー内のその場所にマッピングするハッシュ/辞書/ JavaScriptオブジェクトがあります。次に、各ノードについて、その親idオブジェクトを見つけて、新しいノードとして新しいノードを追加し、それをハッシュに追加することもできます。あなたが終わったら、素敵な木があります。これは単純なループで行うことができます。このツリー構造の生成は、サーバー側の言語でサーバー側で、またはJavaScriptでクライアント側で実行できます。