Как заполнить динамическое дерево Javascript данными из запроса SQL - PullRequest
Новая
       13

Как заполнить динамическое дерево Javascript данными из запроса SQL

1 голос
/ 21 февраля 2012

Я искал интернет и этот сайт, чтобы найти ответ на этот вопрос, и я еще не видел его.Приношу свои извинения, если я пропустил сообщение.

Я пытаюсь заполнить дерево в Javascript, используя данные, возвращаемые из запроса SQL.

Запрос 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

-ROOT_NODE_ID местоположения 2 будет равен компании 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>

Ответы [ 2 ]

3 голосов
/ 21 февраля 2012

Когда вы строите древовидную структуру, важно использовать рекурсивные функции.Вы никогда не должны строить функцию по глубине в дереве.

Возврат необработанного запроса с сервера клиенту, так как текст немного грубоват.Я бы предложил поместить ваш запрос в 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"

Я не администратор баз данных, но если вы посмотрите на столбец «Родитель», вы увидите, что любой узел может иметь дочерний элемент, поэтому используйте бизнес-логику, чтобы предотвратить нежелательные события, такие как документ, имеющий ребенка.Кто знает, может быть, ваша бизнес-логика заключается в том, чтобы разрешить документу иметь ассоциированные дочерние элементы типа-> Разрешения.В любом случае, не путайте древовидную логику с бизнес-логикой.

Теперь ваш результат запроса больше похож на древовидный запрос.У вас есть 3 типичных варианта:

1) Пропустите его через шаблон на стороне сервера и выведите HTML на клиент для рендеринга.2) Оценить запрос в дерево XML и передать его шаблону на стороне клиента.3) Оцените запрос в объект JSON и передайте его шаблону на стороне клиента.

После того, как все эти вещи выбиты, мы можем обратиться к последней части уравнения, прикрепив ответ кDOM. 

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

Я предлагаю сейчас использовать генерацию шаблонов на стороне сервера.Он самый старый и имеет многолетнюю документацию.

1 голос
/ 21 февраля 2012

У вас есть две проблемы.

  1. Получение данных из SQL в JavaScript.

    Как правило, вы должны динамически генерировать страницу на стороне сервера на языке, таком как Perl, Python, Ruby или PHP. (Или даже JavaScript, если вы используете Node.js, но он все равно не будет работать в браузере.) Это можно сделать либо при создании страницы, либо с помощью техники, подобной AJAX. Я не буду больше говорить об этом, потому что вы найдете много об этом в Интернете во многих местах.

  2. Используя возвращенные данные, создайте древовидную структуру.

    У меня был бы объект hash / dictionary / JavaScript, отображающий идентификаторы всех узлов на их места в дереве. Затем для каждого узла вы можете найти его родительский объект id и добавить новый узел в качестве нового объекта, также добавив его в хеш. Когда вы закончите, у вас будет красивое дерево. (Это можно сделать в простом цикле.) Это создание древовидной структуры может быть выполнено либо на стороне сервера на языке сервера, либо на стороне клиента в JavaScript.

...