HAP_省市联级查询

实现效果：

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("成功");
            }
        });
    });

鸣谢：森林兄

https://zhidao.baidu.com/question/365648658275520852.html?qbl=relate_question_0&word=html%20%BB%F1%C8%A1select%B5%C4%D1%A1%CF%EE%C3%FB%B3%C6name