easyUI实现三级联动

首先封装一下实体类:

package com.xinxin.dto;

public class SanJi {
	private Integer id;
	private String name;
	private Integer pid;
	public Integer getId() {
		return id;
	}
	public void setId(Integer id) {
		this.id = id;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public Integer getPid() {
		return pid;
	}
	public void setPid(Integer pid) {
		this.pid = pid;
	}
	
	
}

controller中的方法:

@RequestMapping("sanji")
	@ResponseBody
	public List<SanJi> sanji(String pid){
		List<SanJi> slist=service.getSanJi(pid);
		return slist;
	}

Mapper中加入Param注解:

List<SanJi> getSanJi(@Param("pid")String pid);

SQL语句

<select id="getSanJi" resultType="com.xinxin.dto.SanJi">
		select * from sanji where pid=#{pid}
</select>

前台easyUI

    
        <input type="hidden" name="sanid" id="sanid"/>
    		<input id="sheng" class="easyui-combobox" data-options="    
	        valueField: 'id',    
	        textField: 'name',    
	        url: '${ctx}/wb/sanji.action?pid=0',    
	        onSelect: function(rec){    
	            var url = '${ctx}/wb/sanji.action?pid='+rec.id;    
	            $('#shi').combobox('reload', url);    
	            $('#shi').combobox('setValues', '');    
	            $('#xian').combobox('setValues', '');    
	        }" />   
	        
    		<input id="shi" class="easyui-combobox" data-options="    
	        valueField: 'id',    
	        textField: 'name',    
	        onSelect: function(rec){    
	            var url = '${ctx}/wb/sanji.action?pid='+rec.id;    
	            $('#xian').combobox('reload', url);    
 	            $('#xian').combobox('setValues', '');    
	        }" />   
			<input id="xian" class="easyui-combobox" data-options="valueField:'id',textField:'name'" />

function save() {
		
		var sheng=$("#sheng").combobox("getValue");
		var shi=$("#shi").combobox("getValue");
		var xian=$("#xian").combobox("getValue");
		var sanid=sheng+","+shi+","+xian;
		$("#sanid").val(sanid);
}
function edit(index) {

var ssxs=row.sanid;
var ssx=ssxs.split(",");
$("#sheng").combobox("setValue",ssx[0]);
$("#shi").combobox("setValue",ssx[1]);
$("#xian").combobox("setValue",ssx[2]);

}

三级联动完成



猜你喜欢

转载自blog.csdn.net/panyuxin_/article/details/80924599