YII2 Select2插件使用小計

先給出文檔的地址： https://www.yiiframework.com/extension/yii-select2

最近在看到不少網站給用戶打標籤，或者是多個下拉選擇以後變成一個標籤。以爲交互不錯！調研發現有開源的yii-select2這個插件，記錄下使用步驟；

1，composer安裝yii-select2插件，執行命令 composer require kartik-v/yii2-widget-select2 "@dev" 便可，以後就會自動加載到項目。

2，筆者這用的YII2框架，因此模板是混寫的代碼以下：

<?php
    echo $form->field($model, 'id')->widget(Select2::classname(), [
            'data' => $list,
            'options' => ['multiple' => true, 'placeholder' => '請選擇...'],
    ])->label('Label Name');
?>

其中變量$model，爲當前controller獲取數據model，$list是下拉列表的數組。kv結構。

3，這個插件在添加的時候沒有問題；可是在編輯的時候，須要使用js再次填充默認值。JavaScript腳本以下：

<script type="text/javascript">
    jQuery(document).ready(function () {
        //編輯時的默認值
        var list = <?= json_encode(array_column($list_default, 'id'))?>;
        var that = jQuery('#div-id');
        //觸發change事件，使數據初始化.
        that.val(list).trigger("change");
    });
</script>

這樣很簡單的就實現的複雜的頁面交互。不用寫複雜的js，也能夠輕鬆搞定多下拉標籤的選擇。

固然此插件功能不侷限於此，它支持異步數據加載模式。因此若是在下拉列表數據量很大的，不能一次加載到前端頁面，就能夠採用異步的模式。根據用戶輸入來檢索對應的選項，這就有點相似咱們在使用搜索引擎的提示相似了。此處也再也不列出異步加載的方式，感興趣能夠本身下文檔或者搜索下相應的例子。