yii2 컴포넌트의 드롭다운 상자 검색 기능에 대한 사례 연구

이 글에서는 주로 yii2 컴포넌트의 검색 기능이 있는 드롭다운 박스의 샘플 코드(yii-select2)를 소개하고 있습니다. 관심 있는 분들은 참고하시면 좋을 것 같습니다.

간단한 작은 기능입니다. 하지만 여전히 사용하는 것은 꽤 재미있습니다. 더 많은 사람들이 더 빠르게 개발하고 즐겁게 프로그래밍할 수 있도록 공유해주세요.

아직 Composer를 사용하지 않으셨다면 제 튜토리얼 공유를 확인해 보세요. Composer는 필수적이고 마법 같은 기능입니다. 그렇긴 하지만, 빨리 Composer를 사용하여 설치해 봅시다.

서두르지 마세요. 먼저 렌더링을 살펴보겠습니다. 그렇지 않으면 기분이 좋지 않거나 계속 읽고 싶은 마음이 들지 않을 것입니다.

뭐야, 관심 없어? 계속 읽어야만 읽으면서 이점을 느낄 수 있습니다.

아주 멋진 느낌이죠. 물론 그 이상입니다. 또한 사용하면 효과도 매우 뛰어납니다.

알겠습니다. 서둘러서 설치하세요. 그렇지 않으면 채팅이 끝이 없을 것입니다.

composer require kartik-v/yii2-widget-select2 "@dev"

여기에 설치된 개발 버전은 개발 버전이고 불안정한 버전이기 때문에 주의하세요. 프로젝트가 git에서 호스팅되는 경우 작곡가 .git 파일을 설치한 후 Vendorkartik-vyii2-widget-select2를 삭제하는 것을 잊지 마세요. 그렇지 않으면 제출할 수 없습니다. 약 5분 정도 기다리면 설치됩니다. 그러면 아래와 같이 사용할 수 있습니다

//如果你的表单是ActiveForm，请使用

use kartik\select2\Select2; 
//$data是键值对数组哦，key-value ,下面所声明的所有$data均为键值对数组，以该数组为例 
$data = [2 => 'widget', 3 => 'dropDownList', 4 => 'yii2']; 
echo $form->field($model, 'title')->widget(Select2::classname(), [ 
  'data' => $data, 
  'options' => ['placeholder' => '请选择 ...'], 
]);

//如果你的表单是非ActiveForm,可以参考下面的

use kartik\select2\Select2; 
echo Select2::widget([ 'name' => 'title', 
  'data' => $data, 
  'options' => ['placeholder' => '请选择...'] 
]);

ActiveForm에 의해 생성되지 않으므로 기본적으로 선택해야 합니다. 값만 추가하면 됩니다.

use kartik\select2\Select2; 
echo Select2::widget([ 
  'name' => 'title', 
  'value' => 2, 
  'data' => $data, 
  'options' => ['placeholder' => '请选择...'] 
]);

그러나 양식이 ActiveForm에 의해 생성되었지만 필드가 테이블 필드가 아닌 경우가 많습니다. 위의 예를 들어보면 $model->title = ['title1', 'title2']만 지정하면 됩니다.

기본적으로는 매우 간단하게 구현할 수 있습니다. 추가된 드롭다운 선택 및 검색 기능. 그런데 또 a가 나왔는데 이게 바로 우리가 생각한 사실인데, 편집자가 '한 번에 하나씩 선택하기엔 너무 번거롭다'고 하더군요. 아? ZB 트릭을 구현하려면 정말 간단하고 한 줄의 코드로 해결할 수 있습니다.

echo $form->field($model, 'title')->widget(Select2::classname(), [ 
  'data' => $data, 
  'options' => ['multiple' => true, 'placeholder' => '请选择 ...'], 
]);
#多选的添加默认值同上

예리한 눈으로 알아차리고 다중 옵션을 추가했습니다. 비ActiveForm으로 생성된 양식은 동일하게 작동합니다.

어떤 효과가 있는지 살펴보겠습니다.

이제 NB노래 부르며 즐겁게 집에 갈 수 있겠네요

잠깐, 뭔가 잊어버린 것 같은데 눈썰미 좋은 친구들은 $data가 우리가 미리 준비한 데이터라는 걸 눈치채셨을지도 모르겠네요 , 여러분 데이터의 양이 너무 많으면 사람이 죽을 수도 있다고 하더군요. 그러면 비동기 검색 결과를 구현하는 방법을 살펴보겠습니다. 예를 들어, 이제 특정 책 제목을 쿼리하려고 하는데 책의 데이터 양이 약 100만 개에 달합니다. 이를 위해서는 검색 결과를 기반으로 드롭다운 상자에서 데이터를 비동기적으로 가져와야 합니다. 계속해서 자세한 설명은 나중에 하겠습니다.

자, 비동기 검색 기능을 사용하는 방법을 살펴보겠습니다. 특히 데이터를 연관시킬 때 매우 유용합니다. 사용하기가 매우 쉽습니다.

기본 사용법에 대해서는 자세히 설명하지 않겠습니다. 위 내용을 읽어보시고 여기서 계속 이야기하겠습니다.

먼저 비동기 검색 효과를 미리 살펴보겠습니다

사진에 표시된 부분은 우리가 입력한 키워드로 검색되는 부분이니 참고해주세요. 비동기 검색 효과는 스크린샷에서는 안보이실 것 같은데요. .효과와 애니메이션을 만드는 방법을 모르겠습니다. 구체적인 효과가 무엇인지 알려주실 수 있습니까? 이것은 대부분의 사람들이 이해할 수 있을 뿐이라고 믿습니다. 말로 표현해보세요. 좋습니다. 이제 코드로 이동하여 구체적인 작업을 살펴보겠습니다.

// view层
use kartik\select2\Select2;
use yii\web\JsExpression;

<?php
  echo $form->field($model, &#39;title&#39;)->widget(Select2::classname(), [
    &#39;options&#39; => [&#39;placeholder&#39; => &#39;请输入标题名称 ...&#39;],
    &#39;pluginOptions&#39; => [
      &#39;placeholder&#39; => &#39;search ...&#39;,
      &#39;allowClear&#39; => true,
      &#39;language&#39; => [
        &#39;errorLoading&#39; => new JsExpression("function () { return &#39;Waiting...&#39;; }"),
      ],
      &#39;ajax&#39; => [
        &#39;url&#39; => &#39;这里是提供数据源的接口&#39;,
        &#39;dataType&#39; => &#39;json&#39;,
        &#39;data&#39; => new JsExpression(&#39;function(params) { return {q:params.term}; }&#39;)
      ],
      &#39;escapeMarkup&#39; => new JsExpression(&#39;function (markup) { return markup; }&#39;),
      &#39;templateResult&#39; => new JsExpression(&#39;function(res) { return res.text; }&#39;),
      &#39;templateSelection&#39; => new JsExpression(&#39;function (res) { return res.text; }&#39;),
    ],
  ]);
?>

위 코드는 직접 복사하여 사용할 수 있으며, 수정해야 할 유일한 것은 ajax에서 해당 URL 주소입니다. 컨트롤러 레이어 코드가 어떻게 데이터를 제공하는지 살펴보겠습니다.

rreee

위 내용은 yii2 컴포넌트의 드롭다운 상자 검색 기능에 대한 사례 연구의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!