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

Question

我在 asp.net mvc3 中使用带有 contextmenu 的 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"]
        });
});

它工作正常。

我想在上下文菜单中创建一个自定义项。例如创建一个新的菜单项。New 用于在上下文菜单中创建新员工，并将员工插入 DB。我为这个任务使用了一个 jQuery POST 函数。但是如何处理上下文菜单项中的点击事件。

Answer 1

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

$("#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);
                    }
                }
            };
        }
    }
});

好吧，在这个例子中，我只调用了 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.jstree event as shown in the demo page of the jsTree documentation:

<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 e and data arguments that are passed to the create.jstree event callback. They contain lots of useful information about the newly created node that you could use to send along with the AJAX request.

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