asp.net-mvc 在 jsTree 上下文菜单中创建自定义项

Create custom item in jsTree Context menu

提问by Ragesh S

I create a treeview using jsTree with contextmenu in asp.net mvc3.

我在asp.net mvc3 中使用带有上下文菜单的jsTree 创建了一个树视图。

<div id="divtree">
<ul id="tree">
    <li><a href="#" class="usr">@Model.Name</a>
        @Html.Partial("Childrens", Model)
    </li>
</ul>

<script type="text/javascript">
$(function () {
    $("#divtree").jstree(
        {
            "plugins": ["themes", "html_data", "ui", "crrm", "contextmenu"]
        });
});

it's works fine.

它工作正常。

I want to create a custome item in the context menu. for example create a new menu item. Newfor create new Employee in the context menu. and insert the employee in DB. I use a jQuery POST function for this task. But how to handle the click event in the

我想在上下文菜单中创建一个客户项目。例如创建一个新的菜单项。新建用于在上下文菜单中创建新员工。并将员工插入数据库。我为此任务使用了 jQuery POST 函数。但是如何处理点击事件中的

Context menu item.

上下文菜单项。

Please help

请帮忙

回答by Darin Dimitrov

Here's how you could customize the contextmenu plugin:

以下是自定义上下文菜单插件的方法：

$("#divtree").jstree({
    "plugins": ["themes", "html_data", "ui", "crrm", "contextmenu"],
    "contextmenu": {
        "items": function ($node) {
            return {
                "Create": {
                    "label": "Create a new employee",
                    "action": function (obj) {
                        this.create(obj);
                    }
                },
                "Rename": {
                    "label": "Rename an employee",
                    "action": function (obj) {
                        this.rename(obj);
                    }
                },
                "Delete": {
                    "label": "Delete an employee",
                    "action": function (obj) {
                        this.remove(obj);
                    }
                }
            };
        }
    }
});

Alright, in this example I am only calling the base function inside the click handlers: this.create(obj);, this.rename(obj);and this.remove(obj);where objwill be the node that was clicked.

好的，在这个例子中，我只调用 click handlers: 中的基本函数this.create(obj);，this.rename(obj);以及被点击的节点this.remove(obj);在哪里obj。

So now for example if you want to send an AJAX request to the server when a new item is added you could subscribe to the create.jstreeevent as shown in the demo pageof the jsTree documentation:

因此，现在例如，如果您想在添加新项目时向服务器发送 AJAX 请求，您可以订阅该create.jstree事件，如demo pagejsTree 文档中所示：

<script type="text/javascript">
    $("#divtree").jstree({
        "plugins": ["themes", "html_data", "ui", "crrm", "contextmenu"],
        "contextmenu": {
            "items": function ($node) {
                return {
                    "Create": {
                        "label": "Create a new employee",
                        "action": function (obj) {
                            this.create(obj);
                        }
                    },
                    "Rename": {
                        "label": "Rename an employee",
                        "action": function (obj) {
                            this.rename(obj);
                        }
                    },
                    "Delete": {
                        "label": "Delete an employee",
                        "action": function (obj) {
                            this.remove(obj);
                        }
                    }
                };
            }
        }
    })
    .bind("create.jstree", function (e, data) {
        $.ajax({
            url: "@Url.Action("create", "employees")", 
            type: 'POST',
            data: {
                "name" : data.rslt.name
            },
            success: function (result) {
            }
        });
    });
</script>

Inspect the eand dataarguments that are passed to the create.jstreeevent callback. They contain lots of useful information about the newly created node that you could use to send along with the AJAX request.

检查传递给事件回调的e和data参数create.jstree。它们包含许多关于新创建的节点的有用信息，您可以使用这些信息与 AJAX 请求一起发送。

Inspired by this example you could continue extending it with the remove.jstreeand rename.jstreeevents as shown in the documentation. So when you look at it, all that was needed was to read the documentation. For example I've never used jsTree in my life but 5 minutes was all that it took me to find the example in the documentation and do a quick spike for you. So next time you have a programming related question about some plugin or framework that you are using please put more efforts into reading the documentation first.

受此示例的启发，您可以继续使用remove.jstree和rename.jstree事件对其进行扩展，如文档中所示。因此，当您查看它时，所需要的只是阅读文档。例如，我一生中从未使用过 jsTree，但我只用了 5 分钟就在文档中找到了示例并为您快速完成了一次测试。因此，下次您遇到有关您正在使用的某个插件或框架的编程相关问题时，请先花更多精力阅读文档。