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