yii2 gridview省市联动(yii2省市联动)

yii2 gridview省市联动(yii2省市联动)

在Web开发中，省市联动是一个非常常见的需求。在yii2框架中，我们可以使用GridView来实现省市联动的功能。介绍如何使用yii2 GridView来实现省市联动。

1. 准备工作

在开始之前，我们需要准备一些数据。我们需要两个表，一个表存储省份信息，另一个表存储城市信息。这两个表可以使用以下SQL语句创建：

CREATE TABLE `province` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(255) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
CREATE TABLE `city` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(255) NOT NULL,
  `province_id` int(11) NOT NULL,
  PRIMARY KEY (`id`),
  KEY `province_id` (`province_id`),
  CONSTRAINT `city_ibfk_1` FOREIGN KEY (`province_id`) REFERENCES `province` (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

我们需要向这两个表中插入一些数据，例如：

INSERT INTO `province` (`id`, `name`) VALUES
(1, '北京'),
(2, '上海'),
(3, '广东');
INSERT INTO `city` (`id`, `name`, `province_id`) VALUES
(1, '北京市', 1),
(2, '上海市', 2),
(3, '广州市', 3),
(4, '深圳市', 3),
(5, '珠海市', 3);

2. 创建GridView

在创建GridView之前，我们需要先定义一个数据提供器。数据提供器可以使用yii2提供的ActiveDataProvider来实现。以下是一个简单的数据提供器的示例：

“`php

$dataProvider = new ActiveDataProvider([

‘query’ => City::find(),

‘pagination’ => false,

]);

“`

在创建GridView之前，我们还需要定义一个省份下拉框。省份下拉框可以使用yii2提供的Html::dropDownList来实现。以下是一个简单的省份下拉框的示例：

“`php

echo Html::dropDownList(‘province_id’, null, ArrayHelper::map(Province::find()->all(), ‘id’, ‘name’), [

‘prompt’ => ‘请选择省份’,

‘class’ => ‘form-control’,

‘id’ => ‘province-dropdown’,

]);

“`

现在我们可以创建GridView了。GridView可以使用yii2提供的GridView来实现。以下是一个简单的GridView的示例：

“`php

echo GridView::widget([

‘dataProvider’ => $dataProvider,

‘columns’ => [

‘id’,

‘name’,

[

‘attribute’ => ‘province_id’,

‘value’ => ‘province.name’,

‘filter’ => Html::activeDropDownList($searchModel, ‘province_id’, ArrayHelper::map(Province::find()->all(), ‘id’, ‘name’), [

‘prompt’ => ‘全部’,

‘class’ => ‘form-control’,

]),

],

],

]);

“`

在上面的代码中，我们使用了’value’ => ‘province.name’来获取城市所属的省份名称。我们还使用了’filter’来添加省份过滤器，这样我们就可以根据省份来过滤城市了。

3. 实现省市联动

现在我们已经可以显示城市信息了，但是我们还没有实现省市联动。实现省市联动需要使用一些JavaScript代码。以下是一个简单的JavaScript代码的示例：

“`js

$(‘#province-dropdown’).on(‘change’, function() {

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

$.get(‘/city/list’, {province_id: provinceId}, function(data) {

$(‘#city-grid’).yiiGridView(‘applyFilter’, {CitySearch: {province_id: provinceId}});

$(‘#city-dropdown’).html(data);

});

});

“`

在上面的代码中，我们使用了jQuery来监听省份下拉框的change事件。当省份下拉框的值发生改变时，我们向服务器发送一个GET请求，请求城市信息。服务器返回城市信息后，我们使用’applyFilter’来过滤GridView，并使用jQuery来更新城市下拉框的内容。

我们还需要在服务器端实现一个城市列表的接口。以下是一个简单的城市列表接口的示例：

“`php

public function actionList($province_id)

$cities = City::find()->where([‘province_id’ => $province_id])->all();

$options = ArrayHelper::map($cities, ‘id’, ‘name’);

return Html::renderSelectOptions(null, $options);

“`

在上面的代码中，我们根据省份ID查询城市信息，并使用ArrayHelper来生成城市下拉框的选项。我们使用Html::renderSelectOptions来渲染城市下拉框的选项。

如何使用yii2 GridView来实现省市联动。我们准备了一些数据，然后创建了一个数据提供器和一个省份下拉框。接着，我们创建了一个GridView，并实现了省市联动的功能。我们还如何在服务器端实现一个城市列表的接口。希望对大家有所帮助。