Crea elemento personalizzato in jsTree Menu contestuale

Question

Creo una vista ad albero utilizzando jsTree con il menu di scelta rapida in 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"] 
     }); 
}); 

è funziona bene.

voglio creare un elemento custome nel menu contestuale. per esempio crea una nuova voce di menu. Nuovo per creare un nuovo Impiegato nel menu di scelta rapida. e inserire il dipendente in DB. Io uso una funzione POST jQuery per questa attività. Ma come gestire l'evento click nel

Voce di menu contestuale.

Si prega di aiutare

Answer 1

Ecco come si potrebbe personalizzare il plugin 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); 
        } 
       } 
      }; 
     } 
    } 
}); 

Bene, in questo esempio sto chiamando solo la funzione di base all'interno dei gestori di clic: this.create(obj);, this.rename(obj); e this.remove(obj); dove obj sarà il nodo su cui è stato fatto clic.

Così ora, per esempio, se si desidera inviare una richiesta AJAX al server quando un nuovo elemento si aggiunge si potrebbe sottoscrivere l'evento create.jstree come mostrato nella demo page della documentazione 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> 

Ispezionare gli argomenti e e data passati al callback dell'evento create.jstree. Contengono molte informazioni utili sul nuovo nodo creato che è possibile utilizzare per inviare insieme alla richiesta AJAX.

Ispirato da questo esempio, è possibile continuare ad estenderlo con gli eventi remove.jstree e rename.jstree come mostrato nella documentazione. Quindi, quando lo guardi, tutto ciò che serviva era leggere la documentazione. Ad esempio, non ho mai usato jsTree nella mia vita, ma 5 minuti sono stati sufficienti per trovare l'esempio nella documentazione e fare un rapido picco per te. Quindi la prossima volta che hai una domanda relativa alla programmazione di alcuni plugin o framework che stai usando, per favore dedica più sforzi alla lettura della documentazione.