Подтвердить что ты не робот

Создание настраиваемого элемента в контекстном меню jsTree

Я создаю древовидное представление, используя jsTree с contextmenu в asp.net mvc3.

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

он отлично работает.

Я хочу создать элемент custome в контекстном меню. например, создать новый пункт меню. Новый для создания нового сотрудника в контекстном меню. и вставьте сотрудника в БД. Я использую функцию JQuery POST для этой задачи. Но как обрабатывать событие click в

Элемент контекстного меню.

Пожалуйста, помогите

Ответ 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);
                    }
                }
            };
        }
    }
});

Хорошо, в этом примере я вызываю только базовую функцию внутри обработчиков кликов: this.create(obj);, this.rename(obj); и this.remove(obj);, где obj будет нажата node.

Итак, теперь, например, если вы хотите отправить запрос 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>

Осмотреть аргументы e и data, которые передаются в обратный вызов события create.jstree. Они содержат много полезной информации о недавно созданном node, который вы могли бы использовать для отправки вместе с запросом AJAX.

Вдохновленный этим примером, вы можете продолжить его с помощью событий remove.jstree и rename.jstree, как показано в документации. Поэтому, когда вы смотрите на это, все, что нужно было, - это прочитать документацию. Например, я никогда не использовал jsTree в своей жизни, но всего за 5 минут мне потребовалось найти пример в документации и сделать быстрый всплеск для вас. Поэтому в следующий раз, когда у вас возникнет связанный с программированием вопрос о некоторых плагинах или фреймворках, которые вы используете, приложите больше усилий для чтения документации.