Пример создания компонента DynamicTreeList

Для выполнения примера в теге HEAD подключите ссылки на библиотеку компонентов PP.js и таблицы визуальных стилей PP.css. В теге BODY добавьте элемент DIV с идентификатором «container».

Подключим скрипт, генерирующий случайные вершины:

<script src="genJsonDyn.js" type="text/javascript"></script>

Скрипт genJsonDyn.js

В тег <script> добавим следующий код:

// Функция получения новых вершин
    function onDataRequest(sender, args) {
        var nodes = {};
        var node;
        if (args.Partial)
            for (var i = 0; i < args.Request.length; i++) {
                node = genNode(args.Request[i].Parent, args.Request[i].Index, count);
                nodes[node['k']] = node;
            }
        else {
            for (var i = 0; i < count; i++) {
                node = genNode(args.Parent, i, count);
                nodes[node['k']] = node;
            }
        }
        PP.setTimeout(function () {  // Имитируем задержку ответа от сервера
            sender.loadNodes(nodes); // Загрузка вершин
        }, 400);
    };
    var count = 50; // Количество создаваемых вершин
    var json = []; 
    json.push({
        'k': '',
        '@hc': true,
        '@cc': count
    });
// Создадим компонент
     var t, treelist;
    t = treelist = new PP.Ui.DynamicTreeList({
        ParentNode: 'container',
        DataObject: json,
        DataMappers: {
            Key: 'k',
            Index: 'i',
            Parent: 'p',
            Content: new PP.PropertyMapper({
                Getter: function (item) { return item.a.it },
                Setter: function (item, value) { item.a.it = value; },
                Context: null
            }),
            Selected: 's',
            FixedSelected: '@fs',
            Expanded: 'e',
            ChildrenCount: '@cc'
        },
        Width: 700,
        Height: 550,
        ShowCheckBoxes: true,
        EnableSort: true,
        ShowCaptions: true,
        ShowTree: true,
        Captions:
        [{
            Content: 'first',
            Width: '36%'
        },{
            Content: 'second',
            Width: '11%'
        },{
            Content: 'third',
            Width: '53%'
        }
        ],
        DataRequest: onDataRequest
    });

В результате выполнения примера был создан компонент DynamicTreeList. При открытии вершины будут запрошены новые вершины и динамически добавлены в дерево.

См. также:

DynamicTreeList