jsTree 컨텍스트 메뉴 선택한 항목?

Question

jsTree (2011 년 9 월 2 일 수정 236)와 협력 중입니다.

"동작"과 연결된 기능에서 선택한 메뉴 항목 이름에 액세스 할 수있는 방법이 있는지 알고 있습니까?

메뉴 항목의 정의를 자동화하여 각각에 대한 "동작"의 기능이 상황 별 메뉴의 항목 식별자를 기반으로 설정되도록하고 싶습니다. 분명히 내 문제를 기술 한 세 가지 행동 ("A", "B"또는 "C")

... 
var items = {};    
for(var i=0; i < preconfiguredItemsData.length; i++) 
{ 
    var item = preconfiguredItemsData[i]; 

    items[item.name] = { 
     "label": item.title, 
     "action": function (liNode) { 
      control = eval("new " + **SELECTED ITEM IDENTIFIER ?** + "()"); 
        // **new A(), new B() or new C()** depending on the selected 
        // item on the context menu. 
        // I have the identifier of the jsTree node but ... how 
        // can I get the item id ("A", "B" or "C")? 
      control.execute(); 
     },    
     "_class": "class", 
     "separator_before": false, 
     "separator_after": true, 
     "icon": false, 
     "submenu": {} 
    }; 
    ... 
} //for 

items.create = false; 
items.rename = false; 
items.remove = false, 
items.edit = false; 
items.ccp = false; 

... 나는 희망

와 상황에 맞는 메뉴에 대한 예를 들어

. 사전에

감사합니다.

Answer 1

원본 jquery.jstree.js의 함수 호출에서 함수 이름을 매개 변수로 추가하여 해결되었습니다.

(function ($) { 
    $.vakata.context = { 
      ..... 
      exec : function (i) { 
       .... 
       if($.isFunction($.vakata.context.func[i])) { 
        .... 
        $.vakata.context.func[i].call($.vakata.context.data, $.vakata.context.par, i); //Param 'i' added   
        .... 
       } 
       .... 
      } 
      .... 
     } 

고마워요!

Answer 2

jsTree 3.0.2를 사용하고 있으며이 수정 프로그램이 제대로 작동하지 않았습니다.

"i"매개 변수는 "action"함수에 전송 된 결과에 이미 포함되어 있지만 jsTree 분기에 바인드 된 JSON 항목보다는 클릭 한 컨텍스트 메뉴에 대한 세부 정보 만 포함합니다.

을 마우스 오른쪽 버튼으로 클릭에 있던 항목의 ID를 얻으려면, 여기에 내가 무슨 짓을했는지.

내 트리의 가지 중 일부는 폴더이고 일부는 사용자가 실행할 수있는 보고서이기 때문에 사용자가 마우스 오른쪽 단추를 클릭 한 노드 유형에 따라 jsTree 컨텍스트 메뉴를 조정할 수 있어야했습니다. on이고 보고서의 경우 선택한 레코드의 ID를 가져와야했습니다.

첫째, 나는 다음과 같이 내 jstree 정의, 특정 jsTree 지점의 컨텍스트 메뉴 항목을 가져 오기 위해 작은 getCustomMenu 기능을 썼다, 그래서.

function getCustomMenu(node) { 

    var thisReportID = node.li_attr.ReportID; 

    var items = { 
     Run: { 
     "separator_before": false, 
     "separator_after": true, 
     "label": "Run this report", 
     "icon": "/Images/Icons/Go.png", 
     "action": function (node, reportID) { 
      // Call a function to run a report, with a particular Report ID 
      RunReport(node, thisReportID); 
     } 
     }, 
     Refresh: { 
     "separator_before": false, 
     "separator_after": false, 
     "label": "Refresh", 
     "icon": "/Images/Icons/Refresh.png", 
     "action": function (node, reportID) { 
      // Call a refresh function, with a particular Report ID 
      RefreshReport(node, thisReportID); 
     } 
    }; 

    // If this is a jsTree node for a Folder (rather than a Report) then 
    // just show the "Refresh" ContextMenu item 
    if (node.li_attr.ReportID == null) 
    { 
     delete items.Run; 
    } 

    return items; 
} 

가 언제 jstree에서 보고서에 사용자가 마우스 오른쪽 클릭의 getCustomMenu 기능은 선택된 보고서의 ID로 내 RunReport 함수를 호출합니다 :

$('#divReportsTree').jstree({ 
    "core": { 
     'data': JSON.Results.core.data 
    }, 
    "plugins": ["contextmenu"], 
    "contextmenu" : { 
     // Call a function, to fetch the CustomMenu for this particular jsTree branch 
     items: getCustomMenu  
    }, 
}) 

그리고 내 getCustomMenu 기능이처럼 보였다 .

이것의 핵심은 구체적으로 이러한 트리를 채우는 JSON 데이터가 jsTree의 li_attr 특성에의 ReportID 속성을 추가한다는 것이다.

우리 getCustomMenu 액션 기능 ("RunReport는"이 예에서)를 호출하기 때문에, 우리는이 기능에 추가 매개 변수를 전달하는 데 적용 할 수 있습니다.

피.

희망이 모든 도움 (그리고 의미가 있습니다!)

Answer 3

jstree의 소스 코드에는 수정이 필요하지 않습니다 훨씬 간단한 해결책이있다. 이 접근법을 jstree 3.3.1으로 테스트했습니다. docs (강조 내)에서

:

메뉴 항목 작업 함수가 다음 키를 포함하는 객체를 호출한다 활성화되면 : 아이템 - 아래와 같이의 ContextMenu 아이템 정의를 reference - 사용 된 DOM 노드 (트리 노드), element - contextmenu DOM 요소, position - 메뉴의 위치를 ​​나타내는 x/y 속성을 가진 객체.

item 속성은 컨텍스트 메뉴 항목의 전체 정의입니다. 즉, 객체에 어떤 속성이든 첨부 할 수 있으며 나중에 해당 값을 검색 할 수 있습니다. 질문 예에서는 _class 속성 일 수 있습니다. OP가이 방법을 시도했는지 여부는 확실하지 않습니다.

var items = { 
    item1: { 
    label: 'a label', 
    icon: 'fa fa-font-awesome', 
    separator_after: true, 
    disabled: false, 
    action: lang.hitch(this, 'doSomething'), 
    _name: 'item1' 
    } 
} 

그런 _name는 item 속성에 전달됩니다.

doSomething: function (obj) { 
    console.log(obj.item._name) 
}