Question

http://getfuelux.com/javascript.html#tree处的文档没有提供有关如何使用Javascript数据源的良好示例。我已经在StackOverflow上阅读了很多关于它的其他问题，但是大多数都是旧的（仍然使用name而不是text）。任何人都可以帮助我使用dataSource和callback用法吗？

这是我目前的代码：

HTML：

<div class="row fuelux">
    <div class="col-sm-12">
        <div id="grp-tree-hobby">
            <ul id="tree-hobbies" class="tree">
            </ul>

        </div>
    </div>

</div>

使用Javascript：

<script>
    $("#tree-hobbies").tree({
        dataSource: function (parentData, callback) {
            console.log(parentData);
            callback({
                "data": [
                     { "text": "No hobby has been added yet", "type": 'item' },
                     { "text": "No hobby has been added yet", "type": 'item' },
                ],
            });
        },

    });

</script>

控制台中没有打印任何异常，但ul仍为空白，如果我将ul更改为div，结果仍然相同。

你能举个例子吗？

Answer 1

对于实际文档页面上的示例，这是the code。

模板的rest of your markup在哪里？

Answer 2

我有同样的问题。但我的意思是你的HTML代码是错误的。你必须使用这个：

        <ul class="tree tree-folder-select" role="tree" id="dirTree">
          <li class="tree-branch hide" data-template="treebranch" role="treeitem" aria-expanded="false">
            <div class="tree-branch-header">
              <button class="glyphicon icon-caret glyphicon-play"><span class="sr-only">Open</span></button>
              <button class="tree-branch-name">
                <span class="glyphicon icon-folder glyphicon-folder-close"></span>
                <span class="tree-label"></span>
              </button>
            </div>
            <ul class="tree-branch-children" role="group"></ul>
            <div class="tree-loader" role="alert">Loading...</div>
          </li>
          <li class="tree-item hide" data-template="treeitem" role="treeitem">
            <button class="tree-item-name">
              <span class="glyphicon icon-item fueluxicon-bullet"></span>
              <span class="tree-label"></span>
            </button>
          </li>
        </ul>

接下来我使用了这个jquery定义：

$('#dirTree').tree({
    dataSource: function(options, callback){
        setTimeout(function () {
            callback({ data: [
                { name: 'Ascending and Descending', type: 'folder', dataAttributes: { id: 'F1' } },
                { name: 'Drawing Hands', type: 'folder', dataAttributes: { id: 'F2' } },
                { name: 'Belvedere', type: 'folder', dataAttributes: { id: 'F3' } },
                { name: 'House of Stairs', type: 'folder', dataAttributes: { id: 'F4' } },
                { name: 'Belvedere', type: 'folder', dataAttributes: { id: 'F5' } }
            ]});
        }, 400);},
    cacheItems: false,
    folderSelect: true,
    multiSelect: false
});

但没有工作:(

FuelUX树数据源无法正常工作？

2 个答案: