【问题标题】:Dynamic HTML Table rows added and filled and inserted in to database添加并填充并插入到数据库中的动态 HTML 表行
【发布时间】:2011-06-26 11:13:15
【问题描述】:

我需要一个解决方案,以实现添加动态 HTML 表格行并用详细信息填充它们,然后应在提交时将这些行添加到数据库中。在jsp中实现这一点的最佳方法是什么。加载时的jsp页面从数据库中获取数据并创建行,我可以编辑行值并且应该更新它,也可以在前端页面中插入新行,这应该与更新的行(从数据库中检索)一起保存在 jsp 中。

【问题讨论】:

    标签: java jsp


    【解决方案1】:
    1. 将表中的数据存储在一个 javascript 多维 Array 对象中,该对象有一个额外的列。例如,如果表是 2x2,则创建一个大小为 2x3 的动态数组 (new Array(2,3))

    2. 使用数组每一行的第一个单元格存储表中每一行数据的主键,该行的其余单元格存储实际数据,就像在html表中一样。

    3. 当向 html 表添加新行或更新任何数据时,相应地更新此 javascript 数组。将新创建的行的第一列留空以表示新行(或用虚拟值填充以表示空行)

    4. 当单击提交按钮时,将此数组中的数据提交给处理它的服务器代码。这可以通过多种方式完成(附加到查询字符串、创建隐藏变量等)

    5. 在服务器端,处理此数据 - 更新具有主键的记录并为没有键的记录创建新记录。

    【讨论】:

      【解决方案2】:
      1. 客户端javascript。根据需要添加行、删除行、上移行、下移行等功能。 Elsewhere on SO
      2. 记得对添加的控件进行唯一命名,例如 name1、name2、name3... 可以选择将行数存储在某个隐藏字段中,该字段会随表单一起更新和提交。
      3. 在服务器端使用该计数器或以其他方式循环所有请求变量以查找名称*,并将名称*、年龄*、性别*等插入循环中的数据库。

      【讨论】:

        【解决方案3】:

        除非需要允许用户一次性发布整个表并完成(“保存所有更改并关闭”操作),否则我建议您随时更新数据库( “ajaxy”方式): 1. 添加行或编辑行时,立即使用异步 javascript 调用“更新单行”将行内容发送到服务器 - 这应该相当容易处理(参见下面的示例想法)。 2. 添加新行时,服务端应该返回新的行id给客户端存储,以便以后更新可以寻址到该行。

        实现“保存并关闭”并不完全与此方法相矛盾:您可以让您的“保存并关闭”操作等待所有待处理的更新提交 - 当您开始发送请求时计数会增加,并且收到响应时递减。当它变为零时,您的“保存”部分已完成,您可以关闭编辑器。

        实现这一点的一种方法是将表单附加到每行中的不可见单元格。此表单将为行上的每个数据项提供一个隐藏的输入元素。当用户更改行上的值时,将该行标记为“脏”,并且每行的短暂超时(每当用户编辑同一行时都会重置)将导致表单提交到 iframe。如果要实现“保存并关闭”操作,只需统计脏行即可。

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 1970-01-01
          • 2015-08-21
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2018-01-11
          相关资源
          最近更新 更多