記得在頁面導航之間擴展的節點

Question

在我的Asp.NET MVC 4應用程序中，第1頁有一個Kendo樹形視圖。在頁面1上，用戶可以點擊一個節點X並且儘可能深地擴展它的後代節點。然後他點擊節點X，然後從那裏進入第2頁;他爲節點X做了一些工作。接下來，從第2頁開始，用戶可以回到第1頁。我希望一旦用戶回到頁面1，頁面1應該能夠顯示相同的擴展&摺疊狀態節點X和其他節點。請指教。謝謝。

詳細說明：

第1頁，在節點X的用戶點擊和擴大其後代節點，如：

• 樹根
  
  • 節點A
  • 節點B
  • X節點
    • 節點X.1
      • 節點X.1.1
      • 節點X.1.2
    • 節點X.2
    • 節點X.3
      • 節點X.3.1
  • 節點Y
  • 節點Z
    • 節點Z.1
    • 節點Z.2

那麼節點X用戶點擊並進入到第2頁和做一些工作。然後，他點擊一個按鈕或鏈接回到第1頁。一旦他再次登錄頁面1，我希望treeview widget應該能夠顯示上面提到的節點。

Answer 1

嗯，有一堆問題要解決：

1：如何頁之間維持狀態，重新加載

一些選擇：cookies，session/local storage，將其保存到服務器（例如，通過發送一個Ajax請求到服務器）

2：如何知道一個TreeView哪些節點擴展

像this的東西應該工作：

var expandedNodes = $("#treeview").find(".k-item").filter(function() { 
    return $(this).attr("data-expanded") === "true"; 
}); 

3：如何序列擴展節點列表，以便它可以恢復

這真的取決於你如何創建你的treeview：你有一個數據源這樣每個節點都有一個唯一的ID？你是否從html結構創建樹形視圖（<ul></ul>）？每個節點是否有唯一的文本或可以重複嗎？

假設每個節點都有唯一的文本，您可以簡單地序列化每個擴展節點的文本，例如，以這種形式（與管道字符作爲分隔符）：

// note that you'd need to do this sorted by the node's nesting level, 
// i.e. first level nodes need to come first, then second level etc, 
// so you can expand in the same order 
var serialized = "text1|text2|text3"; // store this using cookies or w/e 

一個簡單的實現（這可能是不夠的你的情況）：

$(expandedNodes).each(function() { 
    serialized += tree.text(this) + "|"; 
}); 

然後..

4：如何反序列化擴展節點並相應地擴展樹視圖

你可以這樣做來恢復它：

// load serialized from wherever you stored it, then .. 
var deserialized = serialized.split("|"); 
$(deserialized).each(function() { 
    var node = tree.findByText(this); 

    tree.expand(node); 
}); 

JSFiddle demo