客户端内联表单编辑

发布于 2024-08-08 20:22:16 字数 561 浏览 8 评论 0原文

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

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

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

很好，它可以工作，但我的问题是性能.. 结果似乎比我在其他网站上看到的示例慢。:((

在那里有什么我不知道的更好的方法吗？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

合约呢 2024-08-15 20:22:16

我会将编辑表单保留在客户端上，但用例如“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>

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

I would keep the edit form on the client, but hidden with e.g. "style="display:none;", and then show it when the user clicks the edit button. Loading a form from the server in this event is very costly performance wise.

This is a very basic example and doesn't consider positioning the edit form etc.

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

This does mean your main page will have to carry the edit field values from first load, but very often that is a small price to pay, because the user accepts a wait at that time, not when they click a button.

回复收藏 0 原文

唔猫 2024-08-15 20:22:16

我过去曾将 jQGrid 与 ASP.NET 一起使用（MVC 不支持 GridViews）。

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

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

回复收藏 0 原文

雨轻弹 2024-08-15 20:22:16

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

这是一个教程，以及带有一些改进。

回复收藏 0 原文

北音执念 2024-08-15 20:22:16

如果您像我一样讨厌时不时使用插件，那么这是如何完成的。

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, """);

                    $(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, """);
                    $(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 事件双击时，会显示一个表单，其中包含

项的值，只需检查代码即可。当他们在表单中编辑并保存时，表单将被删除，并放置一个包含新 htmlvalue 的列表。然后，您可以使用 $ajax 方法将变量发送到服务器端进行处理。

Here is how it is done if you are like me who loathes using plugins now and again.

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

Then the CSS to cool things up:

 #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;
 }

Then the 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, """);

                    $(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, """);
                    $(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);

                }
  }
  );

So when someone hovers over the li items it turns blue just some colour to let the user know they can edit. When they double-click using the dblclick event, a form shows up with the value of the <li> item, just check the code. When they edit in the form and save, the form is removed and a list with the new htmlvalue is placed. You can then use an $ajax method to send the variables to the server side for processing.

回复收藏 0 原文

~没有更多了~