Java宇layUi結合xm-select 實現複選框查詢功能

首先引用xm-select 我們項目的地址是

    <script src="../../statics/plugins/layui/layui-formSelects/xm-select.js" type="text/javascript" charset="utf-8"></script>

大家如果沒有的話可以找我的資源下載 

在頁面上新建一個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>