0

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

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

我目前正在尝试使用以下内容作为起点。一旦我让它正常工作，我会将它转换为 Datasource 对象。

  $('#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);
    });

谢谢，格雷格

4

1 回答 1

1

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

如果不清楚，请在开始时加载包含所有树信息的对象，并在基于该文件夹的属性打开文件夹时从中获取您需要的任何子项。

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

于 2014-10-04T20:41:13.937 回答