Java 怎么实现一个三级联动?别着急,上代码

405 阅读2分钟

QQ截图20210517141401.png

省市县多级联动该怎么实现?直接上代码:

CREATE TABLEt_comn_xzqhdm( XZQHDMvarchar(50) CHARACTER SET utf8 NOT , 行政区划代码 XZQHvarchar(100) CHARACTER SET utf8 DEFAULT NULL,行政区划 FDMvarchar(50) DEFAULT NULL, XZJBvarchar(50) DEFAULT NULL, SFYXvarchar(50) DEFAULT NULL, JDvarchar(50) DEFAULT NULL,经度 WDvarchar(50) DEFAULT NULL,纬度 CJRvarchar(50) DEFAULT NULL,创建人 CJSJdatetime DEFAULT NULL,创建时间 XGRvarchar(50) DEFAULT NULL,修改人 XGSJdatetime DEFAULT NULL,修改时间 ORGIDvarchar(50) DEFAULT NULL,组织ID PXM varchar(50) DEFAULT NULL, PRIMARY KEY (XZQHDM) USING BTREE ) ENGINE=InnoDB DEFAULT CHARSET=latin1 ROW_FORMAT=DYNAMIC COMMENT='行政区编码表';

通过XZQHDM里是否包含子节点FDM的id来判断是否有子节点

QQ截图20210517141652.png

封装CxSelect树结构实体类

public class CxSelect implements Serializable { private static final long serialVersionUID = 1L;

/**
 * 数据值字段名称
 */
private String v;

/**
 * 数据标题字段名称
 */
private String n;

/**
 * 子集数据字段名称
 */
private List<CxSelect> s;

public CxSelect()
{
}

public CxSelect(String v, String n)
{
    this.v = v;
    this.n = n;
}

public List<CxSelect> getS()
{
    return s;
}

public void setN(String n)
{
    this.n = n;
}

public String getN()
{
    return n;
}

public void setS(List<CxSelect> s)
{
    this.s = s;
}

public String getV()
{
    return v;
}

public void setV(String v)
{
    this.v = v;
}

}

mapper层

public interface CommonMapper {

@Select(value = {"SELECT XZQHDM,XZQH,FDM FROM t_comn_xzqhdm WHERE SFYX = '1'"})
List<Map<String, Object>> getXZQH();
    
    	@Select(value = {"SELECT (SELECT sum(yfzl) FROM t_dzcczjl)yfzl,\r\n" + 
		"(SELECT sum(fhzl) FROM t_fhjl)fhzl,\r\n" + 
		"(SELECT sum(fhzl)fhzl2 from t_czfhjl)fhzl2,\r\n" + 
		"(SELECT COUNT(YLFWWYSQM) FROM t_dzcczjl)cfqysl,\r\n" + 
		"(SELECT jd FROM t_dzcczjl ORDER BY CJSJ DESC LIMIT 1)jd,\r\n" + 
		"(SELECT wd FROM t_dzcczjl ORDER BY CJSJ DESC LIMIT 1)wd"})  
                    public List<Map<String,Object>> selectCzxx();

}

实现层

@Service public class CommonServiceImpl { @Autowired private CommonMapper commonMapper;

public String getCityData(String cid)
{
    String data = JSON.toJSON(xzqhTree(commonMapper.getXZQH(),cid)).toString();
    return data;
}

public List<CxSelect> xzqhTree(List<Map<String, Object>> notes,String cid){
 List<CxSelect> xzqhTree = new ArrayList<CxSelect>(); 
	 for (Map<String, Object> obj : notes) {
		 String pid = obj.get("FDM") == null ? "" : obj.get("FDM") + "";
		 if (cid.equals(pid)) { 
			 CxSelect cxSelect = new CxSelect();
			 cxSelect.setN((String) obj.get("XZQH")); 
			 cxSelect.setV((String) obj.get("XZQHDM")); 
			 cxSelect.setS(xzqhTree(notes,(String) obj.get("XZQHDM"))); 
			 xzqhTree.add(cxSelect);
		 } 
	  }
	return xzqhTree;
}

public List<Map<String,Object>> selectCzxx(){
	return commonMapper.selectCzxx();
}

}

Controller层

@GetMapping("cityData/{cid}") @ResponseBody public String cityData(@PathVariable("cid") String cid) { return commonServiceImpl.getCityData(cid); }

前端方法

<th:block th:include="include :: jquery-cxselect-js" /> var data = JSON.parse([[cityData]]);{cityData}]]); ('#element').cxSelect({ selects: ['city', 'area','street'], jsonValue: 'v', data: data });

`

<--

  • 所属地市:
    请选择
  • 所属区县:
    请选择
  • 所属街道:
    请选择
  • --> `