javascript - 如何对齐表格中的表单字段以进行内联编辑？

Question

我正在使用 Spring、jsp、javascript、jquery 开发一个 webapp。

我使用数据表显示表格。当我点击一个表行时，我希望它将所有字段更改为内联编辑输入、选择等。此外，我想在下一行显示一些额外的输入字段和一个保存按钮。

现在我看到了几种方法。我不确定该选哪一个。

1. 我可以获得所选行的句柄，然后遍历 td 并将它们转换为输入/选择字段。然后我可以为新字段和保存按钮插入一个额外的行。我不认为这是一个干净的解决方案。我将不得不手动发布一个 Post，而不是对表单使用 Spring ModelAttribute 绑定(bind)。 (这里还能用ModelAttribute吗？)

2. 我可以在 jsp 文件中创建一个编辑表单，如下所示:

   <form:form action="" commandName="">
<td> <input ... > </td>
<td> <select ... > </td>
</tr>
<tr>
<td> <label> <input new field> </td>
<td> <button> </td>
</tr>

请注意，我在 jsp 文件中没有开头，因为我打算重用表中现有行的 tr。这样我就可以拥有一个干净的表单，还可以使用我已经编写的将表单绑定(bind)到 Java 类的更新方法。此外，我不必为输入字段与列名的对齐而烦恼。

生成的html看起来像 ...

这种方法的问题是表单元素在 html 中的放置会导致整个表单被限制在表格的一个单元格中，这看起来不太好并且会弄乱整个布局。有出路吗？我是否应该只用一个 colspan 替换表格的内容，然后将 div 放入该元素内并微调 css 以确保输入字段与表格中的列名对齐？

您有更好的解决方案可以建议吗？如果问题不是很清楚，我可以填写更多详细信息。

Answer 1

这就是我会做的(来自服务器端开发背景，因为我知道开发人员喜欢简单的解决方案)

1. 用单一表格包裹表格
2. 在编辑行(单击行)上打开一个 ajax 请求，该请求返回看起来与 tr 完全一样的纯 html，只包含您想要包含的任何额外内容:

---

<tr><td><input type="text" name="text1" ... /></td><td>second row... </td></tr>
<tr><td colspan="2">And hey, here is more, and the save button ... </td></tr>  

---

1. 在 jQuery 中用检索到的内容替换 tr (myTr.replace($(ajaxResponse))) 或类似内容

2. 现在保存按钮是表单的常规提交

3. 如果你想通过 ajax 提交，一旦完成，在你的 ajax 响应中返回旧的 html 并用旧的 tr 替换两个 trs(你只需要通过给新的 trs 一个你可以在 jquery 中很容易找到)

4. 不要忘记关闭全局键以防止重复编辑，用户可以一次编辑一行

---

更新:添加第二个解决方案以将负载转储到客户端而不是服务器

为避免服务器过载(尽管在它成为常规习惯之前我不会担心它)，您可以将表单字段作为 HTML 中的模板并使用字符串替换(或 jQuery 模板)，因此改为在第 2 步中获取响应的 ajaxing，您调用模板，并用您在每一行中保存的属性替换字符串......像这样:

<div id="myTemplate"> // or you can use jQuery script templates
    <tr><td><input type="text" name="${Name}" ... /> id is ${Id}</td><td>${SecondRow}... </td></tr>
    <tr><td colspan="2">Save button here.... and may be more text ${MoreText}</td></tr>  
</div>

在代码的每一行中添加足够的属性或 ID 以了解要替换的内容，如下所示:

<tr data-itemid="34"><td ><input type="text" name="text1" id="findme" ... /></td><td data-moretext="here is more text">second column </td></tr>...etc

所以现在在您的替换脚本中:

$("#myTemplate").html().replace("${Name}", $(thisrow).find("#findme").attr("name"))
    .replace("${Id}",$(thisrow).attr("data-itemid"));

等...

当然在提交之后它必须是一个服务器，但是如果用户“取消”你可以有另一个只读模板

顺便说一下，这是我通常使用的方式，我使用 jQuery 模板，创建编辑和查看模板，但我也重复编辑表单，我使用 jQuery ajax 手动提交...但是...我的 friend ，恐怕这不是一个简单干净且可维护的解决方案