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>

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

1 个答案: