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

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

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

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

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

感谢，格雷格

来源

2014-10-04 Greg Svitak

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

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

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

来源

2014-10-04 20:41:13

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

回答

相关问题