javascript - 如何在 Fuel UX TreeView 中预选项目？

Question

所以我在我的网站中实现了 Fuel UX 的 TreeView 。每当它加载时，我都需要手动重新选择我想要的项目。是否可以在每次重新加载后预选某些项目？

提前致谢!

Answer 1

我从昨天开始就处于同样的情况，现在可以用下面的解决方案解决问题。只是解释一下，我在这个 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，所以只需为 Jquery 的每个函数替换“angular.forEach”，而“scope.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' }
]

希望对您有所帮助。