实现效果：
image.png
步骤一：自定义查询
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="wht.customer.mapper.BaseAddressNameMapper">
<resultMap id="BaseResultMap" type="wht.customer.dto.BaseAddressName">
<result column="ADDRESS_ID" property="addressId" jdbcType="DECIMAL" />
<result column="ADDRESS_NAME" property="addressName" jdbcType="VARCHAR" />
<result column="DESCRIPTION" property="description" jdbcType="VARCHAR" />
<result column="TYPE" property="type" jdbcType="VARCHAR" />
<result column="PARENT_ADDRESS_ID" property="parentAddressId" jdbcType="DECIMAL" />
<result column="AREA_CODE" property="areaCode" jdbcType="VARCHAR" />
</resultMap>
<!--地址联级查询-->
<select id="getAddressByType"
resultMap="BaseResultMap"
parameterType="wht.customer.dto.BaseAddressName">
SELECT
ADDRESS_ID
,ADDRESS_NAME
,PARENT_ADDRESS_ID
FROM hcrm_base_address_name
WHERE TYPE = #{type, jdbcType= VARCHAR}
AND PARENT_ADDRESS_ID = #{parentAddressId, jdbcType= DECIMAL}
</select>
</mapper>
package wht.customer.mapper;
import com.hand.hap.mybatis.common.Mapper;
import wht.customer.dto.BaseAddressName;
import java.util.List;
public interface BaseAddressNameMapper extends Mapper<BaseAddressName>{
/**
* 联级查询
* @param dto
* @return
*/
List<BaseAddressName> getAddressByType(BaseAddressName dto);
}
package wht.customer.service;
import com.hand.hap.core.ProxySelf;
import com.hand.hap.system.service.IBaseService;
import wht.customer.dto.BaseAddressName;
import java.util.List;
public interface IBaseAddressNameService extends IBaseService<BaseAddressName>, ProxySelf<IBaseAddressNameService> {
/**
* 联级查询
* @param dto
* @return
*/
List<BaseAddressName> getAddressByType(BaseAddressName dto);
}
package wht.customer.service.impl;
import com.hand.hap.system.service.impl.BaseServiceImpl;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import wht.customer.dto.BaseAddressName;
import wht.customer.mapper.BaseAddressNameMapper;
import wht.customer.service.IBaseAddressNameService;
import org.springframework.transaction.annotation.Transactional;
import java.util.List;
@Service
@Transactional(rollbackFor = Exception.class)
public class BaseAddressNameServiceImpl extends BaseServiceImpl<BaseAddressName> implements IBaseAddressNameService {
@Autowired
private BaseAddressNameMapper mapper;
/**
* 省份联级查询
*
* @return
*/
@Override
public List<BaseAddressName> getAddressByType(BaseAddressName dto) {
return mapper.getAddressByType(dto);
}
}
注意传递的参数
/**
* 联级查询
*
* @param request
* @param type
* @return
*/
@RequestMapping(value = "/hcrm/base/customer/getAddressByType")
@ResponseBody
public List<BaseAddressName> getAddressByType(HttpServletRequest request, @RequestParam("type") String type,@RequestParam("parentAddressId") Long parentAddressId) {
System.out.println("===" + type);
System.out.println("===" + parentAddressId);
BaseAddressName baseAddressName=new BaseAddressName();
baseAddressName.setType(type);
baseAddressName.setParentAddressId(parentAddressId);
IRequest iRequest = createRequestContext(request);
ResponseData responseData = new ResponseData();
List<BaseAddressName> list = new ArrayList<>();
try {
list = service.getAddressByType(baseAddressName);
} catch (Exception e) {
responseData.setSuccess(false);
responseData.setMessage(e.getMessage());
}
for(BaseAddressName addressName:list){
System.out.println(addressName.getType()+addressName.getAddressName()+addressName.getParentAddressId());
}
return list;
}
js文件，这里从数据库中查找数据
image.png
//页面加载完成后
$(function () {
countryDownload();
})
/**
* 国家
*/
function countryDownload() {
$("#addressProvince").empty();
$("#addressCity").empty();
$("#addressZone").empty();
$.ajax({
url: '/hcrm/base/customer/getAddressByType?type=COUNTRY&parentAddressId=0',
type: 'POST',
dataType: "json",
contentType: "application/json",
success: function (result) {
/*获取控件元素，并向元素加值*/
var sel = document.getElementById("addressCountry");
for (var i in result) {
var id = result[i].addressId;
var name = result[i].addressName;
console.log("result" + result[i].addressName);
var option = new Option(name, id);
sel.options.add(option);
}
}
});
}
/**
* 省份
*/
function provinceDownload() {
var addressCountry = $("#addressCountry").val();
$("#addressProvince").empty();
$("#addressCity").empty();
$("#addressZone").empty();
console.log("addressCountry：" + addressCountry);
$.ajax({
url: '/hcrm/base/customer/getAddressByType?type=PROVINCE&parentAddressId=' + addressCountry,
type: 'POST',
dataType: "json",
contentType: "application/json",
success: function (result) {
var sel = document.getElementById("addressProvince");
for (var i in result) {
var id = result[i].addressId;
var name = result[i].addressName;
console.log("result" + result[i].addressName);
var option = new Option(name, id);
sel.options.add(option);
}
}
});
}
/**
* 城市
*/
function cityDownload() {
var addressProvince = $("#addressProvince").val();
$("#addressCity").empty();
$("#addressZone").empty();
console.log("addressProvince：" + addressProvince);
$.ajax({
url: '/hcrm/base/customer/getAddressByType?type=CITY&parentAddressId=' + addressProvince,
type: 'POST',
dataType: "json",
contentType: "application/json",
success: function (result) {
var sel = document.getElementById("addressCity");
for (var i in result) {
var id = result[i].addressId;
var name = result[i].addressName;
console.log("result" + result[i].addressName);
var option = new Option(name, id);
sel.options.add(option);
}
}
});
}
/**
* 县区
*/
function zoneDownload() {
var addressCity = $("#addressCity").val();
$("#addressZone").empty();
console.log("addressCity：" + addressCity);
$.ajax({
url: '/hcrm/base/customer/getAddressByType?type=AREA&parentAddressId=' + addressCity,
type: 'POST',
dataType: "json",
contentType: "application/json",
success: function (result) {
var sel = document.getElementById("addressZone");
for (var i in result) {
var id = result[i].addressId;
var name = result[i].addressName;
console.log("result" + result[i].addressName);
var option = new Option(name, id);
sel.options.add(option);
}
}
});
}
页面代码 记得在script调用这个 countryDownload();
<script src="/resources/js/address.js"></script>
<div class="row">
<!-- 国家 -->
<div class="col-sm-3">
<div class="form-group">
<label class="col-sm-4 control-label"><@spring.message
"customer.addresscountry"/></label>
<div class="col-sm-8">
<!-- <input data-role="combobox" data-value-primitive="true" placeholder="国家"
type="text" id="addressCountry" style="width: 100%"
data-bind="value:model.addressCountry" class="k-textbox"/>-->
<select id="addressCountry" name="addressCountry" onclick="provinceDownload()"
data-role="combobox" data-value-primitive="true" placeholder="国家"
style="width: 170px; height: 30px" data-text-field="meaning" data-value-field="value"
data-bind="value:model.addressCountry" aria-disabled="false">
</select>
<!--<script>kendo.bind($('#addressCountry'), viewModel);</script>-->
<!--<select id="addressCountry" name="addressCountry" onchange="provinceDownload()" style="width: 100%;background-color:#f0f0f0" class="k-textbox">
</select>-->
</div>
</div>
</div>
<!-- 省份 -->
<div class="col-sm-3">
<div class="form-group">
<label class="col-sm-4 control-label"><@spring.message
"customer.addressprovince"/></label>
<div class="col-sm-8">
<!-- <input type="text" id="addressProvince" style="width: 100%"
data-bind="value:model.addressProvince" class="k-textbox">-->
<select id="addressProvince" name="addressProvince" onclick="cityDownload()"
data-role="combobox" data-value-primitive="true" placeholder="省份"
style="width: 170px; height: 30px" data-text-field="meaning" data-value-field="value"
data-bind="value:model.addressProvince" aria-disabled="false">
</select>
<!--<script>kendo.bind($('#addressProvince'), viewModel);</script>-->
</div>
</div>
</div>
<!-- 城市 -->
<div class="col-sm-3">
<div class="form-group">
<label class="col-sm-4 control-label"><@spring.message
"customer.addresscity"/></label>
<div class="col-sm-8">
<!--<input type="text" id="addressCity" style="width: 100%"
data-bind="value:model.addressCity" class="k-textbox">-->
<select id="addressCity" name="addressCity" onclick="zoneDownload()"
data-role="combobox" data-value-primitive="true" placeholder="城市"
style="width: 170px; height: 30px" data-text-field="meaning" data-value-field="value"
data-bind="value:model.addressCity" aria-disabled="false">
</select>
<!--<script>kendo.bind($('#addressCity'), viewModel);</script>-->
</div>
</div>
</div>
<!-- 县区-->
<div class="col-sm-3">
<div class="form-group">
<label class="col-sm-4 control-label"><@spring.message
"customer.addresszone"/></label>
<div class="col-sm-8">
<!--<input type="text" id="addressZone" style="width: 100%"
data-bind="value:model.addressZone" class="k-textbox">-->
<select id="addressZone" name="addressZone"
data-role="combobox" data-value-primitive="true" placeholder="县区"
style="width: 170px; height: 30px" data-text-field="meaning" data-value-field="value"
data-bind="value:model.addressZone" aria-disabled="false">
</select>
<!-- <script>kendo.bind($('#addressZone'), viewModel);</script>-->
</div>
</div>
</div>
</div>
注意：在插入数据库的时候这样绑定值，不能用之前的<script>kendo.bind($('#addressZone'), viewModel);</script>
$("#saveGrid").click(function () {
//绑定数据：viewModel.model.set("",$("#addressProvince").val())
/* 方法二：*/
if (document.getElementById("addressCountry").selectedIndex>-1) {
alert("addressCountry"+document.getElementById("addressCountry").selectedIndex)
viewModel.model.set("addressCountry", document.getElementById("addressCountry").options[document.getElementById("addressCountry").selectedIndex].text);
}
if (document.getElementById("addressProvince").selectedIndex>-1) {
alert("addressProvince"+document.getElementById("addressProvince").selectedIndex)
viewModel.model.set("addressProvince", document.getElementById("addressProvince").options[document.getElementById("addressProvince").selectedIndex].text);
}
if (document.getElementById("addressCity").selectedIndex>-1) {
alert("addressCity"+document.getElementById("addressCity").selectedIndex)
viewModel.model.set("addressCity", document.getElementById("addressCity").options[document.getElementById("addressCity").selectedIndex].text);
}
if (document.getElementById("addressZone").selectedIndex>-1) {
alert("addressZone"+document.getElementById("addressZone").selectedIndex)
viewModel.model.set("addressZone", document.getElementById("addressZone").options[document.getElementById("addressZone").selectedIndex].text);
}
viewModel.model.__status = 'add';
Hap.submitForm({
url: '${base.contextPath}/hcrm/customer/submit',
formModel: viewModel.model,
grid: {"productList": $("#productGrid"), "contactList": $("#contactGrid")},
success: function (data) {
alert("成功");
}
});
});
鸣谢：森林兄
