CasCade Dropdown in Yii2 with DepDrop widget

DepDrop widget Yii2

با استفاده از این پلاگین شما می توانید dropdown های ,وابسته به هم و در چند سطح داشته باشید .

مثال پر کاربرد آن استفاده از آن در فورم های ثبت نام برای دریافت محل زندگی افراد می باشد.به صورت casCade یا همان آبشاری .
به این صورت که کاربر ابتدا کشور خود را انتخاب می کند
سپس بر اساس گزینه انتخابی استان های آن کشور در دراپ دانی دیگر نمایش داده می شود
پس از تعیین استان بر اساس استان انتخابی شهر های آن در دراپ دان دیگر نمایش داده می شود.

برای نصب DepDrop widget Yii2 :
روش اول:

اجرا کد زیر در مسیر کامپوزر :

$ composer require kartik-v/yii2-widget-depdrop "@dev"

یا

$ php composer.phar require kartik-v/yii2-widget-depdrop "@dev"

روش دوم :
قرار دادن کد زیر در فایل composer.json و سپس اجرای دستور composer update در کامپوزر:

"kartik-v/yii2-widget-depdrop": "@dev"

کد بالا در composer.json قسمت require قرار میگیرد.
مانند کد زیر :

"require": {
"php": ">=5.4.0",
"yiisoft/yii2": ">=2.0.4",
"yiisoft/yii2-bootstrap": "*",
"yiisoft/yii2-swiftmailer": "*",
"mohammad-mahdy/yii2-jdate": "*",
"yiisoft/yii2-jui": "^2.0",
"kartik-v/yii2-widget-depdrop": "@dev"
},

و سپس در کامپوزر :

composer update

CasCade Dropdown in Yii2 with DepDrop widget
پس از نصب ویجت برای استفاده در فورم خود به صورت زیر عمل می کنیم:
نکته:هدف ما این است که دسته بندی هایی که parent_id آنها null هست را در دراپ دان آول
سپس دسته بندی های گزینه انتخاب شده را در دراپ دان دوم
و در آخر دسته بندی های گزینه ی انتخابی آخر را نمایش دهیم.

ابتدا ویجت را صدا می زنیم :
روش اول : اگر kartik yii2-widgets را قبلا نصب نکرده اید به صورت زیر :

use kartik\depdrop\DepDrop ;

در صورتی که از kartik yii2-widgets استفاده کرده اید به صورت زیر صدا بزنید:

use kartik\widgets\DepDrop;

سپس لیست دسته بندی هایی که parent_id آنها null هست را در قالب آرایه در دراپ دان اول قرار می دهیم:

<?php use yii\helpers\ArrayHelper; $depdrop= app\models\BuyCat::find()->where('parent_id is NULL')->All();
$depdrop = ArrayHelper::map($depdrop, 'id', 'title');

echo $form->field($model, 'cat_id[0]')->dropDownList($depdrop, ['id' => 'cat-id']);
?>

هنگامی که کاربر دراپ دان اول را انتخاب نماید id آن که در این جا cat-id هست
از طریق url ای که در دراپ دان دوم قرار دادیم به یک اکشن از کنترلر ما ارسال می شود.
تصویر زیر نتیجه ی مرحله اول کار ما می باشد:

در مرحله بعد DropDown دوم را قرار می دهیم:

echo $form->field($model, 'cat_id[1]')->widget(DepDrop::classname(), [
'options' => ['id' => 'subcat-id'],
'pluginOptions' => [
'depends' => ['cat-id'],
'placeholder' => 'Select...',
'url' => Url::to(['/site/subcat'])
]
]);

در کد بالا با استفاده از depends گزینه انتخابی دراپ دوم دریافت می شود:با id آن که cat-id می باشد
با استفاده از url به اکشن subcat در کنتلر site ارسال می شود.
توجه داشته باشید که با استفاده از id دراپ دان دوم subcat-id گزینه ی انتخابی این دراپ دان به دراپ دان سوم می رود.

CasCade Dropdown in Yii2 with DepDrop widget
اکنون در اکشن subcat کد زیر را قرار می دهیم.
که بر اساس گزینه ی ارسال شده لیست دسته بندی های آن را در قالب یک آرایه به صورت json باز می گرداند

use yii\helpers\Json;
public function actionSubcat() {
$out = [];
if (isset($_POST['depdrop_parents'])) {
$parents = $_POST['depdrop_parents'];
if ($parents != null) {
$cat_id = $parents[0];
$out = [];
$d = "";
$all = \app\models\BuyCat::find()->where(["parent_id" => $cat_id])->all();
foreach ($all as $key => $value) {
$out[] = [
'id' => $value->id, 'name' => $value->title
];
if ($key == 0) {
$d = $value->id;
}
}
echo Json::encode(['output' => $out, 'selected' => $d]);
return;
}
}
echo Json::encode(['output' => '', 'selected' => '']);
}

اینکار را برای دراپ دان سوم نیز انجام می دهیم .

ابتدا در فورم دراپ دان سوم را قرار می دهیم:

echo $form->field($model, 'cat_id[2]')->widget(DepDrop::classname(), [
'options' => ['id' => 'subcat-id2'],
'pluginOptions' => [
'depends' => ['subcat-id'],
'placeholder' => 'Select...',
'url' => Url::to(['/site/prod'])
]
]);

سپس در کنترلر اکشن prod که در دراپ دان سوم اشاره شده است را در کنترلر قرار می دهیم

public function actionProd() {
$out = [];
if (isset($_POST['depdrop_parents'])) {
$ids = $_POST['depdrop_parents'];
$cat_id = empty($ids[0]) ? null : $ids[0];
$subcat_id = empty($ids[1]) ? null : $ids[1];
if ($cat_id != null) {
$all = \app\models\BuyCat::find()->where(["parent_id" => $cat_id,])->all();
$out = [];
foreach ($all as $key => $value) {
$out[] = [
'id' => $value->id, 'name' => $value->title
];
}
echo Json::encode(['output' => $out, 'selected' => ""]);
return;
}
}
echo Json::encode(['output' => '', 'selected' => '']);
}

و در نهایت تصویر زیر :

برای آشنایی بیشتر با این ویجت و مشاهده ی مثال های دیگر به لینک زیر مراجعه کنید :
DepDrop Widget