jsTree Bağlam menüsünde özel öğe oluştur

Question

Asp.net mvc3'te contextmenu ile jsTree kullanarak bir ağaç görünümü oluşturuyorum.

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

öyle

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

çalışıyor.

Ben bağlam menüsünde bir custome öğesi oluşturmak istiyorum. örneğin yeni bir menü öğesi oluşturun. İçerik menüsünde yeni Çalışan yaratmak için Yeni. ve çalışanı DB'ye ekleyin. Bu görev için jQuery POST işlevi kullanıyorum. Ancak, click olayı,

Bağlam menü öğesinde nasıl ele alınır.

Eğer contextmenu eklentisi özelleştirmek nasıl İşte

Answer 1

oluyor yardım edin:

$("#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); 
        } 
       } 
      }; 
     } 
    } 
}); 

Tamam, bu örnekte sadece tıklama işleyicileri iç taban işlevini sesleniyorum: this.create(obj);, this.rename(obj); ve this.remove(obj);obj tıklanan düğüm olacak.

Yani şimdi örneğin yeni bir öğe jsTree belgelerin demo page gösterildiği gibi create.jstree olaya abone olabilir eklendiğinde sunucuya bir AJAX isteği göndermek istiyorsanız:

<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> 

inceleyin e ve data argümanları, create.jstree olay geri çağrısına iletilir. AJAX isteğiyle birlikte göndermek için kullanabileceğiniz yeni oluşturulan düğüm hakkında birçok yararlı bilgi içerir.

Bu örnekten ilham alarak, belgelerde gösterildiği gibi remove.jstree ve rename.jstree olaylarıyla genişletmeye devam edebilirsiniz. Yani baktığınız zaman, gereken her şey belgeleri okumaktı. Örneğin, hayatımda hiç jsTree kullanmamıştım ama 5 dakika, belgede örneği bulmak ve sizin için hızlı bir başa çıkmamı sağladı. Bir dahaki sefere, kullandığınız bazı eklenti veya çerçeve ile ilgili programlama ile ilgili bir sorunuz varsa, lütfen önce belgeleri okumak için daha fazla çaba sarf edin.