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

Question

私はこの質問に対する答えを求めてインターネットとこのウェブサイトを精査しましたが、まだ見ていません. 投稿を見逃した場合は、お詫び申し上げます。

私がやろうとしているのは、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のChildを指す

-会社 2 は、SQL クエリからの別のデータ行を使用して同じ方法で作成されます。

-会社 1 は場所 2 の親であるため、場所 2 の ROOT_NODE_ID は会社 1 と等しくなります。

これが理にかなっていることを願っています。現在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>

score 3 · Accepted Answer

ツリー構造を構築するときは、再帰関数を使用することが重要です。ツリーの深さごとに関数を構築しないでください。

サーバーからクライアントに生のクエリをテキストとして返すのは少し大雑把です。そのためのツールを活用するために、クエリを 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 ではありませんが、「親」列を見ると、どのノードも子を持つことができることがわかります。そのため、ビジネスロジックを使用して、子を持つドキュメントなどの望ましくないことが起こらないようにします。おそらく、あなたのビジネスロジックは、ドキュメントに type->Permission の子を関連付けることを許可することです。いずれにしても、ツリーロジックとビジネスロジックを混同しないでください。

これで、クエリの結果がツリークエリのようになります。3 つの典型的なオプションがあります。

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

このすべてがノックアウトされたら、式の最後の部分に対処して、応答を DOM に添付します。

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

今のところ、サーバー側のテンプレート生成を使用することをお勧めします。これは最も古く、何年ものドキュメントがあります。

score 1 · Accepted Answer

2 つの問題があります。

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

通常、Perl、Python、Ruby、PHP などの言語を使用して、サーバー側でページを動的に生成する必要があります。(または、Node.js を使用している場合は JavaScript でも、ブラウザーで実行されません。) これは、ページを生成するとき、または AJAX などの手法を使用して行うことができます。これについては、オンラインでさまざまな場所で多くのことを見つけることができるので、これ以上は言いません。
返されたデータを使用して、ツリー構造を作成します。

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

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

2 に答える 2

Related

Reference