1

私は次のコードを持っています：

<% 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 キーを押すと、フォームが送信され、新しい値がツリーで変更されることはありません。

これをソールにする方法は？

4

1 に答える 1

3

解決策は、' keypress ' イベントを 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>
于 2010-06-02T11:20:47.407 に答える