README

为模型属性处理多个输入的 Yii2 小部件，以及用于模型批量的表格输入。

最新版本

该扩展的最新稳定版本为 v2.21.5。请遵循升级说明从先前版本升级

安装

安装此扩展的首选方式是通过 composer。

运行以下命令：

php composer.phar require  unclead/yii2-multiple-input "~2.0"

或者

"unclead/yii2-multiple-input": "~2.0"

将以下内容添加到您的 composer.json 文件的 require 部分中。

基本用法

例如，您想在个人资料页面允许用户输入多个电子邮件地址。在这种情况下，您可以使用如下代码中的 yii2-multiple-input 小部件

use unclead\multipleinput\MultipleInput;

...

<?php
    echo $form->field($model, 'emails')->widget(MultipleInput::className(), [
        'max'               => 6,
        'min'               => 2, // should be at least 2 rows
        'allowEmptyList'    => false,
        'enableGuessTitle'  => true,
        'addButtonPosition' => MultipleInput::POS_HEADER, // show add button in the header
    ])
    ->label(false);
?>

更多详情请参阅 单列

高级用法

例如，您想创建一个管理用户日程的用户界面。为了简化，我们将日程存储在 JSON 字符串中。在这种情况下，您可以使用如下代码中的 yii2-multiple-input 小部件

use unclead\multipleinput\MultipleInput;

...

<?= $form->field($model, 'schedule')->widget(MultipleInput::className(), [
    'max' => 4,
    'columns' => [
        [
            'name'  => 'user_id',
            'type'  => 'dropDownList',
            'title' => 'User',
            'defaultValue' => 1,
            'items' => [
                1 => 'User 1',
                2 => 'User 2'
            ]
        ],
        [
            'name'  => 'day',
            'type'  => \kartik\date\DatePicker::className(),
            'title' => 'Day',
            'value' => function($data) {
                return $data['day'];
            },
            'items' => [
                '0' => 'Saturday',
                '1' => 'Monday'
            ],
            'options' => [
                'pluginOptions' => [
                    'format' => 'dd.mm.yyyy',
                    'todayHighlight' => true
                ]
            ]
        ],
        [
            'name'  => 'priority',
            'title' => 'Priority',
            'enableError' => true,
            'options' => [
                'class' => 'input-priority'
            ]
        ]
    ]
 ]);
?>

更多详情请参阅 多列

克隆填充的行

use unclead\multipleinput\MultipleInput;

...

<?= $form->field($model, 'products')->widget(MultipleInput::className(), [
    'max' => 10,
    'cloneButton' => true,
    'columns' => [
        [
            'name'  => 'product_id',
            'type'  => 'dropDownList',
            'title' => 'Special Products',
            'defaultValue' => 1,
            'items' => [
                1 => 'id: 1, price: $19.99, title: product1',
                2 => 'id: 2, price: $29.99, title: product2',
                3 => 'id: 3, price: $39.99, title: product3',
                4 => 'id: 4, price: $49.99, title: product4',
                5 => 'id: 5, price: $59.99, title: product5',
            ],
        ],
        [
            'name'  => 'time',
            'type'  => DateTimePicker::className(),
            'title' => 'due date',
            'defaultValue' => date('d-m-Y h:i')
        ],
        [
            'name'  => 'count',
            'title' => 'Count',
            'defaultValue' => 1,
            'enableError' => true,
            'options' => [
                'type' => 'number',
                'class' => 'input-priority',
            ]
        ]
    ]
])->label(false);

使用其他图标库

现在，多个输入和表格输入小部件支持 FontAwesome 以及您选择的任何其他图标库。

要利用这一功能，请按照以下步骤操作：

1. 将您首选的图标库包含到您的项目中。如果您想使用 fontAwesome，可以使用包含的 FontAwesomeAsset，它将集成来自他们 CDN 的免费 fa；
2. 如果您的首选图标库不在小部件的 iconMap 数组中，请添加映射，如下所示；

public $iconMap = [
    'glyphicons' => [
        'drag-handle' => 'glyphicon glyphicon-menu-hamburger',
        'remove' => 'glyphicon glyphicon-remove',
        'add' => 'glyphicon glyphicon-plus',
        'clone' => 'glyphicon glyphicon-duplicate',
    ],
    'fa' => [
        'drag-handle' => 'fa fa-bars',
        'remove' => 'fa fa-times',
        'add' => 'fa fa-plus',
        'clone' => 'fa fa-files-o',
    ],
    'my-amazing-icons' => [
        'drag-handle' => 'my my-bars',
        'remove' => 'my my-times',
        'add' => 'my my-plus',
        'clone' => 'my my-files',
    ]
];

1. 设置首选图标源

    public $iconSource = 'my-amazing-icons';

如果您没有执行上述任何操作，则保留默认行为，假设您正在使用 glyphicons。

文档

您可以在 wiki 中找到完整的文档。

许可

yii2-multiple-input 在 BSD 3-Clause 许可下发布。有关详细信息，请参阅捆绑的 LICENSE.md。