在 jsTree 上下文菜单中创建自定义项目

我在 asp.net mvc3 中使用 jsTree 和 contextmenu 创建一个树视图。

<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"]
        });
});

效果很好。

我想在上下文菜单中创建一个自定义项目。例如创建一个新的菜单项。新建用于在上下文菜单中创建新员工，并将员工插入数据库中。我使用 jQuery POST 函数来完成此任务。但是如何处理上下文菜单项中的单击事件。

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

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

好吧，在这个例子中，我只调用点击处理程序中的基本函数：this.create(obj);, this.rename(obj); and this.remove(obj); where obj将是被单击的节点。

现在，例如，如果您想在添加新项目时向服务器发送 AJAX 请求，您可以订阅create.jstree事件如图所示demo page http://www.jstree.com/demojsTree 文档的：

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

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

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