2014-10-03 56 views
0

我試圖實現使用FuelUX一個TreeView。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參數不具有的特性(typedataAttributes等)。

我在做什麼錯?我怎樣才能設置這些參數?

感謝

回答

1

我越來越"folder"options.type我。至於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, 
}); 

我所做的只是上面的複製到index.js在燃料UX回購並添加condole.log。當打開作爲該項目類型的「升序和降序」時,它輸出「文件夾」。

+0

感謝您的幫助。問題是,「類型」是不是在「選項」可我.. – dominik 2014-10-04 10:26:06

+0

每當我嘗試登錄'options.type'我收到「未定義」。我用一個完整的html文檔更新了我的問題來測試。 – dominik 2014-10-05 12:09:44

+0

這可能是不固定在3.0.2中的錯誤,我可以使用3.1.0-WIP分支。我在下面的這個分支中發佈了更新的dist文件夾。用以下的fuelux.js文件試試你的代碼。 https://raw.githubusercontent.com/ExactTarget/fuelux/updated-dist/dist/js/fuelux.js – 2014-10-05 16:02:01