动态地添加表单字段行 - cakePHP [英] Dynamically add form field rows - cakePHP

问题描述

我有一张发票表格和一张invoice_item表格。每个发票都有多个invoiceItem。

I have a invoice table and an invoice_item table. Each Invoice hasMany invoiceItem.

创建发票时，向用户显示包含发票表单字段的表单，以及包含invoiceItem表单字段的行。

When creating an invoice the user is presented with a form with the invoice form fields and also a row with invoiceItem form fields.

我想要做的是有一个添加新项目链接动态（jQuery，AJAX）添加一行新项目字段。用户应该能够添加任意数量的行，每个新行应该显示在最后一行的下面。

What I want to do is to have a "add new item" link that dynamically (jQuery, AJAX) adds a new row of the item fields. User should be able to add as many rows as they want and each new row should appear below the last row.

当然，行字段属性也必须正确，以便可以使用saveAll方法轻松插入数据。

Of course the row field attributes must also be correct so that the data can easily be inserted with the saveAll method.

使用CakePHP完成这项工作的最好和最恰当的方法是什么？我使用CakePHP 2.4.7。

What is the best and most proper way to accomplish this with CakePHP? I am using CakePHP 2.4.7.

推荐答案

这里是我做的数据包含一个隐藏的id，一个标签和一个输入字段，所有都包含在字段集中。

Here's how I did it with data containing a hidden id, a label and an input field, all wrapped up in a fieldset. You could use actual tables to wrap it up.

下面是两组字段生成的HTML以及点击添加行的链接：

Here's the generated HTML for two sets of fields and the link to click to add a row:

   <fieldset>
   <input type="hidden" name="data[VmfrDesignatedIncome][0][id]" value="668" id="VmfrDesignatedIncome0Id"/>
   <div class="input text">
   <label for="VmfrDesignatedIncome0Designation">Designation</label>
   <input name="data[VmfrDesignatedIncome][0][designation]" value="blah" maxlength="512" type="text" id="VmfrDesignatedIncome0Designation"/></div>
   </fieldset>

    <fieldset>
    <input type="hidden" name="data[VmfrDesignatedIncome][1][id]" value="669" id="VmfrDesignatedIncome1Id"/>
    <div class="input text">
    <label for="VmfrDesignatedIncome1Designation">Designation</label>  

    <input name="data[VmfrDesignatedIncome][1][designation]" value="blah2" maxlength="512" type="text" id="VmfrDesignatedIncome1Designation"/></div>
    </fieldset>

     <a href="#" id="addrow">Add row</a>

这里是Javascript，它克隆页面上的最后一个字段集，然后修改id，name和字段值将其中的数字增加1。请注意，选择器必须使用> 子选择器来准确选择每个标签或字段。

and here's the Javascript which clones the last fieldset on the page, and then modifies the id, name and field values to increase the number in them by one. Note that the selectors have to accurately select each label or field using the > child selector.

/* 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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！