Yii2使用dropdownlist實現(xiàn)地區(qū)三級聯(lián)動功能的方法
來源:易賢網 閱讀:769 次 日期:2016-08-12 15:18:55
溫馨提示:易賢網小編為您整理了“Yii2使用dropdownlist實現(xiàn)地區(qū)三級聯(lián)動功能的方法”,方便廣大網友查閱!

本文實例講述了Yii2使用dropdownlist實現(xiàn)地區(qū)三級聯(lián)動功能的方法。分享給大家供大家參考,具體如下:

視圖部分:

<?php

use yii\helpers\Url;

use yii\widgets\ActiveForm;

use yii\helpers\ArrayHelper;

use yii\helpers\Html;

/* @var $this yii\web\View */

/* @var $model common\search\service\ItemSearch */

/* @var $form yii\widgets\ActiveForm */

?>

<div class="row">

  <div class="item-search">

    <?php $form = ActiveForm::begin([

      'action' => ['index'],

      'method' => 'get',

      'options' => ['class' => 'form-inline']

    ]); ?>

    <?= $form->field($model, 'cityName', ['options' => ['class' => 'form-group col-lg-2']])->dropDownList(ArrayHelper::map($cities, 'id', 'name'), ['prompt' => '請選擇城市'])->label('請選擇城市', ['class' => 'sr-only']) ?>

    <?= $form->field($model, 'areaName', ['options' => ['class' => 'form-group col-lg-2']])->dropDownList(ArrayHelper::map($areas, 'id', 'name'), ['prompt' => '請選擇區(qū)縣'])->label('請選擇區(qū)縣', ['class' => 'sr-only']) ?>

    <?= $form->field($model, 'communityName', ['options' => ['class' => 'form-group col-lg-2']])->dropDownList(ArrayHelper::map($communities, 'id', 'name'), ['prompt' => '請選擇小區(qū)'])->label('請選擇小區(qū)', ['class' => 'sr-only']) ?>

    <div class="col-lg-2 col-lg-offset-1">

      <input class="form-control" id="keyword" placeholder="請輸入小區(qū)名" value="" />

    </div>

    <div class="col-lg-1">

      <button type="button" id="search-community" class="btn btn-info">搜索</button>

    </div>

    <p></p>

    <div class="form-group col-lg-1 pull-right">

      <?= Html::submitButton('搜索', ['class' => 'btn btn-primary']) ?>

    </div>

    <?php ActiveForm::end(); ?>

  </div>

</div>

<p> </p>

<?php

$this->registerJs('

  //市地址改變

  $("#itemsearch-cityname").change(function() {

    //市id值

    var cityid = $(this).val();

    $("#itemsearch-areaname").html("<option value=\"0\">請選擇區(qū)縣</option>");

    $("#itemsearch-communityname").html("<option value=\"0\">請選擇小區(qū)</option>");

    if (cityid > 0) {

      getArea(cityid);

    }

  });

  //區(qū)地址改變

  $("#itemsearch-areaname").change(function() {

    //區(qū)id值

    var areaid = $(this).val();

    $("#itemsearch-communityname").html("<option value=\"0\">請選擇小區(qū)</option>");

    if (areaid > 0) {

      getCommunity(areaid);

    }

  });

  //獲取市下面的區(qū)列表

  function getArea(id)

  {

    var href = "' . Url::to(['/service/base/get-area-list'], true). '";

    $.ajax({

      "type" : "GET",

      "url"  : href,

      "data" : {id : id},

      success : function(d) {

        $("#itemsearch-areaname").append(d);

      }

    });

  }

  //獲取區(qū)下面的小區(qū)列表

  function getCommunity(id)

  {

    var href = "' . Url::to(['/service/base/get-community-list'], true) . '";

    $.ajax({

      "type" : "GET",

      "url"  : href,

      "data" : {id : id},

      success : function(d) {

        $("#itemsearch-communityname").append(d);

      }

    });

  }

  //搜索小區(qū)

  $("#search-community").click(function() {

    var word  = $("#keyword").val();

    var areaid = $("#itemsearch-areaname option:selected").val();

    var href  = "' . Url::to(['/service/base/search-community'], true) . '";

    if (areaid > 0) {

      $.ajax({

        "type" : "GET",

        "url"  : href,

        "data" : {id : areaid, word : word},

        success : function(d) {

          $("#itemsearch-communityname").html(d);

        }

      });

    }

  });

');

?>

模型部分:

就是我們常用的ajax請求,當然php中需要直接組合成<option value=""></option>這樣的結構直接用,$form->field($model, $var)中的變量數(shù)據(jù)表中不一定有,得在模型中自己定義,并設置安全字段,而且搜索模型也可能需要修改成自己需要的樣子,模型可能要這樣:

class HuangYeError extends \yii\db\ActiveRecord

{

  public $cityName;

  public $areaName;

  public $communityName;

  public $group;

  public $cate;

  /**

   * @inheritdoc

   */

  public static function tableName()

  {

    return 'll_hy_huangye_error';

  }

  public static function getDb()

  {

    return Yii::$app->get('dbnhuangye');

  }

}

之前是多表,需要使用jjoinWith()連表,后來被我全部轉化為單表了,多表實在是慢,能轉化成單表就用單表吧:

class HuangYeErrorSearch extends HuangYeError

{

  const PAGE_SIZE = 20;

  public $communityName;

  public $startTime;

  public $endTime;

  /**

   * @inheritdoc

   */

  public function rules()

  {

    return [

      [['id', 'serviceid', 'userid', 'categoryid', 'communityid', 'sortorder', 'ctime', 'utime', 'status'], 'integer'],

      [['username', 'name', 'logo', 'phone', 'address', 'content', 'error', 'communityName', 'startTime', 'endTime'], 'safe'],

    ];

  }

  /**

   * @inheritdoc

   */

  public function scenarios()

  {

    // bypass scenarios() implementation in the parent class

    return Model::scenarios();

  }

  /**

   * Creates data provider instance with search query applied

   *

   * @param array $params

   *

   * @return ActiveDataProvider

   */

  public function search($params)

  {

    $query = HuangYeError::find();

    //status == 9 刪除狀態(tài)

    $condition = ' `status` != :status';

    $p[':status'] = 9;

    $query->where($condition, $p);

    $dataProvider = new ActiveDataProvider([

      'query' => $query,

      'pagination' => [

        'pageSize' => self::PAGE_SIZE,

      ],

    ]);

    $this->load($params);

    if (!$this->validate()) {

      // uncomment the following line if you do not want to any records when validation fails

      // $query->where('0=1');

      return $dataProvider;

    }

    $query->andFilterWhere([

      'userid' => $this->userid

    ]);

    $query->andFilterWhere(['like', 'username', $this->username])

      ->andFilterWhere(['like', 'name', $this->name])

      ->andFilterWhere(['like', 'phone', $this->phone])

      ->andFilterWhere(['like', 'address', $this->address])

      ->andFilterWhere(['like', 'content', $this->content])

      ->andFilterWhere(['ll_hy_huangye_error.status' => $this->status])

      ->andFilterWhere(['ll_hy_huangye_error.categoryid' => $this->categoryid])

      ->andFilterWhere(['between', 'ctime', strtotime($this->startTime . '0:0:0'), strtotime($this->endTime . '23:59:59')])

      ->andFilterWhere(['like', 'error', $this->error]);

    if (intval($this->communityName)) {

      $query->andFilterWhere(['ll_hy_huangye_error.communityid' => intval($this->communityName)]);

    }

    $order = ' `ctime` DESC';

    $query->orderBy($order);

    return $dataProvider;

  }

}

控制器中寫比較簡單一點,直接調用就行了:

/**

* ajax請求小區(qū)

*

* @param $id

* @return string

*/

public function actionGetCommunityList($id)

{

    $option = '';

    $result = self::getCommunity($id);

    if ($result) {

      foreach ($result as $value) {

        $option .= '<option value="' . $value['id'] . '">' . $value['name'] . '</option>';

      }

    } else {

      $option .= '<option value="0">暫未開通可選擇的小區(qū)</option>';

    }

    echo $option;

}

希望本文所述對大家基于Yii框架的PHP程序設計有所幫助。

更多信息請查看網絡編程

2025國考·省考課程試聽報名

  • 報班類型
  • 姓名
  • 手機號
  • 驗證碼
關于我們 | 聯(lián)系我們 | 人才招聘 | 網站聲明 | 網站幫助 | 非正式的簡要咨詢 | 簡要咨詢須知 | 新媒體/短視頻平臺 | 手機站點 | 投訴建議
工業(yè)和信息化部備案號:滇ICP備2023014141號-1 云南省教育廳備案號:云教ICP備0901021 滇公網安備53010202001879號 人力資源服務許可證:(云)人服證字(2023)第0102001523號
聯(lián)系電話:0871-65099533/13759567129 獲取招聘考試信息及咨詢關注公眾號:hfpxwx
咨詢QQ:1093837350(9:00—18:00)版權所有:易賢網