表单集合中的不同 value_options

Question

我有一个 Collection，其中一个字段 User（一个 multiselect）依赖于以前的 Select，Department。因此每个用户 select 包含不同的 "value_options".

如何在为集合的每一行检索表单时设置不同的 "value_options"？

Answer 1

您有不同的选择：

您创建了一个 API 端点来检索表单选项
你把它做成两个不同的页面，第一个你选择部门，第二个你选择用户 (ew)
您在服务器端填充表单并在客户端过滤选择

我个人不赞成第二种选择。只是说这是一个可能的解决方案，但是NO.

第一个选项 API 很有趣，但实际上需要做更多的工作，尤其是当它是应用程序中唯一的端点时。

第三个选项是我一直使用的选项，因为它需要的代码较少并且实现起来非常简单。

在您的表单中，您有两个元素：

$this->add([
    'name' => 'department_id',
    'type' => 'Select',
    'attributes' => [
        'id' => 'department_id'
    ],
    'options' => [
        'value_options' => [
            1 => 'Marketing',
            2 => 'IT',
            3 => 'Logistic'
        ]
    ]
]);

$this->add([
    'name' => 'user_id',
    'type' => 'Select',
    'attributes' => [
        'id' => 'user_id',
        'multiple' => true
    ],
    'options' => [
        'value_options' => [
            [
                'value' => 1,
                'label' => 'John Doe - Marketing',
                'attributes' => ['data-department-id' => 1]
            ],
            [
                'value' => 2,
                'label' => 'Jane Doe - Marketing',
                'attributes' => ['data-department-id' => 1]
            ],
            [
                'value' => 3,
                'label' => 'Jack Doe - IT',
                'attributes' => ['data-department-id' => 2]
            ],
            [
                'value' => 4,
                'label' => 'Dana Doe - IT',
                'attributes' => ['data-department-id' => 2]
            ],
            [
                'value' => 5,
                'label' => 'Frank Doe - Logistic',
                'attributes' => ['data-department-id' => 3]
            ],
            [
                'value' => 6,
                'label' => 'Lara Doe - Logistic',
                'attributes' => ['data-department-id' => 3]
            ]
        ]
    ]
]);

如您所见，所有用户都放在 value_options 中。请记住，这只是一个示例，您应该使用自定义元素来填充这种选择 ;)

然后，在您的视图中，渲染元素：

<?= $this->formElement($this->form->get('department_id')); ?>
<?= $this->formElement($this->form->get('user_id')); ?>

您最后添加了 JS 代码来处理过滤器。这里我用的是jQuery，其实没必要用：

$(function () {
    // Filter users when you load the page
    filterUsers(false);
    // Filter users when you change value on multiselect
    $('#department_id').on('change', function () {
        filterUsers(true);
    });
});
function filterUsers(resetValue) {
    var departmentId = $('#department_id').val();
    // Remove previous value only when filter is changed
    if (resetValue) {
        $('#user_id').val(null);
    }
    // Disable all options
    $('#user_id option').attr('disabled', 'disabled').attr('hidden', true);
    // Enable only those that respect the criteria
    $('#user_id option[data-department-id=' + departmentId + ']').attr('disabled', false).attr('hidden', false);
}

最后提示：不要忘记创建并添加到表格中 Validator 来检查这对 department_id - user_id 是否正确，只是为了避免（以我为例）接受 Lara Doe（后勤）与 IT 部门 ;)

表单集合中的不同 value_options

Different value_options in Form Collection

zend-framework

zend-form

zend-framework3