Question

我尝试使用FuelUX实现树视图。

到目前为止，我设法从网站设置示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Fuel UX Basic Template (Globals)</title>
    <!-- CSS -->
    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
    <link href="http://www.fuelcdn.com/fuelux/3.0.2/css/fuelux.min.css" rel="stylesheet">



  </head>
  <body class="fuelux">


    <ul class="tree fuelux" role="tree" id="myTree">
                                    <li class="tree-branch hide" data-template="treebranch" role="treeitem" aria-expanded="false">
                                        <div class="tree-branch-header">
                                            <button class="tree-branch-name">
                                                <span class="glyphicon icon-caret glyphicon-play"></span>
                                                <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 -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script src="http://www.fuelcdn.com/fuelux/3.0.2/js/fuelux.min.js"></script>

   <script>

        $(document).ready(function() {

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

                      var self = this;
                      var param = null

                      console.log(options.type);

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

                    if (param != null) {
                        $.ajax({
                            url: "@routes.FileController.getFolderStructure()",
                            type: 'POST',
                            params: {
                                contentType: 'application/json; charset=utf-8'
                            },
                            dataType: 'json',
                            data: JSON.stringify({ id: 1 }),
                            success: function (response) {
                                callback(response)
                            },
                            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,
                });

            });

    </script>


  </body>
</html>

不幸的是，传递了options参数＆＃34; dataSource＆＃34;没有属性（type，dataAttributes等。）。

我做错了什么？如何设置这些参数？

由于

Answer 1

我收到了options.type "folder"。对于options.children，它不会出现在项目/文件夹的回调数据对象中。

这对我有用：

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

var self = this;
var param = null

console.log(options.type);

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

if (param != null) {
    $.ajax({
        url: "@routes.FileController.getFolderStructure()",
        data: 'id=' + param,
        type: 'POST',
        dataType: 'json',
        success: function (response) {
            callback(response)
        },
        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,
});

我所做的就是将上面的内容复制到Fuel UX仓库中的index.js中并添加了condole.log。它输出＆＃34;文件夹＆＃34;当打开＆＃34;升序和降序＆＃34;这是该项目的类型。

FuelUX树dataSource选项未定义

1 个答案: