FuelUX Tree dataSource options undefined

Я пытаюсь реализовать treeview с помощью FuelUX.FuelUX Tree dataSource options undefined

До сих пор мне удалось настроить пример с веб-сайта:

<!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 перешел в «DataSource» не обладают свойствами (type, dataAttributes и т.д.).

Что я делаю неправильно? Как установить эти параметры?

Благодаря

источник

2014-10-03 dominik

Я получаю 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, 
});

Все, что я сделал копию выше в index.js в репо топлива УБ и добавил condole.log. Он выводит «папку» при открытии «Восходящий и нисходящий», который является типом этого элемента.

источник

2014-10-03 20:00:55

Спасибо за вашу помощь. Проблема в том, что «тип» недоступен для «опций» для меня .. – dominik

Всякий раз, когда я пытаюсь записать 'options.type', я получаю« undefined ». Я обновил свой вопрос с помощью полного html-документа для тестирования. – dominik

Это может быть ошибка, которая не исправлена в 3.0.2, я могу использовать ветку 3.1.0-WIP. Я разместил обновленную папку dist в этой ветке ниже. Попробуйте использовать свой код со следующим файлом fuelux.js. https://raw.githubusercontent.com/ExactTarget/fuelux/updated-dist/dist/js/fuelux.js –

FuelUX Tree dataSource options undefined

ответ

Смежные вопросы