在 jsTree 上下文菜單中創建自定義項

我在 asp.net mvc3 中使用帶有 contextmenu 的 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"]
       });
});

它工作正常。

我想在上下文菜單中創建一個自定義項。例如創建一個新的菜單項。New 用於在上下文菜單中創建新員工，並將員工插入 DB。我為這個任務使用了一個 jQuery POST 函式。但是如何處理上下文菜單項中的點擊事件。

以下是自定義上下文菜單外掛的方法：

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

好吧，在這個例子中，我只呼叫了 click handlers: 中的基本函式this.create(obj);，this.rename(obj);以及被點擊的節點this.remove(obj);在哪裡。obj

因此，例如，如果您想在添加新項目時向伺服器發送 AJAX 請求，您可以訂閱該create.jstree事件，如demo pagejsTree 文件中所示：

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

檢查傳遞給事件回調的e和參數。它們包含有關新創建節點的大量有用資訊，您可以使用這些資訊與 AJAX 請求一起發送。data``create.jstree

受此範例的啟發，您可以繼續使用文件中所示的remove.jstree和事件對其進行擴展。rename.jstree因此，當您查看它時，只需閱讀文件即可。例如，我一生中從未使用過 jsTree，但我只用了 5 分鐘就在文件中找到了範例並為您做一個快速的秒殺。因此，下次當您對正在使用的某些外掛或框架有程式相關問題時，請先花更多精力閱讀文件。

引用自：https://stackoverflow.com/questions/14133984