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

【问题标题】：How to preselect items within a Fuel UX treeview?如何在 Fuel UX 树视图中预选项目？
【发布时间】：2013-06-14 16:25:03
【问题描述】：

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

提前致谢！

【问题讨论】：

标签： javascript jquery treeview fuelux

【解决方案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' }
]

希望对您有所帮助。

【讨论】：

这个“元素”对象存在哪里来签署他的“加载”事件？
AngularJs directive 链接：函数（范围、元素、属性）。在 AngularJs 的指令中有一个名为 Link 的函数。这个函数的参数是：作用域、元素和属性。有问题的元素由指令监控。

【解决方案2】：

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

我还没有测试过，但是如果你调用$('#MyTree').tree('selectItem', $el)，其中$el 是一个.tree-item 元素，那应该选择该项目。

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

【讨论】：

【解决方案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();
                }

【讨论】：