javascript - 如何在 Fuel UX 树视图中预选项目？

Question

所以我在我的网站中实现了 Fuel UX 的树状视图。无论何时加载，我都需要手动重新选择我想要的项目。每次重新加载后是否可以预先选择某些项目？

提前致谢！

Answer 1

从昨天开始我就处于同样的情况，现在可以使用以下解决方案解决问题。只是说明我使用了此页面上“选择嵌套测试项 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' }
]

希望有帮助。

Answer 2

如果手动，您的意思是您实际上是再次单击项目，应该有一种方法可以更以编程方式执行此操作。

我还没有测试过它，但是如果你调用$('#MyTree').tree('selectItem', $el)where $elis a .tree-itemelement，那应该选择该项目。

如果您的数据源能够告诉树选择了哪些项目，那就太好了。我看到您已将功能请求发布到https://fuelux.uservoice.com/forums/181290-general/suggestions/4097231-add-preselect-option-for-treeview，这很棒 - 其他任何阅读此内容的人都同意应该在那里投票会很有用。

Answer 3

我为 ASP.NET MVC 做 if。我使用动态树。起初我收到了所选项目的路线

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

然后需要在 dataSource 函数中关闭 Ajax 的异步请求：'async':false

这是所有代码：

    @{
                    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();
                }