hebei-chengben-car/common/widget/LinkmenuWidget.php

<?php
/*
 * 调用示例：  <?php echo  \app\common\widget\LinkmenuWidget::widget(['key_id'=>1,'name'=>'parent_id','level'=>3,'model'=>$model,'emptyTxts'=>['省份','城市','区县'],'value'=>1610,'selectClass'=>'form-select original ','blockClass'=>'mb-3 row','unitClass'=>'col-md-2']);?>
 */
namespace app\common\widget;
use yii\base\Widget;
use app\assets\CoreAsset;
use app\assets\PluginsAsset;
use yii\helpers\Html;
use Yii;
class LinkmenuWidget extends Widget
{
	public $model;
    public $level;
    public $key_id;
    public $name;
    public $value;
    public $id;
    public $blockClass='';
    public $unitClass = '';
    public $selectClass = '';
    public $emptyTxts = [];
    public $dataUrl = '';
    public $selectedIds=[0,0,0,0];
    public $style;
    public $blockStyle;
    public $unitStyle;
    public $space;
    public $is_open;
    public $select_default;
    public $required;
	public function init()
	{

		if(empty($this->name))
		{
			echo '缺少NAME';
			exit;
		}

        if(empty($this->level))
        {
            echo '请设置层级';
            exit;
        }

        if(empty($this->key_id))
        {
            echo '请设置Key Id';
            exit;
        }
        $this->dataUrl = Yii::$app->controller->createRealUrl('ajax/nextlinkmenu');
        if($this->value)$this->selectedIds = \app\models\Linkmenu::getParentMenuIdRs($this->value);

	}
	public function run()
	{
        $this->registerClientScript();
        if(!empty($this->model))
        {
            $modelName = strtolower(basename(str_replace("\\",DIRECTORY_SEPARATOR,get_class($this->model))));
            if(empty($this->id)) $this->id = $modelName.'-'.$this->name;
            echo Html::activeTextInput($this->model, $this->name, ['value'=>$this->value,'id'=>$this->id,'style'=>'display:none','class'=>$this->required.' layui-input', 'lay-verify'=>$this->required, 'data-level'=>$this->level,
'data-verifyid'=>$this->id."_".$this->level]);
        }
        else
        {

            if(empty($this->id)) $this->id = str_replace(array('[',']'),array('-',''),$this->name);
            else  $this->id = str_replace(array('[',']'),array('-',''),$this->id);
            echo "<input type='hidden'  value='".$this->value."' id='".$this->id."' name='".$this->name."'  class='".$this->required." layui-input' lay-verify='".$this->required."' data-level='".$this->level."' data-verifyid='".$this->id."_".$this->level."'>";

        }
        echo "<div id='".$this->id."_block' class='".$this->blockClass."' style='".$this->blockStyle."' >";
        for($i=1;$i<=$this->level;$i++)
        {
            echo "<div class='".$this->unitClass."' style='".$this->unitStyle."'>";
            echo "<select lay-ignore class='".$this->id."_".$i." ".$this->selectClass."' id='".$this->id."_".$i."' name='".$this->id."_".$i."'  >";
            echo "<option value=''>".$this->emptyTxts[$i-1]."</option>";
            echo "</select>";
            echo "</div>";
        }
        echo "</div>";
        $js = <<<JS
        $('#{$this->id}_block').cascadingDropdown({
    selectBoxes: [
        {
            selector: '.{$this->id}_1',
            source: function(request, response) {
                var parent_id = {$this->key_id};
                var data_url = '{$this->dataUrl}';
                $.getJSON(data_url, {parent_id:parent_id}, function(result) {
                    var data = result.data;
                    var selectOnlyOption = data.length >= 1;
                    response($.map(data, function(item, index) {
                        return {
                            label: item.name,
                            value: item.menu_id,
                            selected: item.menu_id=='{$this->selectedIds[0]}'
                        };

                    }));
                });
            },
            onChange: function(event, value, requiredValues, requirementsMet){
                var targetId="{$this->id}_{$this->level}";
                var realId = "{$this->id}";
                var eventTargetId = $(event.target).attr('id');
                if(value=='')
                {
                   $('#'+realId).val('');
                }
                else
                {
                    if(targetId==eventTargetId&&value!='')
                    {
                        $('#'+realId).val(value)
                    }
                }
            }
        },
        {
            selector: '.{$this->id}_2',
            requires: ['.{$this->id}_1'],
            source: function(request, response) {
                var parent_id;
                $.each(request, function(key, val) {
                   parent_id = val;
                });
                var data_url = '{$this->dataUrl}';
                $.getJSON(data_url, {parent_id:parent_id}, function(result) {
                    var data = result.data;
                    var selectOnlyOption = data.length < 1;
                    response($.map(data, function(item, index) {
                        return {
                            label: item.name,
                            value: item.menu_id,
                            selected: item.menu_id=='{$this->selectedIds[1]}'
                        };
                    }));

                });
            },
             onChange: function(event, value, requiredValues, requirementsMet){
                var targetId="{$this->id}_{$this->level}";
                var realId = "{$this->id}";
                var eventTargetId = $(event.target).attr('id');
                if(value=='')
                {
                    $('#'+realId).val('')
                }
                else
                {
                    if(targetId==eventTargetId&&value!='')
                    {
                       $('#'+realId).val(value)
                    }
                }


            }

        },
        {
            selector: '.{$this->id}_3',
            requires: ['.{$this->id}_1', '.{$this->id}_2'],
            requireAll: true,
            source: function(request, response) {
                var parent_id;
                $.each(request, function(key, val) {
                   parent_id = val;
                });
                var data_url = '{$this->dataUrl}';
                $.getJSON(data_url,  {parent_id:parent_id}, function(result) {
                    var data = result.data;
                    response($.map(data, function(item, index) {
                        return {
                            label: item.name,
                            value: item.menu_id,
                            selected: item.menu_id=='{$this->selectedIds[2]}'
                        };
                    }));

                });

            },
            onChange: function(event, value, requiredValues, requirementsMet){
                var targetId="{$this->id}_{$this->level}";
                var realId = "{$this->id}";
                var eventTargetId = $(event.target).attr('id');
                if(value=='')
                {
                    $('#'+realId).val('');
                }
                else
                {
                    if(targetId==eventTargetId&&value!='')
                    {
                       $('#'+realId).val(value)
                    }
                }

            }

        },
        {
            selector: '.{$this->id}_4',
            requires: ['.{$this->id}_1', '.{$this->id}_2', '.{$this->id}_3'],
            requireAll: true,
            source: function(request, response) {
                var parent_id;
                $.each(request, function(key, val) {
                   parent_id = val;
                });
                var data_url = '{$this->dataUrl}';
                $.getJSON(data_url,  {parent_id:parent_id}, function(result) {
                    var data = result.data;
                    response($.map(data, function(item, index) {
                        return {
                            label: item.name,
                            value: item.menu_id,
                            selected: item.menu_id=='{$this->selectedIds[3]}'
                        };
                    }));

                });
            },
            onChange: function(event, value, requiredValues, requirementsMet){
                var targetId="{$this->id}_{$this->level}";
                var realId = "{$this->id}";
                var eventTargetId = $(event.target).attr('id');
                if(value=='')
                {
                    $('#'+realId).val('');
                }
                else
                {
                    if(targetId==eventTargetId&&value!='')
                    {
                       $('#'+realId).val(value)
                    }
                }

            }
        }
    ]
});


JS;

        if (Yii::$app->request->isAjax) {
            echo "<script>";
            echo "{$js}";
            echo "</script>";
        }
        else
        {
            $view = $this->getView();
            $view->registerJs($js);
        }
	}
	
	protected  function registerClientScript()
	{
        $view = $this->getView();
        $coreAsset = CoreAsset::register($view);
        $coreAssetsUrl = $coreAsset->baseUrl;
        $assetPlugin = PluginsAsset::register($view);
        $pluginUrl = $assetPlugin->baseUrl;
        return array('coreAssetsUrl'=>$coreAssetsUrl,'pluginUrl'=>$pluginUrl);
	}
}