kendo-ui - KendoUI PanelBar 记住扩展项

Question

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

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

最好的问候，彼得

Answer 1

谢谢你的回答，很有用。我在这里添加了 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");
    }
});

Answer 2

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

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

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

Answer 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
            });