easyUI+ThinkPHP5实现简单的二级联动

1
2,022

A+

所属分类：PHP

HTML模板:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<link href="__PUBLIC__static/easyui/css/easyui.css" rel="stylesheet" type="text/css" />
<link href="__PUBLIC__static/easyui/css/icon.css" rel="stylesheet" type="text/css" />
<script src="__PUBLIC__static/easyui/js/jquery.min.js" type="text/javascript"></script>
<script src="__PUBLIC__static/easyui/js/jquery.easyui.min.js" type="text/javascript"></script>
<script src="__PUBLIC__static/easyui/js/easyui-lang-zh_CN.js" type="text/javascript"></script>
</head>
<body>
    <table>
    	<tr>
    	    <td>开发渠道：</td>
    	    <td>
    	        <select id="dev" class="easyui-combobox" name="dev" data-options="required:true,panelHeight:'auto',editable:false" validType="comboxValidate['dev','请选择开发渠道']">
    	            <option value="0">--------------请选择-------------</option>
    	            {volist name="dev" id="e" }
    	            <option value="{$e.id}">{$e.dev}</option>
    	            {/volist}
    	        </select>
    	    </td>
    	    <td>信息来源：</td>
    	    <td>
    	        <select id="from" class="easyui-combobox" name="from" required="true" data-options="required:true,panelHeight:'auto',editable:false" validType="comboxValidate['from','请选择信息来源']">
    	            <option value="0">--------------请选择-------------</option>
    	            {volist name="from" id="a" }
    	            <option value="{$a.id}">{$a.from}</option>
    	            {/volist}
    	        </select>
    	    </td>
    	</tr>
    </table>
</body>
<strong></html></strong>

<!DOCTYPE html>

<html>

<head>

<title>Examples</title>

</head>

<body>

<table>

<tr>

<td>

{volist name="dev" id="e" }

{/volist}

</select>

</td>

<td>

{volist name="from" id="a" }

{/volist}

</select>

</td>

</tr>

</table>

</body>

JS:

$(function(){
    // 下拉列表扩展验证
    $.extend($.fn.validatebox.defaults.rules, {
        comboxValidate : {
            validator : function(value, param,missingMessage) {
                if($('#'+param).combobox('getValue')!=0 && $('#'+param).combobox('getValue')!=null){
                    return true;
                }
                return false;
            },
            message : "{1}"
        }
    });

    // 联动方式一：
    $('#dev').combobox({
        onChange:function(newValue,oldValue){
            //信息来源
            var pid = newValue;
            // console.info(pid);
            $.getJSON('{:url('link')}?id='+pid,function(result){
                var data = $.makeArray(result);
                data.unshift({"id":"","from":"--------------请选择-------------"});
                // console.info(data);
                $('#from').combobox({
                    valueField:'id', //值字段
                    textField:'from', //显示的字段
                    data:data,
                    panelHeight:'auto',
                    required:true,
                    editable:false//不可编辑，只能选择                            
                });
                $('#from').combobox('setValue' , '');
            });
            
        }
    });

    // 联动方式二：
    /*$('#dev').combobox({
        onChange:function(){
            var pid = $('#dev').combobox('getValue');
            
            //信息来源
            $('#from').combobox({
                valueField:'id', //值字段
                textField:'from', //显示的字段
                url:'{:url('link')}?id='+pid,
                panelHeight:'auto',
                required:true,
                editable:false,//不可编辑，只能选择
                value:'--------------请选择-------------'
            });
            $('#from').combobox('setValue','');
        }
    });*/


<strong>})</strong>

$(function(){

// 下拉列表扩展验证

$.extend($.fn.validatebox.defaults.rules, {

comboxValidate : {

validator : function(value, param,missingMessage) {

if($('#'+param).combobox('getValue')!=0 && $('#'+param).combobox('getValue')!=null){

return true;

}

return false;

message : "{1}"

}

});

// 联动方式一：

$('#dev').combobox({

onChange:function(newValue,oldValue){

//信息来源

var pid = newValue;

// console.info(pid);

$.getJSON('{:url('link')}?id='+pid,function(result){

var data = $.makeArray(result);

data.unshift({"id":"","from":"--------------请选择-------------"});

// console.info(data);

$('#from').combobox({

valueField:'id', //值字段

textField:'from', //显示的字段

data:data,

panelHeight:'auto',

required:true,

editable:false//不可编辑，只能选择

});

$('#from').combobox('setValue' , '');

});

}

});

// 联动方式二：

/*$('#dev').combobox({

onChange:function(){

var pid = $('#dev').combobox('getValue');

//信息来源

$('#from').combobox({

valueField:'id', //值字段

textField:'from', //显示的字段

url:'{:url('link')}?id='+pid,

panelHeight:'auto',

required:true,

editable:false,//不可编辑，只能选择

value:'--------------请选择-------------'

});

$('#from').combobox('setValue','');

}

});*/

PHP:

//模型
<?php
namespace app\index\model;
use think\Model;
use think\Db;

// 填充表单数据模型

class AddForm extends Model{
	
	// 获取表单数据
	function getinfo($v){
		$data=Db::name($v)
		->select();
		return $data;
	}
	
	// 联动
	public function linkage($id){
		$data=Db::name('from')
		->where('pid',$id)
		->select();
		return $data;
	}
}

//模型

<?php

namespace app\index\model;

use think\Model;

use think\Db;

// 填充表单数据模型

class AddForm extends Model{

// 获取表单数据

function getinfo($v){

$data=Db::name($v)

->select();

return $data;

}

// 联动

public function linkage($id){

$data=Db::name('from')

->where('pid',$id)

->select();

return $data;

}

//控制器
<?php
namespace app\index\controller;
use app\index\model\AddForm;

class Useradd extends Base{
	// 填充表单数据
	public function index(){
		$addform=new AddForm;
		$dev=$addform->getinfo('dev_from'); //开发渠道
		$from=$addform->getinfo('from'); //信息来源
		$this->assign([
                     'dev'  => $dev,
                     'from'  => $from,

                ]);
		return $this->fetch('useradd');
	}

	// 联动
	public function link($id){
		$addform=new AddForm;
		// dump(input('post.'));
		$from=$addform->linkage($id); //信息来源
		return json($from);

	}

}

//控制器

<?php

namespace app\index\controller;

use app\index\model\AddForm;

class Useradd extends Base{

// 填充表单数据

public function index(){

$addform=new AddForm;

$dev=$addform->getinfo('dev_from'); //开发渠道

$from=$addform->getinfo('from'); //信息来源

$this->assign([

'dev' => $dev,

'from' => $from,

]);

return $this->fetch('useradd');

}

// 联动

public function link($id){

$addform=new AddForm;

// dump(input('post.'));

$from=$addform->linkage($id); //信息来源

return json($from);

}

以上就是核心代码，最后再附上一段jquery写的联动代码，稍微改改就能用。

//取分类的联动
$("select[name=cat_id]").change(function(){
    var _this = $(this);
    // 获取选择的类型的ID
    var catId = $(this).val();
    var opt = "<option value=''>请选择</option>";
    // 如果选择了一个类型就执行AJAX取出个类型下的属性
    if(catId != "")
    {
        $.ajax({
            type : "GET",
            url : "<?php echo url('Shop/ajaxcat', '', FALSE); ?>/catId/"+catId,
            dataCity : "json",
            success : function(data)
            {
                // 把返回的属性放到属性的下拉框中
                $(data).each(function(k,v){
                    opt += "<option value='"+v.cat_id+"'>"+v.cat_name+"</option>";
                });
                // 把这个下拉框后面的一个下拉框放进去
                _this.next("select").html(opt);
            }
        });
    }
    else
        _this.next("select[name=cat_idb]").html(opt);
});