jsTreeコンテキストメニューでカスタム項目を作成

Question

asp.net mvc3のコンテキストメニューでjsTreeを使用してツリービューを作成します。

<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"] 
     }); 
}); 

それが正常に動作しています。

私は、コンテキストメニューで、カスタマーのアイテムを作成します。たとえば、新しいメニュー項目を作成します。 コンテキストメニューで新しいEmployeeを作成するための新しい。従業員をDBに挿入します。このタスクにはjQuery POST関数を使用します。しかし、クリックイベントを処理する方法

コンテキストメニュー項目。

Answer 1

は、ここでは、コンテキストメニュープラグインをカスタマイズすることができる方法です助けてください：

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

さてさて、この例では、私が唯一のクリックハンドラ内の基底関数を呼び出しています：this.create(obj);、this.rename(obj);とthis.remove(obj);objをクリックされたノードになります。

だから今は、新しいアイテムが追加されたときにサーバーにAJAX要求を送信する場合jsTreeドキュメントのdemo pageに示すように、たとえばあなたがcreate.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> 

点検create.jstreeイベントコールバックに渡される引数は、eとdataです。それらには、AJAXリクエストとともに送信するために使用できる新しく作成されたノードに関する多くの有益な情報が含まれています。

この例では、remove.jstreeイベントとrename.jstreeイベントを使用して拡張を続けることができます。だからあなたがそれを見るとき、必要なのはドキュメンテーションを読むことだけでした。たとえば、私は人生でjsTreeを使ったことがありませんでしたが、5分でドキュメントの例を見つけ出し、あなたのために素早くスパイクを作りました。次回は、使用しているプラ​​グインやフレームワークに関するプログラミング関連の質問がありますので、最初にドキュメントを読むことにもっと努力してください。