成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Yii2下的select2使用

pingink / 1832人閱讀

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

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

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

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

使用的時(shí)候先在頭部引用插件

use kartikselect2Select2;

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

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

$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生成的更新數(shù)據(jù)的時(shí)候就需要默認(rèn)選中，好辦，加value值即可

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

如果想實(shí)現(xiàn)多選的話，在options中加入一個(gè)multiple選項(xiàng)，即

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

在實(shí)際項(xiàng)目中，我把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的模態(tài)框中使用select2插件的話，會出現(xiàn)無法輸入的問題，插件一直無法獲取焦點(diǎn)

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

2.重寫enforceFocus方法

如果想實(shí)現(xiàn)異步搜索功能

1.view層，代碼可直接復(fù)制使用，唯獨(dú)需要修改的就是ajax里對應(yīng)的url地址

use kartikselect2Select2;
use yiiwebJsExpression;
field($model, "title")->widget(Select2::classname(), [
        "options" => ["placeholder" => "請輸入標(biāo)題名稱 ..."],
        "pluginOptions" => [
            "placeholder" => "search ...",
            "allowClear" => true,
            "language" => [
                "errorLoading" => new JsExpression("function () { return "Waiting..."; }"),
            ],
            "ajax" => [
                "url" => "這里是提供數(shù)據(jù)源的接口",
                "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層，負(fù)責(zé)提供數(shù)據(jù)

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;
}

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/88415.html

相關(guān)文章

  • Yii2下的select2使用

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

    Cristic 評論0 收藏0

  • 列表——表頭自定義顯示字段

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

    Yangyang 評論0 收藏0

  • YII2通過composer優(yōu)化vendor

    摘要：本文討論通過工具安裝框架并優(yōu)化過程中遇到的問題，約定讀者對基本原理有一定了解，并且有安裝框架的實(shí)際經(jīng)驗(yàn)。這個(gè)命令是優(yōu)化包的關(guān)鍵一環(huán)。命令要謹(jǐn)慎使用。 本文討論通過composer工具安裝Yii2框架并優(yōu)化Vendor過程中遇到的問題，約定讀者對composer基本原理有一定了解，并且有安裝Yii2框架的實(shí)際經(jīng)驗(yàn)。 在Yii2社區(qū)里經(jīng)常會遇到一類問題，那就是 安裝完官方推薦的版本后1 ...

    dcr309duan 評論0 收藏0

  • select2 和 ajax的坑

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

    VEIGHTZ 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<