Renaming node from jsTree inside a mvc2 form
I've the following code:
<% 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>
The problem is that when I renam开发者_StackOverflow中文版e a node, i press Enter to complete the rename. But when pressing Enter, the form gets submitted and the new value is never changed in the tree.
How to sole this ?
The solution is to add a 'keypress' event to the jsTree to stop propagating the Enter key.
$("#demo1").keypress(function (event) {
if (event.keyCode == '13') {
event.preventDefault();
}
});
The full solution:
- is based in jsTree 1.x
- which puts the node in 'rename-mode' when the image is clicked
- and stores the renamed value into a hidden input to pass this to the MVC Controller.
...
<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>
精彩评论