在kartik Select2 yii2中添加字幕

Question

我有一个包含这样字段的数据库表

posts

桌子

'id'
'group_id'
'name'

我将此表显示为 kartik Select2 小部件中的列表

$form->field($model, 'post')
    ->widget(
        \kartik\select2\Select2::className(),
        [
            'data' => ArrayHelper::map(Post::find()->all(), 'id', 'name'),
            'options' => [
                'placeholder' => \Yii::t('modules', 'Choose post'),
                'multiple' => true
            ],
            'pluginOptions' => [
                'allowClear' => true,
            ],
        ]
    )->label('');

现在我在列表中显示了表格中一行中的所有帖子

但是我这个表中有一个

group_id

字段，以及对应的

groups

表

'id'
'name'

如何才能使

name

表中的

groups

字段在选择中显示为副标题，并且所有记录分别根据具有相应副标题的

group_id

进行分组？

我尝试了类似的操作，但最终在列表中多次出现相同的组名称和相同的帖子名称

$posts = ArrayHelper::map(Post::find()->all(), 'id', 'name');
$groups = Group::find()->all();

foreach ($posts as $post) {
    $groups = $groups[$post->group_id] ?? null;
    if (is_null($groups)) {
        $result[$post->id] = $post->name;
    } else {
        $line = [];
        foreach ($groups as $group) {
            $line[$post->group_id . '-' . $group->id] = $group->name;
        }
        $result[$post->name] = $line;
    }
}

Answer 1

向 Yii2 中的 Kartik Select2 小部件中的项目添加字幕或工具提示对于在用户悬停或选择选项时向用户提供附加信息非常有用。不幸的是，截至 2021 年 9 月我的最后一次知识更新，Kartik Select2 小部件不直接支持开箱即用的字幕或工具提示。但是，您可以通过自定义小部件并使用一些 JavaScript/jQuery 来实现此效果。

以下是您可以如何解决此问题的总体概述：

自定义数据格式：修改您提供给 Select2 小部件的项目的数据格式。您不仅需要提供带有文本和值的项目数组，还需要包含字幕/工具提示的附加数据。

修改小部件配置：在视图文件（通常是创建或更新视图）中，使用修改后的数据格式和必要的配置选项设置 Kartik Select2 小部件。您需要包含一个用于呈现字幕/工具提示的模板。

自定义 JavaScript/jQuery 代码：添加 JavaScript/jQuery 代码以增强 Select2 小部件的行为。当用户与小部件交互时，此代码将处理渲染字幕/工具提示。

这是一个帮助您入门的基本示例：

假设您有一个名为 Item 的模型，具有 id、name 和 description 属性，并且您希望将名称显示为主要文本，将描述显示为副标题/工具提示。

1.在控制器操作中，获取数据并将其传递给视图：

public function actionCreate()
{
    $items = Item::find()->all();

    return $this->render('create', [
        'items' => $items,
    ]);
}

2. 在您的创建视图中，设置 Kartik Select2 小部件

   echo $form->field($model, 'item_ids')->widget(Select2::classname(), ['data' => \yii\helpers\ArrayHelper::map($items, 'id', 'name'), // Main text
   'options' => ['multiple' => true, 'placeholder' => 'Select items...'],
   'pluginOptions' => [
       'templateResult' => new \yii\web\JsExpression('function(item) {
           if (!item.id) { return item.text; }
           return $("<span>" + item.text + "</span><div>" + item.description + "</div>");
       }'),
       'escapeMarkup' => new \yii\web\JsExpression('function(markup) {
           return markup;
       }'),
   ],]);