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

<?php

namespace app\common\widget;
use yii\base\Widget;
use app\assets\CoreAsset;
use app\assets\PluginsAsset;
use app\modules\cms\models\Category;
use yii\helpers\Html;
use Yii;
class LinkcatWidget extends Widget
{
	public $model;
    public $level;
    public $content_model_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->content_model_id))
        {
            echo '请设置内容模型';
            exit;
        }
        $this->dataUrl = Yii::$app->controller->createRealUrl('ajax/nextlinkcat');
        if($this->value)$this->selectedIds = Category::getParentCatIdRs($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
       //setInterval(function(){console.log($('#{$this->id}').val())},2000)
        $('#{$this->id}_block').cascadingDropdown({
    selectBoxes: [
        {
            selector: '.{$this->id}_1',
            source: function(request, response) {
                var content_model_id = {$this->content_model_id};
                var data_url = '{$this->dataUrl}';
                $.getJSON(data_url, {content_model_id:content_model_id}, function(result) {
                    var data = result.data;
                    var selectOnlyOption = data.length >= 1;
                    response($.map(data, function(item, index) {
                        return {
                            label: item.cat_name,
                            value: item.cat_id,
                            selected: item.cat_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(value)

                }
                else
                {
                    $('#'+realId).val('')
                }

            }
        },
        {
            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,content_model_id:{$this->content_model_id}}, function(result) {
                    var data = result.data;
                    var selectOnlyOption = data.length >= 1;
                    response($.map(data, function(item, index) {
                        return {
                            label: item.cat_name,
                            value: item.cat_id,
                            selected: item.cat_id=='{$this->selectedIds[1]}'
                        };
                    }));
                    if(data.length==0)
                    {
                        $('.{$this->id}_2').attr('disabled','disable');
                        $('.{$this->id}_3').attr('disabled','disable');
                        $('.{$this->id}_4').attr('disabled','disable');
                       var realId = "{$this->id}";
                       $('#'+realId).val($('.{$this->id}_1 option:selected').val());
                    }
                });
            },
             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(value)
                }
                else
                {
                    $('#'+realId).val('')
                }
            }

        },
        {
            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,content_model_id:{$this->content_model_id}}, function(result) {
                    var data = result.data;
                    response($.map(data, function(item, index) {
                        return {
                            label: item.cat_name,
                            value: item.cat_id,
                            selected: item.cat_id=='{$this->selectedIds[2]}'
                        };
                    }));
                    if(data.length==0)
                    {
                       $('.{$this->id}_3').attr('disabled','disable');
                       $('.{$this->id}_4').attr('disabled','disable');
                       var realId = "{$this->id}";
                       $('#'+realId).val($('.{$this->id}_2 option:selected').val());
                    }
                });

            },
            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(value)
                }
                else
                {
                    $('#'+realId).val('')
                }
            }

        },
        {
            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,content_model_id:{$this->content_model_id}}, function(result) {
                    var data = result.data;
                    response($.map(data, function(item, index) {
                        return {
                            label: item.cat_name,
                            value: item.cat_id,
                            selected: item.cat_id=='{$this->selectedIds[3]}'
                        };
                    }));
                    if(data.length==0)
                    {
                        $('.{$this->id}_4').attr('disabled','disable');
                        var realId = "{$this->id}";
                        $('#'+realId).val($('.{$this->id}_3 option:selected').val());
                    }
                });
            },
            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(value)
                }
                else
                {
                    $('#'+realId).val('')
                }
            }
        }
    ]
});


JS;
        $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);
	}
}