Пример динамического создания компонента TreeList

Компонент 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, имеющий следующий вид:

См. также:

TreeList