Java宇layUi结合xm-select 实现复选框查询功能

最新推荐文章于 2023-12-06 17:28:05 发布

software_Dev_

最新推荐文章于 2023-12-06 17:28:05 发布

阅读量1.3k

点赞数 1

分类专栏： layUI 文章标签： layUI复选框功能实现

本文链接：https://blog.csdn.net/qq_36014509/article/details/106239205

版权

layUI 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

首先引用xm-select 我们项目的地址是

大家如果没有的话可以找我的资源下载

在页面上新建一个div

<div id="parity" name="parity" style="height: 38px;width:250px;border-color: #F0F0F0;" class="xm-select-demo">						
 </div>

页面初始化这个div

var parity = xmSelect.render({
el: '#parity', 
filterable: true,
toolbar: {
show: true
},
data: [
{name: '0胎次', value: 0},
{name: '1胎次', value: 1},
{name: '2胎次', value: 2},
{name: '3胎次', value: 3},
{name: '4胎次', value: 4},
{name: '5胎次', value: 5},
{name: '6胎次', value: 6},
{name: '7胎次', value: 7},					
{name: '8胎次', value: 8},
{name: '9胎次', value: 9},
{name: '10胎次', value: 10}

]
})

页面就可以看到效果了,这里面我加了模糊查询全选清空的插件功能

这样我们的复选框就准备好了，接下来是向后台传值的方法

由于复选框是1,2,3,4 这种带有特殊字符,的json串我们使用get请求拼接在URL上会被转成乱码，试了几种方式不好使，使用的post请求解决了

table.render({
elem: '#1111',
method:'post',
contentType: 'application/json',

正常默认不写method的时候，默认get请求，我们这边直接使用post请求就需要填写上，加一个contenttype的方式。

layUi会根据我们使用的method来决定我们的where检索条件是拼接在URL上还是以body的形式传到后台，所以where还是按照正常的写法即可，注意前后台参数的对应

最后需要注意的一点是!!!!!!! post请求接取参数的时候如果做了分页，后台不要忘记接取的时候加page和limit

也可以写到BaseEntity中直接进行extends

	private Integer  page;
	
	private Integer  limit;

	public Integer getPage() {
		return page;
	}

	public void setPage(Integer page) {
		this.page = page;
	}

	public Integer getLimit() {
		return limit;
	}

	public void setLimit(Integer limit) {
		this.limit = limit;
	}

再说一下后台接取参数还有mysql的查询代码也直接附上这样大家直接使用了

Map<String, Object> paramMap = new HashMap<String, Object>();
String  searchParity =pigBodyInformationBeanaaa.getSearchParity();
if (StringUtils.isNotBlank(searchParity)) {
	List<String> searchParityList = Arrays.asList(searchParity.split(","));
	paramMap.put("searchParity", searchParityList);
}




<if test="searchParity != null and searchParity !=''">
		parity  in  
<foreach item="item" index="index" collection="searchParity" open="(" separator="," close=")">  
		  #{item}  
</foreach>		
</if>