Переименование узла из jsTree внутри формы mvc2 - PullRequest
Новая
       9

Переименование узла из jsTree внутри формы mvc2

1 голос
/ 02 июня 2010

У меня есть следующий код: 

<% using (Html.BeginForm("Update", "SkillLevel", FormMethod.Post, new { id = "TheForm" }))
   { %>
    <div id="demo3" class="demo">
        <ul>
            <li id="shtml_1">

                <a href="#">Root node 1</a>
                <ul>
                    <li id="shtml_2">
                        <a href="#">Child node 1</a>
                    </li>
                    <li id="shtml_3">
                        <a href="#">Child node 2</a>

                    </li>
                </ul>
            </li>
            <li id="shtml_4">
                <a href="#">Root node 2</a>
            </li>
        </ul>
    </div>

Проблема в том, что когда я переименовываю узел, я нажимаю Enter, чтобы завершить переименование. Но при нажатии Enter форма отправляется, и новое значение никогда не изменяется в дереве.

Как это сделать?

1 Ответ

3 голосов
/ 02 июня 2010

Решение состоит в том, чтобы добавить событие нажатие клавиши к jsTree, чтобы прекратить распространение клавиши Enter. 

$("#demo1").keypress(function (event) { 
    if (event.keyCode == '13') {
        event.preventDefault();
    }
});

Полное решение:

  • основан на jsTree 1.x
  • , который переводит узел в режим переименования при нажатии на изображение
  • и сохраняет переименованное значение в скрытом вводе для передачи его в контроллер MVC.

... 

<div id="demo1" class="demo">
    <ul>
        <li id="phtml_1" rel="root">
            <a href="#">Root node 1</a>
            <ul>
                <li id="phtml_2">
                    <a href="#">Child node 1</a>
                </li>
                <li id="phtml_3" rel="skill_other">
                    <a href="#">Other
                    <input type="hidden" value="Other" id="phtml_3Other" />
                    </a>
                </li>
            </ul>
        </li>
        <li id="phtml_4" rel="root">
            <a href="#">Root node 2</a>
        </li>
    </ul>
</div>
<script type="text/javascript" class="source">
$(function () {
    $("#demo1")
    .bind("rename.jstree", function (e, data) {
        var nodeId = '#' + data.args[0].attr('id');
        var text = $("#demo1").jstree(nodeId).get_text();

        $(nodeId + 'Other').val(text);
    })
    .jstree({ 
        "types" : {
            "valid_children" : [ "root" ],
            "types" : {
                "root" : {
                    "icon" : { 
                        "image" : "./_drive.png" 
                    },
                    "valid_children" : [ "default" ],
                    "max_depth" : 2,
                    "hover_node" : false
                    //"select_node" : function () {return false;}
                },
                "default" : {
                    "valid_children" : [ "default" ]
                }
            }
        },
        "plugins" : ["themes","html_data","dnd","ui","types", "crrm"]
    });

    $("li[rel='skill_other'] > a > ins").click(function () { 
        var node = $(this).parent().parent();
        $("#demo1").jstree("rename", node);
    });
});
</script>
...