web-dev-qa-db-ja.com

jsTreeのコンテキストメニューでカスタムアイテムを作成する

Asp.netmvc3の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"]
        });
});

それはうまくいきます。

Image

コンテキストメニューでカスタムアイテムを作成したい。たとえば、新しいメニュー項目を作成します。 新規コンテキストメニューで新しい従業員を作成します。従業員をDBに挿入します。このタスクにはjQuery POST関数を使用しますが、クリックイベントを処理する方法

コンテキストメニュー項目。

助けてください

asp.net-mvctreeviewjstree
12
Ragesh S

コンテキストメニュープラグインをカスタマイズする方法は次のとおりです。

$("#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);、およびthis.remove(obj);ここで、objはクリックされたノード。

したがって、たとえば、新しいアイテムが追加されたときにAJAXリクエストをサーバーに送信する場合は、 create.jstree のようにdemo pageイベントをサブスクライブできます。 jsTreeドキュメント：

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

create.jstreeイベントコールバックに渡されるeおよびdata引数を調べます。これらには、AJAXリクエストと一緒に送信するために使用できる、新しく作成されたノードに関する多くの有用な情報が含まれています。

この例に触発されて、ドキュメントに示されているように、remove.jstreeイベントとrename.jstreeイベントで拡張を続けることができます。したがって、それを見ると、必要なのはドキュメントを読むことだけでした。たとえば、私は人生でjsTreeを使用したことがありませんが、ドキュメントで例を見つけてすばやくスパイクするのに5分しかかかりませんでした。したがって、次に使用しているプラ​​グインまたはフレームワークについてプログラミング関連の質問がある場合は、最初にドキュメントを読むことにもっと力を入れてください。

24
Darin Dimitrov