Вопрос по – Контекстное меню jsTree выбрал пункт?

3

Мы работаем с jsTree (редакция 236 от 09.02.2011).

Кто-нибудь знает, есть ли какой-нибудь способ доступа к имени пункта меню, выбранного в функции, связанной с & quot; действием & quot ;?

Я хочу автоматизировать определение пунктов меню, чтобы функциональность & quot; action & quot; для каждого из них устанавливаются на основе идентификатора пункта в контекстном меню.

Например, для контекстного меню с тремя действиями («A», «B» или «C»)

<code>...
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;
</code>

...

Я надеюсь, что описал мою проблему четко.

Заранее спасибо.

Ваш Ответ

3   ответа
3

Я использую jsTree 3.0.2, и это исправление не сработало для меня.

«Я» параметр уже включен в результаты, отправленные в «действие» функция, но она просто содержит подробности о контекстном меню, по которому щелкнули, а не элемент JSON, который был привязан к этой ветви jsTree.

enter image description here

Чтобы получить идентификатор элемента, на который щелкнули правой кнопкой мыши, вот что я сделал.

Некоторые ветви моего дерева являются папками, а некоторые - отчетами (которые может запускать пользователь), поэтому мне нужно было иметь возможность адаптировать свое контекстное меню jsTree в зависимости от типа узла, на котором пользователь щелкнул правой кнопкой мыши, и для отчеты, мне нужно было получить идентификатор записи, которая была выбрана.

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 приписать jsTreeli_attr приписывать.

enter image description here

Потому что нашgetCustomMenu вызывает функцию действия (в данном примере & quot; RunReport & quot ;, мы можем адаптировать ее для передачи дополнительных параметров этой функции.

Уф.

Надеюсь, что все это помогает (и имеет смысл!)

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

Спасибо!

1

Существует гораздо более простое решение, которое не требует изменений в исходном коде jstree. Я проверил этот подход сjstree 3.3.1.

Отдокументы (выделение мое):

Once a menu item is activated the action function will be invoked with an object containing the following keys: item - the contextmenu item definition as seen below, reference - the DOM node that was used (the tree node), element - the contextmenu DOM element, position - an object with x/y properties indicating the position of the menu.

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

Похожие вопросы