渲染部分視圖正在TabStrip上書寫

Question

為什么這會覆蓋TabStrip並將部分視圖放在TabStrip的頂部，而不是將其放在其中一個選項卡中？ 我正在嘗試從樹視圖中獲取選定的項目，並能夠在選項卡中查看局部視圖，並使其隨着樹視圖上的選擇更改而更新。 它可以正確呈現listview並正確過濾，但是現在整個選項卡控件都被listview覆蓋！！！！

<script>
    var treeview;
    $(document).ready(function () {
        treeview = $("#treeview").data("kendoTreeView");
    });
    function select(e) {

        var selectedbook = $(e.node).data("bookid");

        var tabstrip =
        $.get('@Url.Action("Index", "ListView")',
            { id: selectedbook }, function (data) {
                $("#ContactsTabStrip").html(data);
            });
    }
</script>

我不得不打一個ajax電話！

Answer 1

盡管您沒有從結果中說出#ContactsTabStrip是什么，但我猜它是Tab的標識符，而不是主體的標識符。

無論如何，您無需為其命名，只需從select處理程序中接收到的事件參數中獲取它即可。 像這樣：

function select(e) {
    var selectedbook = $(e.node).data("bookid");

    // Get a reference to the content from the event
    var content = e.contentElement;

    $.get('@Url.Action("Index", "ListView")', { id: selectedbook }, function (data) {
        // Set data
        item.html(data);
    });
}

編輯：如果要更改選項卡的內容與所選內容不同，那么首先要找到該選項卡的索引，然后使用contentElement來訪問元素。

function select(e) {
    var selectedbook = $(e.node).data("bookid");

    $.get('@Url.Action("Index", "ListView")', { id: selectedbook }, function (data) {
        // Get a reference to the tabStrip
        var tabStrip = $("#tabStrip").data("kendoTabStrip");
        // Find the index of the element to be changed
        var idx = tabStrip.tabGroup.find("#ContactsTabStrip").index();
        // Use contentElement function for changing the content
        $(tabStrip.contentElement(idx)).html(data);
    });
}