Question

我正在尝试使用FuelEx树控件。当用户选择节点时，我不想加载树上的每个节点。我宁愿在页面加载时加载整个树结构。我已经构建了一个控制器，为我的整个树构建正确的json。

是否有一个如何预加载整个结构的例子？

我目前正在尝试使用以下内容作为起点。一旦我使其正常工作，我将把它转换为数据源对象。

  $('#myTree').tree({
    dataSource: function(options, callback){

    var self = this;
    var param = null;

    if ("type" in options && options.type == "folder") {
        if ("dataAttributes" in options && "children" in options.dataAttributes) {
            param = options.dataAttributes["id"];
        }
    }

    debugger;
    if (param != null) {
        $.ajax({
            url: "/bundle-picker-data",
            //data: 'id=' + param,
            type: 'GET',
            dataType: 'json',
            success: function (response) {
                        if (response.status == "OK")
                            callback({ data: response.data })
                    },
            error: function (response) {
                console.log(response);
            }
        })
    }


    setTimeout(function () {
        callback({ data: [
            { name: 'Ascending and Descending', type: 'folder', dataAttributes: { id: 'folder1' } },
            { name: 'Sky and Water I (with custom icon)', type: 'item', dataAttributes: { id: 'item1', 'data-icon': 'glyphicon glyphicon-file' } },
            { name: 'Drawing Hands', type: 'folder', dataAttributes: { id: 'folder2' } },
            { name: 'Waterfall', type: 'item', dataAttributes: { id: 'item2' } },
            { name: 'Belvedere', type: 'folder', dataAttributes: { id: 'folder3' } },
            { name: 'Relativity (with custom icon)', type: 'item', dataAttributes: { id: 'item3', 'data-icon': 'glyphicon glyphicon-picture' } },
            { name: 'House of Stairs', type: 'folder', dataAttributes: { id: 'folder4' } },
            { name: 'Convex and Concave', type: 'item', dataAttributes: { id: 'item4' } }
        ]});

    }, 400);
  },
    multiSelect: true,
    cacheItems: true,
    folderSelect: false,
  });
    $('#tree-selected-items').on('click', function () {
        console.log("selected items: ", $('#MyTree').tree('selectedItems'));
    });

    $('#myTree').on('loaded', function (evt, data) {
        console.log('tree content loaded');
    });

    $('#myTree').on('opened', function (evt, data) {
        console.log('sub-folder opened: ', data);
    });

    $('#myTree').on('closed', function (evt, data) {
        console.log('sub-folder closed: ', data);
    });

    $('#myTree').on('selected', function (evt, data) {
        console.log('item selected: ', data);
    });

谢谢，格雷格

Answer 1

每次都不必使用dataSource函数来调用外部API。您可以在第一次运行dataSource时调用外部API，并返回回调数据对象中的顶级文件夹。然后，下次，不要根据打开的文件夹将ajax请求和索引放入所有项目对象的集合中。

如果不清楚，请在开头加载包含所有树信息的对象，并根据该文件夹的属性打开文件夹时抓取所需的子项。

每次都必须加载项目 - 此控件没有其他方法，但这些项目可以缓存在内存中，不需要外部网络请求。

在一个ajax调用中预加载整个FuelUx树

1 个答案: