Question

我尝试实施Kendo UI PanelBar（参见http://demos.kendoui.com/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
            });

KendoUI PanelBar记住扩展项目

3 个答案: