Kartik Select 2 - 以编程方式更改倍数
Kartik Select 2 - Programatically changing multiple
我有一个 yii2 activeform,其中表单的功能可以根据表单中的其他内容进行更改。所以,我有一个 clubs 字段,在某些情况下可以是多个,但在其他情况下不能是多个。
<?= $form->field($model, 'clubs')->widget(\kartik\widgets\Select2::classname(), [
'data' => $club_data,
'hideSearch' => false,
'options' => ['placeholder' => 'Add Club(s)'],
'pluginOptions' => [
'allowClear' => true,
'multiple' => true,
'minimumInputLength' => 3,
'ajax' => [
'url' => 'web/index.php?r=clubs/clubslist',
'dataType' => 'json',
'data' => new JsExpression('function(params) { return {q:params.term}; }'),
],
],
])->label('Club(s)'); ?>
我需要以编程方式将多个 pluginOption 更改为 true 和 false。这应该是在用户进入表单时,但也应该是在表单上的下拉列表发生更改时立即发生。我可以在用户最初进入表单时执行此操作,但在更改另一个下拉列表时不能立即执行此操作。
我做了单独的字段,一个实际上链接到数据库中的一个字段,另一个没有,这种工作但它远非优雅!
我查看了 kartik select2 文档和标准 jquery select2 文档,但我找不到任何东西。任何帮助或指点将不胜感激。
参考
几个月前我在开发一个 Yii2-formwizard 插件,当时我遇到了提供表格功能和克隆字段的情况,当涉及到使用第 3 方插件时,如 Select2
和 Datepicker
我想出了以下代码以及许多其他代码(因为另一部分与您的问题无关,所以不添加它)。
解决问题的方法
Kartik-select2 的工作方式是将 select2 plugin-specific 选项存储在您使用 select2 的元素的 data-krajee-select2
属性中。
主题或说 Kartik 的 plugin-specific 选项,如 theme
和其他选项保存在变量中,该变量的名称保存在 data-s2-options
属性中。您可以在您使用它的页面的 view-source 中查找它们。
解决方案
所以你需要做的是
步骤
- 获取应用的选项
- Add/Update选项
- 应用回选项
由于您只是添加了一个字段而不是另一个字段,它会改变选择者的选择,我将演示一个示例,您可以在其中将 select2 的行为从 multiple
更改为 single
使用 2 个不同的按钮,单击相关按钮,select2 将相应地工作。您可以根据需要调整 javascript 代码。
但是 在我添加任何代码之前你需要修复一件事,当你使用 [=21= 时你不需要主要的 data
选项] 选项里面 plugin options
。换句话说,它对您的 select2 没有任何影响,只会增加页面加载时间,您应该将其删除。
您的 select2 应该如下所示,我在 select2 的 options
中添加了 id
作为示例,您可以将其更改为活动表单格式的名称,如 model-field_name
格式,如果你喜欢,但不要忘记也更改 javascript 代码中的 id
<?php echo $form->field($model, 'clubs')->widget(\kartik\widgets\Select2::classname(), [
'hideSearch' => false,
'options' => ['placeholder' => 'Add Club(s)','id'=>'clubs'],
'pluginOptions' => [
'allowClear' => true,
'multiple' => true,
'minimumInputLength' => 3,
'ajax' => [
'url' => 'web/index.php?r=clubs/clubslist',
'dataType' => 'json',
'data' => new JsExpression('function(params) { return {q:params.term}; }')
]
]
])->label('Club(s)');?>
在您的页面上添加以下按钮
echo Html::button('multiple', ['class' => 'btn btn-info', 'id' => 'multi']);
echo Html::button('single', ['class' => 'btn btn-info', 'id' => 'single']);
神奇的是,将它添加到您的视图顶部
$js = <<<JS
var element=$("#clubs");
$('#multi').on('click',function(e){
//reset select2 values if previously selected
element.val(null).trigger('change');
//get plugin options
let dataSelect = eval(element.data('krajee-select2'));
//get kartik-select2 options
let krajeeOptions = element.data('s2-options');
//add your options
dataSelect.multiple=true;
//apply select2 options and load select2 again
$.when(element.select2(dataSelect)).done(initS2Loading("clubs", krajeeOptions));
});
$('#single').on('click',function(e){
element.val(null).trigger('change');
let dataSelect = eval(element.data('krajee-select2'));
let krajeeOptions = element.data('s2-options');
dataSelect.multiple=false;
$.when(element.select2(dataSelect)).done(initS2Loading("clubs", krajeeOptions));
});
JS;
$this->registerJs($js, \yii\web\View::POS_READY);
现在,如果您的 select2 正常工作,请单击 multiple 按钮,您将看到 select2 启用了多项选择,当单击 single 时 按钮。
希望对您有所帮助。
我有一个 yii2 activeform,其中表单的功能可以根据表单中的其他内容进行更改。所以,我有一个 clubs 字段,在某些情况下可以是多个,但在其他情况下不能是多个。
<?= $form->field($model, 'clubs')->widget(\kartik\widgets\Select2::classname(), [
'data' => $club_data,
'hideSearch' => false,
'options' => ['placeholder' => 'Add Club(s)'],
'pluginOptions' => [
'allowClear' => true,
'multiple' => true,
'minimumInputLength' => 3,
'ajax' => [
'url' => 'web/index.php?r=clubs/clubslist',
'dataType' => 'json',
'data' => new JsExpression('function(params) { return {q:params.term}; }'),
],
],
])->label('Club(s)'); ?>
我需要以编程方式将多个 pluginOption 更改为 true 和 false。这应该是在用户进入表单时,但也应该是在表单上的下拉列表发生更改时立即发生。我可以在用户最初进入表单时执行此操作,但在更改另一个下拉列表时不能立即执行此操作。
我做了单独的字段,一个实际上链接到数据库中的一个字段,另一个没有,这种工作但它远非优雅!
我查看了 kartik select2 文档和标准 jquery select2 文档,但我找不到任何东西。任何帮助或指点将不胜感激。
参考
几个月前我在开发一个 Yii2-formwizard 插件,当时我遇到了提供表格功能和克隆字段的情况,当涉及到使用第 3 方插件时,如 Select2
和 Datepicker
我想出了以下代码以及许多其他代码(因为另一部分与您的问题无关,所以不添加它)。
解决问题的方法
Kartik-select2 的工作方式是将 select2 plugin-specific 选项存储在您使用 select2 的元素的 data-krajee-select2
属性中。
主题或说 Kartik 的 plugin-specific 选项,如 theme
和其他选项保存在变量中,该变量的名称保存在 data-s2-options
属性中。您可以在您使用它的页面的 view-source 中查找它们。
解决方案
所以你需要做的是
步骤
- 获取应用的选项
- Add/Update选项
- 应用回选项
由于您只是添加了一个字段而不是另一个字段,它会改变选择者的选择,我将演示一个示例,您可以在其中将 select2 的行为从 multiple
更改为 single
使用 2 个不同的按钮,单击相关按钮,select2 将相应地工作。您可以根据需要调整 javascript 代码。
但是 在我添加任何代码之前你需要修复一件事,当你使用 [=21= 时你不需要主要的 data
选项] 选项里面 plugin options
。换句话说,它对您的 select2 没有任何影响,只会增加页面加载时间,您应该将其删除。
您的 select2 应该如下所示,我在 select2 的 options
中添加了 id
作为示例,您可以将其更改为活动表单格式的名称,如 model-field_name
格式,如果你喜欢,但不要忘记也更改 javascript 代码中的 id
<?php echo $form->field($model, 'clubs')->widget(\kartik\widgets\Select2::classname(), [
'hideSearch' => false,
'options' => ['placeholder' => 'Add Club(s)','id'=>'clubs'],
'pluginOptions' => [
'allowClear' => true,
'multiple' => true,
'minimumInputLength' => 3,
'ajax' => [
'url' => 'web/index.php?r=clubs/clubslist',
'dataType' => 'json',
'data' => new JsExpression('function(params) { return {q:params.term}; }')
]
]
])->label('Club(s)');?>
在您的页面上添加以下按钮
echo Html::button('multiple', ['class' => 'btn btn-info', 'id' => 'multi']);
echo Html::button('single', ['class' => 'btn btn-info', 'id' => 'single']);
神奇的是,将它添加到您的视图顶部
$js = <<<JS
var element=$("#clubs");
$('#multi').on('click',function(e){
//reset select2 values if previously selected
element.val(null).trigger('change');
//get plugin options
let dataSelect = eval(element.data('krajee-select2'));
//get kartik-select2 options
let krajeeOptions = element.data('s2-options');
//add your options
dataSelect.multiple=true;
//apply select2 options and load select2 again
$.when(element.select2(dataSelect)).done(initS2Loading("clubs", krajeeOptions));
});
$('#single').on('click',function(e){
element.val(null).trigger('change');
let dataSelect = eval(element.data('krajee-select2'));
let krajeeOptions = element.data('s2-options');
dataSelect.multiple=false;
$.when(element.select2(dataSelect)).done(initS2Loading("clubs", krajeeOptions));
});
JS;
$this->registerJs($js, \yii\web\View::POS_READY);
现在,如果您的 select2 正常工作,请单击 multiple 按钮,您将看到 select2 启用了多项选择,当单击 single 时 按钮。
希望对您有所帮助。