如何使用jQuery隨時編輯收集字段（ZF2）

Question

我有一個使用ZF2創建的集合。該HTML代碼查找例如如下：

<fieldset id="benutzer"> 
<legend>Team</legend> 
<div class="controls-row"> 
<span data-template="<input type="hidden" name="projekt[benutzer][__placeholder__][benutzerid]" class="benutzerid" value=""><input name="projekt[benutzer][__placeholder__][benutzername]" class="benutzername" title="Kollege" placeholder="Name" type="text" value=""><input type="hidden" name="projekt[benutzer][__placeholder__][bearbeiten]" value="0"><input type="checkbox" name="projekt[benutzer][__placeholder__][bearbeiten]" title="Bearbeiten" class="bearbeiten" value="1"><input name="projekt[benutzer][__placeholder__][bemerkung]" title="Bemerkung" placeholder="Bemerkung" type="text" value="">"></span> 
<input type="hidden" value="4" class="benutzerid" name="todo[benutzer][0][benutzerid]"> 
<input type="text" value="Julian" placeholder="Name" title="Kollege" class="benutzername" name="todo[benutzer][0][benutzername]"> 
<input type="hidden" value="0" name="todo[benutzer][0][bearbeiten]"> 
<input class="bearbeiten" type="checkbox" checked="checked" value="1" title="Bearbeiten" name="todo[benutzer][0][bearbeiten]"> 
<input type="text" value="" placeholder="Bemerkung" title="Bemerkung" name="todo[benutzer][0][bemerkung]"> 
<div> 
<div class="row"> 
<input type="hidden" value="5428" class="benutzerid" name="todo[benutzer][0][benutzerid]"> 
<input type="text" value="Hans" placeholder="Name" title="Kollege" class="benutzername" name="todo[benutzer][0][benutzername]"> 
<input type="hidden" value="0" name="todo[benutzer][0][bearbeiten]"> 
<input class="bearbeiten" type="checkbox" checked="checked" value="1" title="Bearbeiten" name="todo[benutzer][0][bearbeiten]"> 
<input type="text" value="" placeholder="Bemerkung" title="Bemerkung" name="todo[benutzer][0][bemerkung]"> 
<div> 
</fieldset> 

用戶現在應該能夠選中/取消選中的複選框，編輯輸入字段，但還刪除和/或添加行。 ZF2的集合需要其行的索引從0開始，並將每行加1。這意味着，如果我刪除了一行並且該行在集合結束時並不偶然，我必須更正這些索引。我正在試圖用jQuery來做到這一點。

這裏是我的問題：如果在重新排序行之前我改變了任何東西（並且我在提交表單之前每次都會這樣做），則不會保留更改。如果我選中一個複選框，如果我在「Bemerkung」字段中輸入內容，則所有內容都將被丟棄。

這裏是我的代碼：

添加一個新行：

function add_category($collectionType) { 
    // Create and append new row 
    var $template = $('#'+$collectionType+' span').data('template'); 
    var $currentCount = $('#'+$collectionType+' .'+$collectionType+'id').length; 
    $template = $template.replace(/__placeholder__/g, String($currentCount)); 
    $newrow = "<div class=\"controls-row new-row\">"+$template+"<div class=\"span1\"><a href=\"#\" class=\"_delete-row\"><i class=\"icon-remove\"></i></a></div></div>"; 
    $('#'+$collectionType).append($newrow);   
    return false; 
} 

重新排序的集合：

$.fn.resortCollection = function(){ // execute with Collection-Fieldset! 
      $c = 0; 
      $fieldset = $(this); 
      // re-sort the rows, indexes 
      $.each($fieldset.find('.controls-row'), function(){    
       $html = $(this).html(); 
       $newhtml = $html.replace(/\[\d+\]/g, '['+$c+']'); 
       $(this).html($newhtml); 
       $c++; 
      }); 
     }; 

集合中刪除行：

$.fn.deleteRow = function(){ 
      var $row = this.closest('div.controls-row'); 
      var $fieldset = $row.closest('fieldset'); 
      $($row).remove(); 
      $fieldset.resortCollection(); 
     }; 

我該如何訪問當重新排序行時DOM的當前狀態包括我的更改？

Answer 1

實際上Zend\Form\Element\Collection保留集合的關鍵。我發現的唯一的問題是，如果你最初的選擇count> 0例如爲：

$this->add(array(
     'type' => 'Zend\Form\Element\Collection', 
     'name' => 'data', 
     'options' => array(
      'count' => 2, 
      'allow_add' => true, 
     ) 
    )); 

定義集合，它會永遠在集合的開頭，你有count選項定義添加儘可能多的缺少的元素。從上面的示例中，如果集合中缺少索引，它將添加索引0和1的元素。

我固定通過延長Zend\Form\Element\Collection和重寫一個方法：

namespace MyNamespace; 

use Zend\Form\Element\Collection as ZendCollection; 
use Zend\Form\Exception; 
use Traversable; 

class MyCollection extends ZendCollection 
{ 
    public function populateValues($data) 
    { 
     if (!is_array($data) && !$data instanceof Traversable) { 
      throw new Exception\InvalidArgumentException(sprintf(
       '%s expects an array or Traversable set of data; received "%s"', 
       __METHOD__, 
       (is_object($data) ? get_class($data) : gettype($data)) 
      )); 
     } 

     if (sizeof($data)){ 
      foreach ($this->byName as $name => $element) { 
       if (!isset($data[$name])) { 
        $this->remove($name); 
       } 
      } 
     } 

     parent::populateValues($data); 
    } 
} 

希望它會幫助你簡化你的代碼。