Utwórz niestandardowy element w jsTree Menu kontekstowe

Question

Tworzę widok drzewa używając jsTree z menu kontekstowym w asp.net mvc3.

<div id="divtree"> 
<ul id="tree"> 
    <li><a href="#" class="usr">@Model.Name</a> 
     @Html.Partial("Childrens", Model) 
    </li> 
</ul> 

<script type="text/javascript"> 
$(function() { 
    $("#divtree").jstree(
     { 
      "plugins": ["themes", "html_data", "ui", "crrm", "contextmenu"] 
     }); 
}); 

to działa dobrze.

Chcę utworzyć element custome w menu kontekstowym. na przykład utwórz nowy element menu. Nowe do utworzenia nowego pracownika w menu kontekstowym. i wstaw pracownika do DB. Używam funkcji POST jQuery dla tego zadania. Ale jak obsługiwać zdarzenie kliknięcia w elemencie menu kontekstowego.

Proszę o pomoc

Answer 1

Oto jak można dostosować wtyczki contextMenu:

$("#divtree").jstree({ 
    "plugins": ["themes", "html_data", "ui", "crrm", "contextmenu"], 
    "contextmenu": { 
     "items": function ($node) { 
      return { 
       "Create": { 
        "label": "Create a new employee", 
        "action": function (obj) { 
         this.create(obj); 
        } 
       }, 
       "Rename": { 
        "label": "Rename an employee", 
        "action": function (obj) { 
         this.rename(obj); 
        } 
       }, 
       "Delete": { 
        "label": "Delete an employee", 
        "action": function (obj) { 
         this.remove(obj); 
        } 
       } 
      }; 
     } 
    } 
}); 

porządku, w tym przykładzie mam tylko wywołanie funkcji bazowej wewnątrz ładowarki kliknij: this.create(obj);, this.rename(obj); i this.remove(obj); gdzie obj będzie węzłem, który został kliknięty.

Więc teraz na przykład, jeśli chcesz wysłać żądania AJAX do serwera, gdy nowy element jest dodawany można zapisać się do wydarzenia create.jstree jak pokazano na demo page dokumentacji jsTree:

<script type="text/javascript"> 
    $("#divtree").jstree({ 
     "plugins": ["themes", "html_data", "ui", "crrm", "contextmenu"], 
     "contextmenu": { 
      "items": function ($node) { 
       return { 
        "Create": { 
         "label": "Create a new employee", 
         "action": function (obj) { 
          this.create(obj); 
         } 
        }, 
        "Rename": { 
         "label": "Rename an employee", 
         "action": function (obj) { 
          this.rename(obj); 
         } 
        }, 
        "Delete": { 
         "label": "Delete an employee", 
         "action": function (obj) { 
          this.remove(obj); 
         } 
        } 
       }; 
      } 
     } 
    }) 
    .bind("create.jstree", function (e, data) { 
     $.ajax({ 
      url: "@Url.Action("create", "employees")", 
      type: 'POST', 
      data: { 
       "name" : data.rslt.name 
      }, 
      success: function (result) { 
      } 
     }); 
    }); 
</script> 

skontrolować argumenty, które są przekazywane do wywołania zwrotnego zdarzenia e i data. Zawierają wiele użytecznych informacji o nowo utworzonym węźle, które można wykorzystać do wysłania wraz z żądaniem AJAX.

Zainspirowany tym przykładem, można kontynuować rozszerzanie go o zdarzenia remove.jstree i rename.jstree, jak pokazano w dokumentacji. Więc kiedy na to patrzysz, wszystko, co było potrzebne, to przeczytać dokumentację. Na przykład nigdy nie używałem jsTree w moim życiu, ale 5 minut zajęło mi znalezienie przykładu w dokumentacji i wykonanie szybkiego skoku dla ciebie. Następnym razem, gdy masz pytanie związane z programowaniem na temat jakiejś wtyczki lub frameworka, z którego korzystasz, proszę najpierw włożyć więcej wysiłku w czytanie dokumentacji.