使用 Ajax、jQuery 动态构建表单
我正在使用 PHP / mySQL / CodeIgniter / jQuery 构建一个非常小的 Web ERP 应用程序
账单/发票是使用
current date
client data
etc
现在构建的，我必须将产品添加到正在创建的新发票中，而无需重新加载/提交页面。每个产品都有其数量、描述、单价、小计等。
我想使用 Ajax/jQuery 添加每个产品“行”。
- 我应该如何动态构建产品表单？我的意思是，允许用户使用 Ajax 添加新产品行或从发票中删除产品行？
- 如何对表单中所有动态添加的“行”进行求和，以获得发票总额？
- 我应该如何接收和处理所有过账数据，以便可以在发票表中插入正确的发票记录，并将产品记录插入 products_invoices 表中？
编辑：在这里您可以看到我想做的事情的工作示例
http://www.bambooinvoice.org/index.php/invoices/newinvoice
EDIT2：这个 jQuery 插件似乎就是我正在寻找的
http://code.google.com/p/jquery-dynamic-form/< /a>
I'm building a very small web ERP application with PHP / mySQL / CodeIgniter / jQuery
The Bill/Invoice is built with
current date
client data
etc
Now, I must add products to that new invoice that is being created, without reloading/submitting the page. Each product will have its qtty., description, unit price, subtotal, etc.
I'd like to add each product "row" using Ajax/jQuery.
- How should I build the products form dynamically? I mean, allowing users to add a new product row, or remove product rows from invoice, using Ajax?
- How to sum all the dynamically added "rows" in the form, for getting invoice total?
- And how should I receive and treat all the post data so I can insert the proper invoice record in the invoices table and insert the products records into the products_invoices table?
EDIT: here you can see a working example of what I want to do
http://www.bambooinvoice.org/index.php/invoices/newinvoice
EDIT2: This jQuery plugin seems to be what I was looking for
http://code.google.com/p/jquery-dynamic-form/
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
由于您使用的是 jQuery，因此我将使用 jQuery Grid 插件来实现产品行部分。
http://www.trirand.com/blog/
它具有高度可配置性和灵活性，您可以使用Ajax 手动或自动填充行（它可以使用简单的 PHP 后端直接从 MySQL 表读取），并且您拥有迭代所有行以将结果发布到服务器、进行分页（如果您需要很多行，我们已经成功使用它超过 15.000 行）并进行添加和添加其他操作。
希望有帮助！
since you are using jQuery, I'd use the jQuery Grid plugin to implement the product rows section.
http://www.trirand.com/blog/
It's highly configurable and flexible, you can use Ajax to populate manually or automatically the rows (it can read directly from a MySQL table with a simple PHP backend) and you have all the facilities to iterate all the rows to post the results to the server, to do pagination (if you need a lot of row, we've used it succesfully with more tha 15.000 rows) and to do additions & other operations.
Hope it helps!
基本上，当用户不断添加新数据行时，您必须动态地将表单元素添加到 DOM。我相信 jquery 对于使用标准 api 访问/修改 DOM 节点会有很大帮助。
为了总结数字，您必须使用特殊的钩子来包装数字字段，例如
34其中x是一个计数器。每次添加此类新数据后，迭代此类span元素并对值求和并将其显示在$("#sumtotal").innerHTML = sum;等字段中表单动态更新后，当用户点击提交按钮时，所有表单数据都会像正常的post数据一样发送到服务器。您必须为要在服务器中处理并更新某些数据库表的数据字段使用正确的
name和id属性。Basically you have to add the form elements to the DOM dynamically as the user keeps adding rows of new data. I believe jquery will be a lot of help in using standard apis for accessing/modifying DOM nodes.
For summing up figures, you have to wrap the numeric fields with special hooks like
<span id="value_x">34</span>wherexis a counter. After each addition of such new data, iterate through suchspanelements and sum the values and display them in a field like$("#sumtotal").innerHTML = sum;After the dynamic updates to the form, when the user clicks the submit button, all the form data will go to the server as normal post data. You must use proper
nameandidattributes for the data fields that you want to process in the server and update some database table.