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

三级联动完成

最后

以上就是危机母鸡为你收集整理的easyUI实现三级联动的全部内容，希望文章能够帮你解决easyUI实现三级联动所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。