Yii2下的select2使用

Cristic 發布于2019-06-28 13:40 / 1359人閱讀

摘要：新手，不擅長寫，純粹只是分享一下自己遇到的問題供大家參考一下這個插件，就是帶搜索功能的下拉選擇框效果如圖使用前先確定自己的項目安裝了，如果沒有的話就用安裝一下使用的時候先在頭部引用插件如果表單是，可以使用下面代碼是鍵值對數組，下面所聲明的

新手，不擅長寫js，純粹只是分享一下自己遇到的問題供大家參考一下

select2這個插件，就是帶搜索功能的下拉選擇框
效果如圖：

使用前先確定自己的項目安裝了select2，如果沒有的話就用composer安裝一下

使用的時候先在頭部引用插件

use kartikselect2Select2;

如果表單是ActiveForm，可以使用下面代碼

$data是鍵值對數組，key-value ,下面所聲明的所有$data均為鍵值對數組，以該數組為例

$data = [2 => "widget", 3 => "dropDownList", 4 => "yii2"]; 
$form->field($model, "title")->widget(Select2::classname(), [  
    "data" => $data, 
    "options" => ["placeholder" => "請選擇 ..."], 
]);

如果你的表單是非ActiveForm,可以參考下面的

Select2::widget([ "name" => "title", 
    "data" => $data, 
    "options" => ["placeholder" => "請選擇..."] 
]);

非ActiveFomr生成的更新數據的時候就需要默認選中，好辦，加value值即可

Select2::widget([ 
    "name" => "title", 
    "value" => 2, 
    "data" => $data, 
    "options" => ["placeholder" => "請選擇..."] 
]);

如果想實現多選的話，在options中加入一個multiple選項，即

Select2::widget([ 
    "name" => "title", 
    "value" => 2, 
    "data" => $data, 
    "options" => ["multiple" => true, "placeholder" => "請選擇..."] 
]);

在實際項目中，我把data直接從model層獲取來，并加上了id

$form->field($model, "back_reason")->widget(Select2::classname(),
    [
        "name"  => "search",
        "value" => isset($params["company_id"])?$params["company_id"]:"",
        "data"  => yiihelpersArrayHelper::map(appmodelsBackReason::find()->where(["level"=>appmodelsBackReason::LEVEL_2])->asArray()->all(),"id","reason"),
        "options" => ["placeholder" => "退稿原因搜索","style"=>"width:110px;","id"=>"searchreason",],
        "pluginOptions" => [
            "allowClear" => true,
            "width" => "220px",
        ],
    ])

正常情況下這樣就可以使用了，但是如果是在bootstrap的模態框中使用select2插件的話，會出現無法輸入的問題，插件一直無法獲取焦點

1.首先查看主div中是否有tabindex="-1"

2.重寫enforceFocus方法

如果想實現異步搜索功能

1.view層，代碼可直接復制使用，唯獨需要修改的就是ajax里對應的url地址

use kartikselect2Select2;
use yiiwebJsExpression;
field($model, "title")->widget(Select2::classname(), [
        "options" => ["placeholder" => "請輸入標題名稱 ..."],
        "pluginOptions" => [
            "placeholder" => "search ...",
            "allowClear" => true,
            "language" => [
                "errorLoading" => new JsExpression("function () { return "Waiting..."; }"),
            ],
            "ajax" => [
                "url" => "這里是提供數據源的接口",
                "dataType" => "json",
                "data" => new JsExpression("function(params) { return {q:params.term}; }")
            ],
            "escapeMarkup" => new JsExpression("function (markup) { return markup; }"),
            "templateResult" => new JsExpression("function(res) { return res.text; }"),
            "templateSelection" => new JsExpression("function (res) { return res.text; }"),
        ],
    ]);
? >

2.controller層，負責提供數據

public function actionSearchTitle ($q)
{
    Yii::$app->response->format = yiiwebResponse::FORMAT_JSON;
    $out = ["results" => ["id" => "", "text" => ""]];
    if (!$q) {
        return $out;
    }

    $data = Article::find()
                ->select("id, title as text")
                ->andFilterWhere(["like", "title", $q])
                ->limit(50)
                ->asArray()
                ->all();
                
    $out["results"] = array_values($data);

    return $out;
}

云服務器 GPU云服務器 yii2緩存使用 yii2asset使用cdn select2 select2 jquery

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/25795.html

Yii2下的select2使用

摘要：新手，不擅長寫，純粹只是分享一下自己遇到的問題供大家參考一下這個插件，就是帶搜索功能的下拉選擇框效果如圖使用前先確定自己的項目安裝了，如果沒有的話就用安裝一下使用的時候先在頭部引用插件如果表單是，可以使用下面代碼是鍵值對數組，下面所聲明的新手，不擅長寫js，純粹只是分享一下自己遇到的問題供大家參考一下 select2這個插件，就是帶搜索功能的下拉選擇框效果如圖：showImg(ht...

pingink 2019-08-21 16:20 評論0 收藏0
列表——表頭自定義顯示字段

摘要：今天我就來講講插件的使用，它是如何實現列表表頭自定義顯示字段的，我把我的經驗分享出來，滿足一下不懂英語的人，給你們搭個快車。需求分析實現列表表頭自定義顯示字段，自定義表頭排序。序言 Yii2框架的擴展性能真的很不錯，很多效果都可以通過插件去實現，你想不到的老外都幫你想好了，于是，人群中就流傳了這么一句話：效果不會寫不要緊，會用插件也不錯。GitHub是一個龐大而且開放的資源庫，平時有...

Yangyang 2019-07-01 12:15 評論0 收藏0
YII2通過composer優化vendor

摘要：本文討論通過工具安裝框架并優化過程中遇到的問題，約定讀者對基本原理有一定了解，并且有安裝框架的實際經驗。這個命令是優化包的關鍵一環。命令要謹慎使用。本文討論通過composer工具安裝Yii2框架并優化Vendor過程中遇到的問題，約定讀者對composer基本原理有一定了解，并且有安裝Yii2框架的實際經驗。在Yii2社區里經常會遇到一類問題，那就是安裝完官方推薦的版本后1 ...

dcr309duan 2019-06-28 13:35 評論0 收藏0
select2 和 ajax的坑

select2，一款帶多選功能，樣式更加好看的select插件。下方記錄坑，前方高能. 要用ajax發請求并且為select2賦初始值 $.ajax({ url : _ctx+/basInfo/listPsinfoData, data : page=1&rows=9999&flag=...

VEIGHTZ 2019-08-02 15:22 評論0 收藏0