Компонент TreeList поддерживает возможность динамического добавления данных. На странице приведен пример добавления данных в уже созданное дерево.
Для выполнения примера в теге HEAD подключите ссылки на библиотеку компонентов PP.js и таблицы визуальных стилей PP.css. В корневом каталоге должен содержаться файл с наименованием «treeImagesIcons.png».
// Исходные данные
var columns = 3;// Число столбцов
var nodes = 8; //Число вершин-родителей
var columnWidth = 150;// Ширина столбцов
var depth_limit = 2;// Максимальная "глубина" дерева
var subnodes = 2;// Число динамически создаваемых вершин
// Создаем экземпляр компонента TreeList:
component = new PP.Ui.TreeList(
{
Height: 800,
Width: columns * columnWidth,
ParentNode: container,
ImageList: new PP.ImageList({ Source: 'ltreeImagesIcons.png', IconHeight: 20, IconWidth: 18 }),
ShowLines: false,
MultiSelect: true,
RowSelect: true,
EnableResizeColumn: false,
ShowColumns: true,
CaptionVisible: true,
EnableColumnsMenu: false,
Columns: generateColumns(columns), // получаем массив из JSON-объекта, который описывает столбцы
Nodes: generateNodes(nodes)//получаем массив из JSON-объекта, который описывает вершины
});
//Обработчик события выбора вершины, имеющей потомков
component.LoadSubNodesOf.add(onLoad);
//Генерация столбцов
function generateColumns(n) {
var arrColumns = []
for (var i = 0; i < n; i++)
arrColumns.push({ Caption: "Столбец" + i, Width: columnWidth, MinWidth: 10, Visible: true });
return arrColumns;
}
//Генерация вершин
//дочерние вершины будут динамически подгружаться в каждую нечетную вершину родителя
function generateNodes(n) {
var arrNodes = [];
for (var i = 0; i < n; i++) {
var node = { Text: "Вершина" + i, Columns: generateValues() };// Columns ожидает получить массив из значений
if (i % 2 == 0)//отбираем четные вершины c учетом того, что нумерация начинается с 0
node.HasChild = true;//определяем, что у отобранных вершин будут дочерние вершины
arrNodes.push(node);
}
return arrNodes;
}
//Генерация значений
function generateValues() {
var arrValues = [];
for (var i = 0; i < columns; i++) // Число значений должно быть <= числу столбцов
arrValues.push(Math.floor(Math.random() * 100));
return arrValues;
}
//Функция, которая будет обрабатывать подгрузку дочерних вершин
function onLoad(data, args) {
var arrChildNodes = generateNodes(subnodes);//сгенерированный JSON-объект с описанием вершин
var node = args.Node;
if (component.getNodeLevel(node) > depth_limit)//Прерываем бесконечную подгрузку проверкой уровня вершины
node.setHasChild(false);// Если уровень достигнут, то устанавливаем для свойства HasChild значение false,тем самым даем сигнал, что у вершины больше не будет дочерних элементов
else
node.getNodes().loadFrom(arrChildNodes);// если глубинный лимит не исчерпан, то вызываем метод loadFrom у объекта PP.Ui.TreeNodes и передаем ему созданный массив вершин.
};
После выполнения примера будет создан компонент TreeList, имеющий следующий вид:

См. также: