從jsTree重命名節點的MVC2形式

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>