表单集合中的不同value_options

Question

我有一个集合，其中用户（多选）字段取决于先前的选择（部门）。因此，每个用户选择都包含一个不同的“ value_options”。

在为Collection的每一行检索表单时如何设置不同的“ 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部门;）