如何預先選擇Fuel UX樹視圖中的項目？

Question

所以我在我的網站中實現了Fuel UX的treeview。每當它被加載時，我需要重新選擇我想要手動的項目。每次重新加載後是否可以預先選擇某些項目？

在此先感謝！

Answer 1

如果通過手動方式，你的意思是你實際上再次點擊這些項目，應該有一種方法可以以編程方式進行更多操作。

我沒有測試它，但如果你調用$('#MyTree').tree('selectItem', $el)其中$el是.tree-item元素，應選擇該項目。

這對您的數據源能夠告訴樹選擇哪些項目會很好。我發現你已經發布了https://fuelux.uservoice.com/forums/181290-general/suggestions/4097231-add-preselect-option-for-treeview的功能請求，這是非常棒的 - 任何閱讀此內容的人都會同意這一點。

Answer 2

從昨天起我處於相同的情況，現在可以用下面的解決方案解決問題。只是說明我使用了page上的按鈕「選擇嵌套測試項目1」中的方法。這裏的解決方案：

var preSelectFolder = function ($treeEl, folder, $parentEl) { 
      var $elParent = $parentEl || $treeEl; 
      if (folder.type == "folder") { 
       var $folderEl = $elParent.find("div.tree-folder-name").filter(function (_, treeFolder) { 
        return $(treeFolder).text() == folder.name; 
       }).parent(); 
       $treeEl.one("loaded", function() { 
        $.each(folder.children, function (i, item) { 
         preSelectFolder($treeEl, item, $folderEl.parent()); 
        }); 
       }); 
       $treeEl.tree("selectFolder", $folderEl); 
      } 
      else { 
       preSelectItem($treeEl, folder, $elParent); 
      } 
     }; 

     var preSelectItem = function ($treeEl, item, $parentEl) { 
      var $elParent = $parentEl || $treeEl; 
      if (item.type == "item") { 
       var $itemEl = $elParent.find("div.tree-item-name").filter(function (_, treeItem) { 
        return $(treeItem).text() == item.name && !$(treeItem).parent().is(".tree-selected"); 
       }).parent(); 
       var itemId = $($itemEl).data() != null ? $($itemEl).data().id : ""; 
       if (itemId == item.id) 
        $treeEl.tree("selectItem", $itemEl); 
      } 
      else if (item.type == "folder") { 
       preSelectFolder($treeEl, item, $elParent); 
      } 
     }; 

而且在「裝」事件我用這個代碼：

element.on('loaded', function (e) { 
      angular.forEach(scope.items, function (item) { 
       preSelectItem($("#BuildTree"), item); 
      }); 
     }); 

我用AngularJs所以才替換「angular.forEach」爲jQuery和各功能的「範圍「.items」是應該預選的項目。在我的情況下，項目是在以下格式：

[ 
    { name: 'Dir 1', type: 'folder', id: 'D1' }, 
    { name: 'Dir 2', type: 'folder', id: 'D2' }, 
    { name: 'Item 1', type: 'item', id: 'i1' }, 
    { name: 'Item 2', type: 'item', id: 'i2' } 
] 

希望有所幫助。

Answer 3

我使如果ASP.NET MVC。我使用動態樹。 起初我接收到的路線選擇的項目

[{ 
    "id": 1, // parent category 
    "name": "Все категории", 
}, { 
    "id": 56, // 1-st sub category 
    "name": "Для дома", 
}, { 
    "id": 63, // item 
    "name": "Домашние растения", 
}] 

然後，它需要在數據源功能關掉異步請求爲Ajax：「異步」：假

這是所有代碼：

@{ 
        var jsonSerializer = new System.Web.Script.Serialization.JavaScriptSerializer(); 
        string catRoute = jsonSerializer.Serialize(ViewBag.catRoute); 
       } 
       var catRoute = $.parseJSON('@Html.Raw(catRoute)'); // this is object of item route 


       function dynamicDataSource(openedParentData, callback) { 
        var childNodesArray = []; 

        $.ajax({ 
         'type': 'post', 
         'url': '@Url.Action("getFuelUxTree", "Category", new { area = "Root" })', 
         'data': openedParentData, 
         'async':false // switch off ajax request 
        }) 
        .done(function (data) { 
         childNodesArray = data; 
         lastTree = data; 
         callback({ 
          data: childNodesArray 
         }); 

        }); 
       } 

       $('#categoryTree').tree({ 
        dataSource: dynamicDataSource, 
        multiSelect: false, 
        folderSelect: false 
       }); 

// iterate all route items and open category 
       for (var i = 0; i < catRoute.length; i++) { 
        $('li#'+catRoute[i].id+' button', '#categoryTree').click(); 
       }