2012-05-07 56 views
3

我們正在使用jsTree(自09/02/2011修訂版236)。jsTree上下文菜單選擇的項目?

有誰知道是否有任何方法可以訪問與「動作」相關的功能中選擇的菜單項名稱?

我想自動定義菜單項,以便每個「動作」的功能都是基於上下文菜單中項目的標識符設置的。

例如,對於有三個動作( 「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; 

...

我希望上下文菜單已經清楚地描述了我的問題。

在此先感謝。

回答

0

通過在原始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   
        .... 
       } 
       .... 
      } 
      .... 
     } 

謝謝!

3

我正在使用jsTree 3.0.2,並且此修補程序對我無效。

「i」參數已經包含在發送到「action」函數的結果中,但它僅包含關於點擊上下文菜單的詳細信息,而不是綁定到該jsTree分支的JSON項目。

enter image description here

爲了得到這是右鍵單擊該項目的ID,這裏就是我所做的。

我的樹中的一些分支是文件夾,有些是報告(用戶可以運行),所以我需要能夠調整我的jsTree上下文菜單,具體取決於用戶右鍵單擊的節點類型對於報告,我需要獲取所選記錄的ID。

enter image description here

首先,我寫了一個小getCustomMenu函數來獲取特定jsTree分支的上下文菜單項,所以,我定義見下文我jstree

$('#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功能是這樣的:

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功能會打電話給我RunReport功能與選定的報告ID 。

enter image description here

的關鍵,這是這樣一種專門填充此樹的JSON數據到jsTree的li_attr屬性增加了一個ReportID屬性。

enter image description here

因爲我們getCustomMenu調用動作功能(「RunReport」,在這個例子中),我們可以適應它額外的參數傳遞給這個函數。

Phew。

希望這一切都有助於(和有意義!)

1

有很多簡單的解決方案,需要在jstree的源代碼沒有修改。我用jstree 3.3.1測試了這種方法。

docs(重點煤礦):

一旦菜單項被激活時,操作功能將用含有下列鍵的對象被調用:項 - 所見下面的文本菜單項定義,參考 - 已使用的DOM節點(樹節點),元素 - 上下文菜單DOM元素,位置 - 具有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) 
}