动态添加表单字段行 – cakePHP
我有发票表和invoice_item表。 每个发票都有很多invoiceItem。
创建发票时，将向用户显示包含发票表单字段的表单以及包含invoiceItem表单字段的行。
我想要做的是有一个“添加新项目”链接，动态地（jQuery，AJAX）添加项目字段的新行。 用户应该能够根据需要添加任意数量的行，并且每个新行应该显示在最后一行的下方。
当然，行字段属性也必须正确，以便可以使用saveAll方法轻松插入数据。
使用CakePHP实现这一目标的最佳和最恰当的方法是什么？ 我正在使用CakePHP 2.4.7。
以下是我使用包含隐藏ID，标签和输入字段的数据的方法，所有数据都包含在字段集中。 您可以使用实际表来包装它。
这是为两组字段生成的HTML以及单击以添加行的链接：
Add row 这里是克隆页面上最后一个字段集的Javascript，然后修改id，name和field值以将其中的数字增加一。 请注意，选择器必须使用>子选择器准确选择每个标签或字段。
/* As the strings to the function below may have [ or ] ** we want to stop it being treated as a regexp */ RegExp.quote = function(str) { return str.replace(/([.?*+^$[\]\\(){}|-])/g, "\\$1"); }; function findNumberAddOne(attributeString) { /*Finds the number in the given string ** and returns a string with that number increased by one */ var re = new RegExp("(.*)([0-9])(.*)"); var nPlusOne = attributeString.replace(re, "$2")+"+1"; var newstr = attributeString.replace(re, "$1")+eval(nPlusOne)+attributeString.replace(re, "$3"); return newstr; } $(document).ready(function() { /* Duplicate the last set of designated income fields and increase the relevants id/name etc. ** so that it works as a new row in the table when saved*/ $('#addrow').click(function() { $('fieldset:last').clone().insertAfter('fieldset:last'); $('fieldset:last > input').attr('id',findNumberAddOne($('fieldset:last > input').attr('id'))); $('fieldset:last > input').attr('value',''); /*Blank out the actual value*/ $('fieldset:last > input').attr('name',findNumberAddOne($('fieldset:last > input').attr('name'))); $('fieldset:last > div > label').attr('for',findNumberAddOne($('fieldset:last > div > label').attr('for'))); $('fieldset:last > div > input').attr('id',findNumberAddOne($('fieldset:last > div > input').attr('id'))); $('fieldset:last > div > input').attr('value',''); /*Blank out the actual value*/ $('fieldset:last > div > input').attr('name',findNumberAddOne($('fieldset:last > div > input').attr('name'))); }); });
请检查CakePHP教程中的动态表单输入字段 。 我对CakePHP 2.x以及CakePHP 3.x使用了相同的内容。 本教程中的一个问题是动态字段ID创建。 每次为相同的动态字段创建相同的ID，例如为Grade.0.subject和Grade.1.subject字段创建GradeSubject 。 如果您需要每个字段的动态ID，您可以修改本教程，如下所示。
根据教程只需将View/Elements/grades.ctp内容更改为：
to {{ key }} ?> Form->hidden("Grade.{$key}.id") ?> Form->text("Grade.{$key}.subject",array("id"=>"Grade{$key}Subject")); ?> Form->select("Grade.{$key}.grade", array( 'A+', 'A', 'B+', 'B', 'C+', 'C', 'D', 'E', 'F' ), array( 'empty' => '-- Select grade --', "id"=>"Grade{$key}Grade" )); ?> Remove grade
并将您的add.ctp javascript代码更改为：
最简单的想法在我脑海里浮现
1-使用名称数组项目（ ）
2-创建一个类“addmore”的按钮
3-使用jquery clone复制该按钮上click事件的输入
我认为这会有所帮助