HTML部分:
<span>一级标签:</span>
<input class="easyui-combobox" style="width:70%;" id="level1Lab" data-options="prompt:'请选择一级标签'" required="required"><br/><br>
<span>二级标签:</span>
<input class="easyui-combobox" style="width:70%;" id="level2Lab" data-options="prompt:'请先选择一级标签'" required="required"><br/><br>
<span>三级标签:</span>
<input class="easyui-combobox" style="width:70%;" id="level3Lab" data-options="prompt:'请先选择二级标签'" required="required"><br/><br>
JS部分:
$(function() {
// 下拉框选择控件,下拉框的内容是动态查询数据库信息
$('#level1Lab').combobox({
url:'<%=basePath%>labelManage/queryLevel1Name.html',
editable:false,
cache: false,
panelHeight: 'auto',
valueField:'id',
textField:'text',
onHidePanel: function(){
$("#level2Lab").combobox("setValue",'');
$("#level3Lab").combobox("setValue",'');
var level1Name = $('#level1Lab').combobox('getValue');
console.info("levelName:"+level1Name);
$.ajax({
type: "POST",
url: '<%=basePath%>labelManage/queryLevel2Name.html',
data: {"level1Name":level1Name,"level2Name":null},
cache: false,
dataType : "json",
success: function(data){
$("#level2Lab").combobox("loadData",data);
}
});
}
});
$("#level2Lab").combobox({
editable:false,
cache: false,
panelHeight: '100px',
valueField:'id',
textField:'text',
onHidePanel: function(){
$("#level3Lab").combobox("setValue",'');
var level1Name = $('#level1Lab').combobox('getValue');
var level2Name = $('#level2Lab').combobox('getValue');
console.info("levelName:"+level1Name+level2Name);
$.ajax({
type: "POST",
url: '<%=basePath%>labelManage/queryLevel2Name.html',
data: {"level1Name":level1Name,"level2Name":level2Name},
cache: false,
dataType : "json",
success: function(data){
$("#level3Lab").combobox("loadData",data);
}
});
}
});
$("#level3Lab").combobox({
editable:false,
cache: false,
panelHeight: '100px',
valueField:'id',
textField:'text',
});
});
Controller层代码:
/**
* 一级标签框数据提供
* @return
*/
@RequestMapping(value = "/queryLevel1Name.html",produces = "text/html;charset=UTF-8")
@ResponseBody
public String level1Name () {
List<LabLevelPojo> list = labelService.queryLabelLevelByName(null,null);
List<String> stringList = new ArrayList<>();
List<Map<String,Object>> mapList = new ArrayList<>();
Map map = new HashMap();
for (LabLevelPojo labLevelPojo : list) {
stringList.add(labLevelPojo.getLabLevel1()+labLevelPojo.getLabLevel1Name());
}
/**
* 去除list中的重复数据
*/
HashSet hashSet = new HashSet(stringList);
stringList.clear();
stringList.addAll(hashSet);
for(int i=0;i<stringList.size();i++){
Map mapName = new HashMap();
if(stringList.get(i)!=null&&!stringList.get(i).equals("")){
mapName.put("id",stringList.get(i));
mapName.put("text",stringList.get(i));
mapList.add(mapName);
}
}
return JSONUtils.toJSONString(mapList);
}
/**
* 下拉联动(二三级标签框数据提供)
* @param level1Name
* @return
*/
@RequestMapping(value = "/queryLevel2Name.html",produces = "text/html;charset=UTF-8")
@ResponseBody
public String queryLabLevelByName(String level1Name,String level2Name){
level1Name = level1Name.substring(1);
if(level2Name!=null&&!level2Name.equals("")){
level2Name = level2Name.substring(2);
}
List<LabLevelPojo> labLevelPojoList = new ArrayList<>();
List<String> stringList = new ArrayList<>();
List<Map<String,Object>> mapList = new ArrayList<>();
if(level2Name==null||level2Name.equals("")){
labLevelPojoList = labelService.queryLabelLevelByName(level1Name,null);
for (LabLevelPojo labLevelPojo : labLevelPojoList) {
stringList.add(labLevelPojo.getLabLevel2()+labLevelPojo.getLabLevel2Name());
}
}else {
labLevelPojoList = labelService.queryLabelLevelByName(level1Name,level2Name);
for (LabLevelPojo labLevelPojo : labLevelPojoList) {
stringList.add(labLevelPojo.getLabLevel3()+labLevelPojo.getLabLevel3Name());
}
}
/**
* 去除list中的重复数据
*/
HashSet hashSet = new HashSet(stringList);
stringList.clear();
stringList.addAll(hashSet);
for(int i=0;i<stringList.size();i++){
Map mapName = new HashMap();
if(stringList.get(i)!=null&&!stringList.get(i).equals("")){
mapName.put("id",stringList.get(i));
mapName.put("text",stringList.get(i));
mapList.add(mapName);
}
}
return JSONUtils.toJSONString(mapList);
}
Dao层代码:
public List<LabLevelPojo> queryLabelLevelByName(String labLevel1, String labLevel2) {
StringBuilder sql= new StringBuilder();
List<LabLevelPojo> labLevelPojoList = new ArrayList<>();
RowMapper<LabLevelPojo> labLevelModelRow=new BeanPropertyRowMapper<>(LabLevelPojo.class);
List<Object> args = new ArrayList<>();
sql.append("SELECT * FROM LABEL_LEVEL");
if(labLevel1!=null&&!labLevel1.equals("")){
sql.append(" WHERE LAB_LEVEL1_NAME=?");
args.add(labLevel1);
}
if(labLevel2!=null&&!labLevel2.equals("")){
sql.append(" AND LAB_LEVEL2_NAME =?");
args.add(labLevel2);
}
if(labLevel1==null&&labLevel2==null){
try {
labLevelPojoList = jdbcTemplate.query(sql.toString(),labLevelModelRow);
}catch (Exception e){
logger.error("一级标签查询错误:"+e);
}
}else {
try{
labLevelPojoList = jdbcTemplate.query(sql.toString(),labLevelModelRow,args.toArray());
}catch (Exception e){
logger.error("二三级标签查询错误:"+e);
}
}
return labLevelPojoList;
}
EasyUI下拉框远程赋值,需要valueFiled和textFiled两个字段,才能赋值