formselects的远程搜索

前端：

1.插件的引入

//全局定义一次, 加载formSelects
	layui.config({
		base: '/js/'
	}).extend({
		formSelects: 'formSelects-v4'
	});

	//Demo
	layui.use(['form' ,'formSelects'], function(){
		var form = layui.form;
		var layer = parent.layer === undefined ? layui.layer : top.layer
		var	table = layui.table;
	//	var layer = layui.layer,
		var	$ = layui.$;
		var formS =layui.formSelects;

插件js的存放地址

HTML页面  容器；

<select id="hospitalId" style="width: 300px" name="roleIds" xm-select="hospitalId" xm-select-radio  xm-select-search=""></select>

使用：

/**
		 * 加载formSelects 下拉框
		 */

		/**
		 * 1.配置远程搜索, 请求头, 请求参数, 请求类型等
		 *
		 * formSelects.config(ID, Options, isJson);
		 *
		 * @param ID        xm-select的值
		 * @param Options   配置项
		 * @param isJson    是否传输json数据, true将添加请求头 Content-Type: application/json; charset=UTF-8
		 */
		formS.config("hospitalId",{
			type:"post",
			searchUrl:"/hospital/queryAllHospital666",    //请求地址
			searchName: "name",
			keyName:"NAME",      //下拉框的文本值  要与返回的数据中的 key 一致
			keyVal:"ID"            //下拉框的 value
		},false)

上面最好不要使用json  因为我用json没搞出来

我的错误：使用了json 也就是设置了true  后台定义了实体类 Name 来接收 json格式的post值

 一定要把config的第三个参数的改为false     searchName: "name",这个是我自己改的请求的key

------------------------------------------后台实现-----------------------------------------------------------------

1.controller:

    /**
     * 查询医院信息 ID name  前台传非json数据类型
     * 带条件的模糊查询
     *
     *   name必须存在 否则会报错
     */
    @PostMapping("queryAllHospital666")
    @ResponseBody

    /* public Map queryAllHospital1(@RequestBody  Name name){*/
    public Map queryAllHospital666(@RequestParam  String name){

        System.out.println("name:"+name);
        System.out.println("name==null:"+name==null);
        System.out.println("name==null:"+name=="null");
        System.out.println("".equals(name));
        return hospitalService.queryAllHospital666(name);
    }
    
}

service:  注意返回的格式 之前用的时候 没有带 code 数据没出来

  /**
     * 带条件的模糊查询
     * @param name
     * @return
     */
    public Map queryAllHospital666(String name) {
        Map<String,Object> map = new HashMap<>();
        List<Map<String, Object>> maps = hospitalMapper.queryAllHospital666(name);

        map.put("code",0);
        map.put("msg","success");
        map.put("data",maps);

        return map;
    }

 mapper:

/**
     * 带条件的模糊查询
     * @param name
     * @return
     */
    List<Map<String, Object>> queryAllHospital666(String name);

mapper.xml: 我用的是 oracle数据库 concat只能连接2字符串 方法有点差别

  <!--/**
  * 带条件的模糊查询  List<Map<String, Object>> queryAllHospital666(String name);-->
  <select id="queryAllHospital666" resultType="java.util.Map" parameterType="java.lang.String">
      select
       ID , NAME
       from
       HOSPITAL
       <where>
         IS_VALID =1
          <if test="null !=name and ''!=name">
           and NAME like  CONCAT(CONCAT('%',#{name}),'%')
         </if>
       </where>

  </select>

实体类：

package com.gs.pojo;

import com.fasterxml.jackson.annotation.JsonFormat;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

import java.util.Date;


@AllArgsConstructor
@NoArgsConstructor
@Data
public class Hospital {
    private Long id;

    private Long zoneId;

    private String name;
    @JsonFormat(pattern = "yyyy-MM-dd HH:mm",timezone = "GMT+8")
    private Date createTime;
    @JsonFormat(pattern = "yyyy-MM-dd HH:mm",timezone = "GMT+8")
    private Date updateTime;

    private String isValid;

    private String linkPersonPhone;

    private String linkPerson;

    private String remark;

    private String grade;


}

效果如上：

数据格式：

 

 数据格式：json

{
    "msg": "success",
    "code": 0,
    "data": [
        {
            "ID": 1,
            "NAME": "西安儿童医院"
        },
        {
            "ID": 2,
            "NAME": "西安市九院"
        },
        {
            "ID": 3,
            "NAME": "西安八院"
        }
    ]
}