使用 Ajax、jQuery 动态构建表单

Question

我正在使用 PHP / mySQL / CodeIgniter / jQuery 构建一个非常小的 Web ERP 应用程序
账单/发票是用

构建的

current date
client data
etc

现在，我必须将产品添加到正在创建的新发票中，而无需重新加载/提交页面。每个产品都有其数量、描述、单价、小计等。

我想使用 Ajax/jQuery 添加每个产品“行”。

• 我应该如何动态构建产品表单？我的意思是，允许用户使用 Ajax 添加新产品行或从发票中删除产品行？
• 如何汇总表单中所有动态添加的“行”，以获得发票总额？
• 我应该如何接收和处理所有过帐数据，以便在 invoices 表中插入正确的发票记录并将产品记录插入到 products_invoices 表中？

编辑：在这里您可以看到我想做的工作示例
http://www.bambooinvoice.org/index.php/invoices/newinvoice

EDIT2：这个 jQuery 插件似乎正是我想要的
http://code.google.com/p/jquery-dynamic-form/

Answer 1

由于您使用的是 jQuery，我将使用 jQuery Grid 插件来实现产品行部分。

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

它是高度可配置和灵活的，您可以使用 Ajax 手动或自动填充行（它可以使用简单的 PHP 后端直接从 MySQL 表中读取），并且您拥有迭代所有行以发布结果的所有工具到服务器，进行分页（如果您需要很多行，我们已经成功地使用了超过 15.000 行）并进行添加和其他操作。

希望对你有帮助！

Answer 2

基本上，当用户不断添加新数据行时，您必须动态地将表单元素添加到 DOM。我相信 jquery 在使用标准 api 访问/修改 DOM 节点方面会有很大帮助。

为了汇总数字，您必须使用特殊的钩子包裹数字字段，例如 <span id="value_x">34</span>，其中 x 是一个计数器。每次添加此类新数据后，遍历此类span 元素并对值求和并将它们显示在类似$("#sumtotal").innerHTML = sum; 的字段中

表单动态更新后，当用户点击提交按钮时，所有表单数据将作为正常的post数据发送到服务器。对于要在服务器中处理并更新某些数据库表的数据字段，您必须使用正确的 name 和 id 属性。