jsTree上下文菜单选择的项目? [英] jsTree Context Menu selected item?

查看:158
本文介绍了jsTree上下文菜单选择的项目?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我们正在使用jsTree(2011年2月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;

...

我希望能清楚地描述我的问题.

谢谢.

解决方案

我正在使用jsTree 3.0.2,但此修复程序不适用于我.

发送到"action"函数的结果中已经包含了"i"参数,但是它只包含有关单击的上下文菜单的详细信息,而不是绑定到该jsTree分支的JSON项. /p>

要获取右键单击的商品的ID,这就是我所做的.

我树中的某些分支是文件夹,一些是报告(用户可以运行),因此我需要能够适应我的jsTree上下文菜单,具体取决于用户右键单击的节点类型,对于报告,我需要获取所选记录的ID.

首先,我编写了一个小的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函数将使用所选报告的ID调用我的RunReport函数.

关键在于,填充此树的JSON数据会在jsTree的li_attr属性中专门添加一个ReportID属性.

由于我们的getCustomMenu调用了动作函数(在此示例中为"RunReport"),因此我们可以对其进行调整以向该函数传递额外的参数.

Ph.

希望所有这些都会有帮助(而且很有道理!)

We're working with jsTree (revision 236 from 09/02/2011).

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

I want to automate the definition of menu items, so that the functionality of the "action" for each are set based on the identifier of the item in the contextual 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 to have described my problem clearly.

Thanks in advance.

解决方案

I'm using jsTree 3.0.2, and this fix didn't work for me.

The "i" parameter is already included in the results sent to the "action" function, but it just contains details about the Context Menu which was clicked on, rather than the JSON item which was binded to that jsTree branch.

To get the id of the item which was right-clicked on, here's what I did.

Some of the branches in my tree are folders, and some are reports (which the user can run), so I needed to be able to adapt my jsTree context menu, depending on which type of node the user right-clicked on, and for reports, I needed to fetch the ID of the record which was selected.

First, I wrote a small getCustomMenu function to fetch the context menu items for a particular jsTree branch, so, I defined my jstree as below.

$('#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    
   }, 
})

And my getCustomMenu function looked like this:

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

When the user right-clicks on a Report in my jstree, the getCustomMenu function will call my RunReport function with the ID of the selected report.

The key to this is that the JSON data which populates this tree specifically adds a ReportID attribute in to the jsTree's li_attr attribute.

Because our getCustomMenu calls the action function ("RunReport", in this example), we can adapt it to pass extra parameters to this function.

Phew.

Hope all this helps (and makes sense !)

这篇关于jsTree上下文菜单选择的项目?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆