Geek asks and answers

Selected jsTree context menu item?

We work with jsTree (revision 236 dated 09/02/2011).

Does anyone know if there is a way to access the name of the menu item selected in the function associated with the "action"?

I want to automate the definition of menu items, so the functionality of the “action” for each of them is set based on the identifier of the item in the context menu.

For example, for a context menu with three actions ("A", "B" or "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;

...

I hope that I have clearly described my problem.

Thanks in advance.

+3
source share
3 answers

I am using jsTree 3.0.2 and this fix does not work for me.

"i" , "", , , JSON, jsTree.

enter image description here

, , .

- , - ( ), jsTree, , node , .

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 .

enter image description here

, JSON, , ReportID jsTree li_attr.

enter image description here

getCustomMenu ( "RunReport", ), .

.

, ( !)

+3

, jstree. jstree 3.3.1.

docs ( ):

, , , : item - , , - DOM node, ( node), - DOM , - x/y, .

item - . , . _class. , .

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)
}
+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        
                    ....
                }
                ....
            }
            ....
        }

!

0

More articles:


All Articles