KendoUI PanelBar 记住扩展项答案

【问题标题】：KendoUI PanelBar remember expanded itemsKendoUI PanelBar 记住扩展项
【发布时间】：2012-11-29 07:35:55
【问题描述】：

我尝试实现 Kendo UI PanelBar（参见http://demos.kendoui.com/web/panelbar/images.html）如果我打开一些项目（高尔夫、游泳）然后单击“视频记录”，我已经展开了项目。但是当我刷新页面（单击某个链接）时，所有扩展结构都丢失了。

我在 KendoUI 论坛上发现，我只能获得所选项目的位置，并且在重新加载页面后我必须计算所有节点。有什么办法，我怎样才能在我的情况下扩展项目？如果不需要，我不想使用 html 框架。

最好的问候，彼得

【问题讨论】：

标签： kendo-ui remember-me panelbar

【解决方案1】：

面板的打开发生在客户端。刷新页面时，浏览器将呈现提供的标记，其中不包含所选面板的任何附加标记。

为了实现这一点，您需要以某种方式存储一个指示已打开面板的值。完成此操作的最简单方法是使用 cookie（由 JavaScript 设置或对服务器进行 AJAX 调用）。

然后，当panelBar被渲染时，它将使用cookie中的值将正确的选项卡设置为选定的选项卡。

【讨论】：

【解决方案2】：

谢谢你的回答，很有用。我在这里添加了 jQuery 的骨架代码，它现在记住了 1 个选定的项目。必填添加 jquery.cookie.js [https://github.com/carhartl/jquery-cookie]

function onSelect(e) {
    var item = $(e.item),
        index = item.parentsUntil(".k-panelbar", ".k-item").map(function () {
            return $(this).index();
        }).get().reverse();

    index.push(item.index());

    $.cookie("KendoUiPanelBarSelectedIndex", index);
    //alert(index);
}

var panel = $("#panelbar").kendoPanelBar({
    select: onSelect
}).data("kendoPanelBar");

//$("button").click(function () {
//    select([0, 2]);
//});

function select(position) {
    var ul = panel.element;
    for (var i = 0; i < position.length; i++) {
        var item = ul.children().eq(position[i]);
        if (i != position.length - 1) {
            ul = item.children("ul");
            if (!ul[0])
                ul = item.children().children("ul");
            panel.expand(item, false);
        } else {
            panel.select(item);
        }
    }
}

// on page ready select value from cookies
$(document).ready(function () {
    if ($.cookie("KendoUiPanelBarSelectedIndex") != null) {
        //alert($.cookie("KendoUiPanelBarSelectedIndex"));
        var numbersArray = $.cookie("KendoUiPanelBarSelectedIndex").split(',');
        select(numbersArray);
    }
    else {
        // TEST INIT MESSAGE, ON REAL USE DELETE 
        alert("DocumenReadyFunction: KendoUiPanelBarSelectedIndex IS NULL");
    }
});

【讨论】：

这对我也有用。但是，我使用隐藏输入而不是使用 cookie，因为它满足了我的需求。

【解决方案3】：

您可以使用此块来处理所选内容。在这个例子中，我只是扩展面板项。您可以做其他事情，例如将面板项保存在您的 dom 中以供以后使用，或者可能将其保存在某处以供以后使用：

var panelBar =  $("#importCvPanelbar").data("kendoPanelBar");
                panelBar.bind("select", function(e) {
                var itemId = $(e.item)[0].id;

                panelBar.expand(itemId);// will expand the selected one
            });

【讨论】：