Question

所以我在我的网站上实现了Fuel UX的树视图。每当它被加载，我需要手动重新选择我想要的项目。是否有可能在每次重新加载后预选某些项目？

提前致谢！

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' }
]

希望有所帮助。

Answer 2

如果通过手动，您的意思是您实际上再次点击这些项目，那么应该有一种方法可以更方便地执行此操作。

我尚未对其进行测试，但如果您致电$('#MyTree').tree('selectItem', $el)其中$el为.tree-item元素，则应选择该项。

您的数据源能够告诉树选择了哪些项目会很不错。我发现您已将功能请求发布到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();
                }

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

3 个答案: