Question

我想进行现场编辑，我有常规文本（来自模型），旁边有一个编辑按钮。单击编辑按钮时，我希望在常规文本所在的位置显示可编辑的文本框，然后通过AJAX提交更改。我已经解决了如何提交，但我不知道如何将编辑控件准确地放在文本之前的位置。这对你来说很容易就是JS大师。

除了展示位置问题，我想知道是否应该在点击编辑按钮时通过AJAX获取相应的编辑框（常规文本的文本框，日期等日历等），或者最好是将其与页面一起发送并保持隐藏，直到需要？或者我可以在某种程度上重用客户端上的单个实例吗？

对不起，这是一个两个问题，但它们紧密相关。

谢谢！

Answer 1

不确定是否了解按钮放置问题。但是，有许多为此目的设计的jquery插件。其中一个是Jeditable，找到一个演示here！

Answer 2

将编辑的标记存储在变量中，将编辑前的当前标记存储在变量中（这样，如果按下取消按钮，则可以恢复），然后使用jquery将其切换出来：

var editmarkupvariable = [editmarkup];
var revertmarkup = $("#item").html();
<div class="item">
   [markup]
</div>

$("#item").html(editmarkupvariable);

本教程提供了更多详细信息： http://15daysofjquery.com/edit-in-place-with-ajax-using-jquery-javascript-brary/15/

这应该回答你的两个问题。

我会谷歌寻找一个jquery插件来做到这一点，除非你必须手动编码。这是一个：http://aktagon.com/projects/jquery/in-place-edit

Answer 3

我会推荐JEditable我之前使用它并且效果非常好。

一个例子：

标记

<div class="editable_text" id="my_text">My Text</div><a href="#" class="trigger_editable">Edit</a>

Jquery

$(".editable_text").editable("YOUREDITURLHERE", { event : "edit" });
$(".trigger_editable").bind("click", function() {
        $(this).prev().trigger("edit");
});

希望这有帮助。

Answer 4

如果问题严格是文本编辑，为什么不能将单个textarea用于这两个目的并切换disable属性（可能还有background-color＆amp; border样式）单击编辑按钮？

ASP.NET MVC / jQuery：就地编辑

4 个答案: