Yii2下的select2使用

pingink 发布于2019-08-21 16:20 / 1823人阅读

摘要：新手，不擅长写，纯粹只是分享一下自己遇到的问题供大家参考一下这个插件，就是带搜索功能的下拉选择框效果如图使用前先确定自己的项目安装了，如果没有的话就用安装一下使用的时候先在头部引用插件如果表单是，可以使用下面代码是键值对数组，下面所声明的

新手，不擅长写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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88415.html

Yii2下的select2使用

摘要：新手，不擅长写，纯粹只是分享一下自己遇到的问题供大家参考一下这个插件，就是带搜索功能的下拉选择框效果如图使用前先确定自己的项目安装了，如果没有的话就用安装一下使用的时候先在头部引用插件如果表单是，可以使用下面代码是键值对数组，下面所声明的新手，不擅长写js，纯粹只是分享一下自己遇到的问题供大家参考一下 select2这个插件，就是带搜索功能的下拉选择框效果如图：showImg(ht...

Cristic 2019-06-28 13:40 评论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