FuelUX 树数据源不工作？答案

【问题标题】：FuelUX Tree dataSource not working?FuelUX 树数据源不工作？
【发布时间】：2015-01-24 20:02:57
【问题描述】：

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，结果还是一样。

你能举个例子吗？

【问题讨论】：

标签： javascript jquery twitter-bootstrap tree fuelux

【解决方案1】：

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

模板的rest of your markup 在哪里？

【讨论】：

【解决方案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
});

但不工作:(

【讨论】：