Question

我看到一些网站使用动态表单（我不确定如何调用它们！）来编辑一组数据。例如：有一组数据，如姓名，姓氏，城市，country.etc。当用户点击EDIT按钮而不是回发时，一个表单，由2个文本框+ 2个组合框组成，动态打开进行编辑，然后当您单击“保存”按钮时，编辑表单将消失，并且所有数据都会更新..

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

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

嗯工作但我的问题，是性能..结果似乎比我在其他网站看到的样本慢。:(（

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

Answer 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>

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

Answer 2

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

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

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

Answer 3

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

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

Answer 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方法将变量发送到服务器端进行处理。

客户端的内联表单编辑

4 个答案: