如何使用jQuery动态编辑集合字段(ZF2)


How to edit collection fields (ZF2) on the fly with jQuery

我用ZF2创建了一个集合。HTML代码查找eg如下:

<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的当前状态,包括我的变化,而重新排序行?

实际上Zend'Form'Element'Collection保留了集合的键。我发现的唯一问题是,如果您最初使用选项count> 0定义集合,例如:

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

总是在集合开始时添加与count选项定义的一样多的缺失元素。从上面的示例中,如果集合中缺少索引为01的元素,它将添加这些元素。

我通过扩展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);
    }
}