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

Question

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

它的工作正常.

我想在上下文菜单中创建一个客户项目.例如,创建一个新的菜单项.新的创建在上下文菜单中的新员工.并将员工插入DB.我使用jQuery POST函数来完成这项任务.但是如何处理中的click事件

上下文菜单项.

请帮忙

Answer 1

以下是您可以自定义contextmenu插件的方法:

$("#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处理程序中的基本函数:this.create(obj);,this.rename(obj);以及将被点击的节点this.remove(obj);在哪里obj.

所以现在例如,如果您想在添加新项目时向服务器发送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>

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

受此示例的启发,您可以继续使用文档中显示的remove.jstree和rename.jstree事件扩展它.因此,当您查看它时,所需要的只是阅读文档.例如,我从来没有在生活中使用过jsTree,但只需要5分钟就可以在文档中找到示例并为您快速执行.因此,下次您有关于某些插件或框架的编程相关问题时,请先花更多精力阅读文档.