客户端内联表单编辑答案

【问题标题】：Inline form editing on client side客户端内联表单编辑
【发布时间】：2010-12-07 09:07:46
【问题描述】：

我看到一些网站使用动态表单（我不知道如何调用它们！）来编辑一组数据。例如：有一组数据，如姓名、姓氏、城市、国家等。当用户点击编辑按钮，而不是回发，一个表单，由 2 个文本框 + 2 个组合框组成，动态打开编辑，然后当你点击保存按钮时，编辑表单消失，所有数据更新..

现在，我知道这里发生的事情是使用 Ajax 进行服务器调用和一些 javascript 进行 dom 操作。我什至找到了一些用于文本框编辑的 jquery 插件。但是，我找不到任何可以完全实现表单字段的东西。因此，我通过 jquery ajax 调用和手动 dom 操作在 asp.net 上实现了它。这是我的过程：

1) 单击编辑按钮时：对服务器进行 ajax 调用以检索必要的formedit.aspx 2) 它返回分配了值的可编辑表单字段。 3) 单击保存按钮时：对服务器进行 ajax 调用以检索 formupdateprocess.aspx 页面。它基本上是进行数据库更新，然后返回必要的 DOM 片段 (...) 以插入当前页面..

很好，但我的问题是性能。结果似乎比我在其他网站上看到的样本要慢。:((

有什么我不知道的吗？更好的实现方式？？

【问题讨论】：

您知道您在帖子标题中不知何故使用了倒置的感叹号而不是小写的“i”吗？我已经修好了...
@Kip：+1 敏锐的眼睛。
@b3：谢谢。然而，回顾编辑历史，有趣的是它实际上并不是一个倒置的感叹号，而是臭名昭著的土耳其点大写字母“i”。也许作者在土耳其语键盘上打错字了？ en.wikipedia.org/wiki/Dotted_and_dotless_I

标签： asp.net jquery jquery-plugins inline-editing

【解决方案1】：

我会将编辑表单保留在客户端上，但使用例如隐藏"style="display:none;"，然后在用户单击编辑按钮时显示它。在这种情况下从服务器加载表单是非常昂贵的性能明智的。

这是一个非常基本的示例，不考虑定位编辑表单等。

<head>
    <script type="text/javascript">
        $(function () {
            $("#showEdit").click(function () {
                $("#editForm").css("display", "block");
            });
        });
    </script>
</head>
<body>
    <div id="editForm" style="display: none; position: absolute; z-index: 999;">
        <fieldset>
            <label for="surnameInput">Surname:</label>
            <input id="surnameInput" type="text" />
            <label for="firstNameInput">Surname:</label>
            <input id="firstNameInput" type="text" />
        </fieldset>
    </div>
    <input id="showEdit" type="button" value="Edit" />
</body>

这确实意味着您的主页必须在首次加载时携带编辑字段值，但通常这是一个很小的代价，因为用户当时接受等待，而不是在他们单击按钮时。

【讨论】：

【解决方案2】：

我过去在 ASP.NET 中使用过 jQGrid（MVC 不支持 GridViews）。

http://www.trirand.com/blog/

和演示 http://trirand.com/jqgrid/jqgrid.html （查看行编辑）。

【讨论】：

【解决方案3】：

只是一个想法，但您是否看过 Jeditable 插件，它允许您编辑内联内容？

这里是tutorial，教程代码为some improvements。

【讨论】：

【解决方案4】：

如果你像我一样讨厌一次又一次地使用插件，这就是它的做法。

HTML：

<div id="pesa"><p>PERSONAL INFORMATION</p>
<ul>
    EMAIL:<li class="editable">email</li>
    NAME:<li class="editable">name</li>
    TELLPHONE:<li class="editable">tel</li>
    COUNTRY:<li class="editable">country</li>
    CITY:<li class="editable">city</li>
</ul>

然后是 CSS 来降温：

 #pesa a{
 color: #000;
 }

#pesa a:hover{
 color: #;
 }


  #pesa a:hover{
 text-decoration: none;
 }

  h1{
 font-size: 30px;
 padding: 0;
  margin: 0;
  }

 h2{
 font-size: 20px;
  }


  .editHover{
  background-color: #E8F3FF;
   }

  .editBox{
   width: 326px;
 min-height: 20px;
 padding: 10px 15px;
  background-color: #fff;
 border: 2px solid #E8F3FF;
  }

  #pesa ul{
  list-style: none;
  }

  #pesa li{
  width: 330px;
  min-height: 20px;
  padding: 10px 15px;
  margin: 5px;
 }

 li.noPad{
 padding: 0;
 width: 360px;
}

  #pesa form{
 width: 100%;
}

.btnSave, .btnCancel{
 padding: 6px 30px 6px 75px;
 }

 .block{
 float: left;
 margin: 20px 0;
 }

然后是 JavaScript：

              $(document).ready(function() 
        {
var oldText, newText;
$(".editable").hover(
    function()
    {
        $(this).addClass("editHover");
    }, 
    function()
    {
        $(this).removeClass("editHover");
    }
);

$(".editable").bind("dblclick", replaceHTML);


$(".btnSave").live("click", 
                function()
                {
                    newText = $(this).siblings("form")
                                     .children(".editBox")
                                     .val().replace(/"/g, "&quot;");

                    $(this).parent()
                           .html(newText)
                           .removeClass("noPad")
                           .bind("dblclick", replaceHTML);
                }
                ); 

$(".btnDiscard").live("click", 
                function()
                {
                    $(this).parent()
                           .html(oldText)
                           .removeClass("noPad")
                           .bind("dblclick", replaceHTML);
                }
                ); 

function replaceHTML()
                {
                    oldText = $(this).html()
                                     .replace(/"/g, "&quot;");
                    $(this).addClass("noPad")
                           .html("")
                           .html("<form><input type=\"text\" class=\"editBox\" value=\"" + oldText + "\" /> </form><a href=\"#\" class=\"btnSave\">Save changes</a> <a href=\"#\" class=\"btnDiscard\">Discard changes</a>")
                           .unbind('dblclick', replaceHTML);

                }
  }
  );

因此，当有人将鼠标悬停在 li 项目上时，它会变成蓝色，只是某种颜色，让用户知道他们可以编辑。当他们使用dblclick 事件双击时，会显示一个带有<li> 项目值的表单，只需检查代码即可。当他们在表单中编辑并保存时，表单会被删除，并会放置一个包含新 htmlvalue 的列表。然后，您可以使用$ajax 方法将变量发送到服务器端进行处理。

【讨论】：