3

Kendo UI PanelBarを実装してみます（http://demos.kendoui.c​​om/web/panelbar/images.htmlを参照）。いくつかのアイテム（ゴルフ、水泳）を開き、次に[ビデオレコード]をクリックすると、アイテムが展開されます。しかし、ページを更新すると（リンクをクリックすると）、展開された構造がすべて失われます。

KendoUIフォーラムで、選択したアイテムの位置しか取得できないことがわかりました。ページをリロードした後、すべてのノードを計算する必要があります。どうすれば自分の状況でアイテムを拡張できますか？必要がなければ、htmlフレームは使いたくありません。

よろしく、ピーター

4

3 に答える 3

7

ご回答ありがとうございます、とても役に立ちました。ここに、選択した1つのアイテムを記憶するjQueryのスケルトンのコードを追加します。必須の追加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");
    }
});
于 2012-12-12T19:53:26.867 に答える
2

パネルのオープンはクライアントで行われます。ページが更新されると、ブラウザは提供されたマークアップをレンダリングします。これには、選択したパネルの追加のマークアップは含まれません。

これを実現するには、開いたパネルを示す値を何らかの方法で保存する必要があります。これを実現する最も簡単な方法は、Cookieを使用することです（JavaScriptで設定するか、サーバーに対してAJAX呼び出しを実行します）。

次に、panelBarがレンダリングされるときに、Cookieの値を使用して、選択したタブとして正しいタブを設定します。

于 2012-12-11T18:58:42.190 に答える
0

このブロックを使用して、選択したものを操作できます。この例では、パネルアイテムを展開しています。後で使用するためにパネルアイテムを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
            });
于 2017-01-09T12:36:13.977 に答える