jsTree 컨텍스트 메뉴에서 사용자 정의 항목 만들기

Question

asp.net mvc3의 컨텍스트 메뉴와 함께 jsTree를 사용하여 트리 뷰를 만듭니다.

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

그것의

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

잘 작동합니다.

나는 상황에 맞는 메뉴에 손님 항목을 만들려고합니다. 예를 들어 새 메뉴 항목을 만듭니다. 상황에 맞는 메뉴에서 새 Employee를 만들려면 새로을 입력하십시오. DB에 직원을 삽입하십시오. 나는이 작업을 위해 jQuery POST 함수를 사용한다. 에서 클릭 이벤트를 처리하는 방법

상황에 맞는 메뉴 항목입니다.

당신의 ContextMenu 플러그인을 사용자 정의 할 수있는 방법은 다음과

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을 클릭 된 노드가됩니다.

이제 예를 들어, 당신은 새로운 항목이 jsTree 문서의 demo page에서와 같이이 create.jstree 이벤트를 구독 할 수 있습니다 추가 될 때 서버에 AJAX 요청을 보내려면 :

<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 분이 걸렸습니다. 다음 번에 당신이 사용하고있는 플러그인이나 프레임 워크에 대한 프로그래밍 관련 질문이 있으면 먼저 문서를 읽는 데 더 많은 노력을 기울이십시오.