Kendo Treeview Rozszerzanie dużego drzewa wydania

Question

Stworzyłem kontrolę drzewa przy użyciu drzewa TreeView.it kendo ma więcej niż 10 000 węzłów i użyłem false false przy tworzeniu drzewa. Udostępniam funkcję rozwijania drzewa według jego poziomu, dla tego stworzyłem metodę, która przyjmuje parametr "poziom" jako liczbę i rozwija go odpowiednio, a użytkownik może wprowadzić 15 (maksymalny poziom) do metody, działa dobrze z 500 do 600 węzłów dla wszystkich poziomów, ale gdy drzewo ma więcej niż 5000 węzłów, niż gdy użytkownik próbuje rozwinąć węzły powyżej poziomu 2, przeglądarka zawiesza się i pokazuje błąd braku odpowiedzi.

Metoda którą stworzyliśmy, aby rozwinąć drzewo jest: - powyżej

function ExapandByLevel(level, currentLevel) { 
    if (!currentLevel) { 
    currentLevel = 0; 
    } 
    if (level != currentLevel) { 
    var collapsedItems = $("#treeView").find(".k-plus:visible"); 
    if (collapsedItems.length > 0) { 
     setTimeout(function() { 
      currentLevel++; 

      var $tree = $("#treeView"); 
      var treeView = $tree.data("kendoTreeView"); 

      var collapsedItemsLength = collapsedItems.length; 
      for (var i = 0; i < collapsedItemsLength; i++) { 
       treeView.expand($(collapsedItems[i]).closest(".k-item")); 
      } 
      ExapandByLevel(level, currentLevel); 
     }, 100); 
    } 
    else { 
     //console.timeEnd("ExapandByLevel"); 
     hideLoading(); 
    } 
    } 
    if (level == currentLevel) { 

    hideLoading(); 
    } 
} 

wezwanie danej metody tak: -

ExapandByLevel(15); 

tutaj 15 jest poziom, aby rozwinąć w drzewie.

gdy drzewo ma więcej niż 5000 węzłów niż w przypadku, gdy użytkownik próbuje rozwinąć węzły powyżej poziomu 2, przeglądarka zawiesza się i pokazuje błąd braku odpowiedzi. proszę zasugerować jakikolwiek sposób to zrobić, co chcę, to rozwinąć drzewo, które może zawierać ponad 5000 węzłów.

Answer 1

Miałem podobny problem z TreeView Tree, gdy chciałem załadować drzewo z 30 000 węzłów. Przeglądarka mogłaby długo zawiesić ładowanie tej liczby węzłów, nawet jeśli ustawiono wartość true dla loadOnDemand.

Postanowiliśmy więc wdrożyć funkcjonalność po stronie serwera do rozbudowy węzłów, i to właśnie powinieneś zrobić. Musisz mieć 2 zmiany w istniejącym kodzie.

1. Zmień stronę serwera użycia drzewa Rozwiń metodę.
2. Podczas wywoływania rozwinięcia należy upewnić się, że węzeł jest rozwinięty.

Te dwa kroki zostaną wyjaśnione poniżej. Rzeczą, o której powinieneś wiedzieć, jest to, że twoja przeglądarka nie zawiesza się wcale, ale może minąć trochę czasu, zanim dokończymy operację, ponieważ będzie tyle połączeń z serwerem na serwerze.

1. Zmień swoje drzewo użyć po stronie serwera Rozwiń metody:
   proszę zobaczyć pokazy Kendo UI dla Wiązanie Remote Data w this link. Zauważ, że loadOnDemand należy ustawić na true. Dodatkowo powinna zostać zaimplementowana strona WWW Rozwiń usługę sieciową.

2. Po wywołaniu rozwijać, należy upewnić się, że węzeł jest rozwinięty:
   W tym celu, nie powinno być wydarzeniem jak Expanded określonym w Kendo UI TreeView, ale niestety nie ma nikogo, z wyjątkiem Expanding zdarzenie. Korzystanie z setTimeout w tym przypadku nie jest niezawodne, ponieważ sieć nie jest niezawodna. Tak więc zakończyliśmy używanie instrukcji while, aby sprawdzić, czy dzieci węzła są tworzone, czy nie. Może istnieć lepsze rozwiązanie tego problemu, jednak spełnia to nasze obecne wymagania.Oto zmiany należy dokonać przy rozbudowie węzły:

   if (collapsedItems.length > 0) { 
       currentLevel++; 
   
       var $tree = $("#treeView"); 
       var treeView = $tree.data("kendoTreeView"); 
   
       var collapsedItemsLength = collapsedItems.length; 
       for (var i = 0; i < collapsedItemsLength; i++) { 
        var node = $(collapsedItems[i]).closest(".k-item") 
        if (!node.hasChildren) 
         continue; // do not expand if the node does not have children 
        treeView.expand(node); 
        // wait until the node is expanded 
        while (!node.Children || node.Children.length == 0); 
       } 
       ExapandByLevel(level, currentLevel); 
   } 
   

Można także wykonać rozszerzenia połączeń w sposób równoległy, aby zmniejszyć czas ładowania, ale wtedy należy zmienić sposób sprawdzić, czy wszystkie węzły są rozszerzone lub nie. Właśnie napisałem tutaj przykładowy kod, który powinien działać poprawnie.

Mam nadzieję, że to pomoże.

Answer 2

Rozwiązanie problemu jest dość proste: zaktualizuj wersję interfejsu użytkownika Kendo, ponieważ używasz zoptymalizowanego (a loooooooooot) kodu dla HierarchicalDataSource i dla TreeView.

Sprawdź to: http://jsfiddle.net/OnaBai/GHdwR/135/

To jest Twój kod gdzie mam zmienić wersję kendoui.all.min.js do v2014.1.318. Nawet nie zmieniłem CSS (mimo, że powinieneś). Przekonasz się, że otwarcie tych 5000 węzłów jest dość szybkie.

Niemniej jednak, jeśli pójdziesz do 10000 elementów będzie najprawdopodobniej uznają to powolny, ale żal ci wyzwanie: czy naprawdę sądzisz, że 10.000 węzły drzewa jest przyjazny dla użytkownika? Czy drzewo jest właściwym sposobem prezentacji tak dużej ilości danych?