HAP_省市联级查询

实现效果：

image.png

步骤一：自定义查询

   
       
       
       
       
       
       
   

   
   

       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}
   

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{
    /**
     * 联级查询
     * @param dto
     * @return
     */
    List 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, ProxySelf {
    /**
     * 联级查询
     * @param dto
     * @return
     */
    List 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 implements IBaseAddressNameService {

    @Autowired
    private BaseAddressNameMapper mapper;

    /**
     * 省份联级查询
     *
     * @return
     */
    @Override
    public List getAddressByType(BaseAddressName dto) {
        return mapper.getAddressByType(dto);
    }
}

注意传递的参数

    /**
     * 联级查询
     *
     * @param request
     * @param type
     * @return
     */
    @RequestMapping(value = "/hcrm/base/customer/getAddressByType")
    @ResponseBody
    public List 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 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();

            
            

                

                    <@spring.message
                        "customer.addresscountry"/>
                    

               
                        
                        
                        
                        
                    
                
            
            
            

                

                    <@spring.message
                        "customer.addressprovince"/>
                    

                 
                        
                        
                        
                    
                
            
            
            

                

                    <@spring.message
                        "customer.addresscity"/>
                    

                        
                        
                        
                        
                    
                
            
            
            

                

                    <@spring.message
                        "customer.addresszone"/>
                    

                        
                        
                        
                       
                    
                
            
        

注意：在插入数据库的时候这样绑定值，不能用之前的

  $("#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