在 mvc2 表单中重命名 jsTree 中的节点

Question

我有以下代码：

<% 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 时，表单将被提交，并且树中的新值永远不会更改。

这个怎么做呢？

Answer 1

解决方案是向 jsTree 添加“keypress”事件以停止传播 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>