동적으로 양식 필드 행 추가 - cakePHP

Question

송장 테이블과 invoice_item 테이블이 있습니다. 각 인보이스 hasMany invoiceItem.

인보이스를 만들 때 인보이스 양식 필드가있는 양식과 invoiceItem 양식 필드가있는 행이 표시됩니다.

동적으로 ("jQuery, AJAX") 항목 필드의 새 행을 추가하는 "새 항목 추가"링크를 갖고 싶습니다. 사용자는 원하는만큼의 행을 추가 할 수 있어야하며 새 행이 마지막 행 아래에 표시되어야합니다.

물론 saveAll 메소드로 데이터를 쉽게 삽입 할 수 있도록 행 필드 속성도 정확해야합니다.

CakePHP로 이것을 수행하는 가장 좋은 방법은 무엇입니까? CakePHP 2.4.7을 사용하고 있습니다.

Answer 1

간단한 아이디어는

1- (<input type="text" name="items[]"/>)

2 클래스 "addmore"

3 사용 JQuery와 클론와 버튼을 만들 이름 배열 항목 입력을 내 마음 속에 있어요 이 여기

Answer 2

도움이 될 것입니다

내가 생각 버튼을 클릭 이벤트의 입력을 복제하는 것은 내가 데이터 해냈어 숨겨진 ID, 레이블 및 입력 필드를 포함하며 모두 필드 세트에 래핑됩니다. 실제 테이블을 사용하여 마무리 할 수 ​​있습니다. 여기

은 행 추가 클릭하여 필드와 링크의 두 세트에 대해 생성 된 HTML이다 :

<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> 

을 여기 페이지의 마지막 필드 셋 클론 자바 스크립트를, 그리고 다음 ID, 이름을 수정 필드 값을 하나씩 늘리십시오. 셀렉터는 > 자식 선택기를 사용하여 각 라벨이나 필드를 정확하게 선택해야합니다.

/* 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'))); 
    }); 
}); 

Answer 3

Dynamic form input fields in CakePHP 자습서를 확인하십시오. 나는 CakePHP 2.x와 CakePHP 3.x에서도 같은 것을 사용했다. 이 자습서의 한 가지 문제점은 동적 필드 ID 생성입니다. Grade.0.subject 및 Grade.1.subject 필드 모두에 대해 GradeSubject 만들기와 같이 동일한 동적 필드에 대해 동일한 ID를 만들 때마다 각 필드에 동적 ID가 필요한 경우 아래 에서처럼이 자습서를 수정할 수 있습니다.

은 튜토리얼에 따르면 마찬가지로 View/Elements/grades.ctp 내용 변경 :

<?php 
    $key = isset($key) ? $key : '{{ key }}'; 
    // I changed <%= key %> to {{ key }} 
?> 
<tr> 
    <td> 
     <?php echo $this->Form->hidden("Grade.{$key}.id") ?> 
     <?php echo $this->Form->text("Grade.{$key}.subject",array("id"=>"Grade{$key}Subject")); ?> 
    </td> 
    <td> 
     <?php echo $this->Form->select("Grade.{$key}.grade", array(
      'A+', 
      'A', 
      'B+', 
      'B', 
      'C+', 
      'C', 
      'D', 
      'E', 
      'F' 
     ), array(
      'empty' => '-- Select grade --', 
      "id"=>"Grade{$key}Grade" 
     )); ?> 
    </td> 
    <td class="actions"> 
     <a href="#" class="remove">Remove grade</a> 
    </td> 
</tr> 

을하고 또한 add.ctp 자바 스크립트 코드를 변경 :

<script> 
    $(document).ready(function() { 
     //I changed undescore default template settings 
     _.templateSettings = { 
      interpolate: /\{\{(.+?)\}\}/g 
     } 

     var 
      gradeTable = $('#grade-table'), 
      gradeBody = gradeTable.find('tbody'), 
      gradeTemplate = _.template($('#grade-template').remove().text()), 
      numberRows = gradeTable.find('tbody > tr').length; 

     gradeTable 
      .on('click', 'a.add', function(e) { 
       e.preventDefault(); 

       $(gradeTemplate({key: numberRows++})) 
        .hide() 
        .appendTo(gradeBody) 
        .fadeIn('fast'); 
      }) 
      .on('click', 'a.remove', function(e) { 
        e.preventDefault(); 

       $(this) 
        .closest('tr') 
        .fadeOut('fast', function() { 
         $(this).remove(); 
        }); 
      }); 

      if (numberRows === 0) { 
       gradeTable.find('a.add').click(); 
      } 
    }); 
</script>