JQuery插件实现下拉复选框和后台mybatis接受处理数据

最新推荐文章于 2021-11-04 15:07:12 发布

原创最新推荐文章于 2021-11-04 15:07:12 发布 · 1.6k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#mysql #下拉复选框 #mybatis分割

数据库同时被 2 个专栏收录

16 篇文章

订阅专栏

6 篇文章

订阅专栏

这是通过一个JQuery的插件multiselect实现的，比较简单主要是看一下通过mybatis怎么处理他传递过来的参数

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>juery实现下拉checkbox效果</title>
        <link rel="stylesheet" type="text/css" href="jquery-ui-multiselect/css/jquery.multiselect.css" />
		<link rel="stylesheet" type="text/css" href="jquery-ui-multiselect/css/jquery.multiselect.filter.css" />
		<link rel="stylesheet" type="text/css" href="jquery-ui-multiselect/css/jquery-ui.css" />
		<link rel="stylesheet" type="text/css" href="jquery-ui-multiselect/assets/style.css" />
		<link rel="stylesheet" type="text/css" href="jquery-ui-multiselect/assets/prettify.css" />

		<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
		<script type="text/javascript" src="jquery-ui-multiselect/assets/prettify.js"></script>
		<script type="text/javascript" src="jquery-ui-multiselect/src/jquery-ui.min.js"></script>
		<script type="text/javascript" src="jquery-ui-multiselect/src/jquery.multiselect.js"></script>
		<script type="text/javascript" src="jquery-ui-multiselect/src/jquery.multiselect.filter.js"></script>

		<script type="text/javascript">
		$(function(){
		    $("select").multiselect({
		        noneSelectedText: "==请选择==",
		        checkAllText: "全选",
		        uncheckAllText: '全不选',
		        selectedList:4
		    });
		});
		function showValues() {
			
			var array_of_checked_values = $("#sela").multiselect("getChecked").map(function(){
		               return this.value;   
		}).get();

			alert(array_of_checked_values);
		}
		</script>
</head>
<body>


	<h2>demo</h2>
	
	<p>jquery插件实现下拉多选框选择功能</p>
	<pre class="prettyprint">
	$(function(){
	   $("select").multiselect(); 
	});
	</pre>
	    <button onclick="showValues()">显示选取的城市</button>
	<h3>选择城市</h3>
	<p>
		<select id ="sela" title="Basic example" multiple="multiple" name="example-basic" size="5">
		<option value="1">上海</option>
		<option value="2">武汉</option>
		<option value="3">成都</option>
		<option value="4">北京</option>
		<option value="5">南京</option>
		</select>
	</p>

</body>
</html>

里面用得到的插件可以去下面的地址进行下载

http://download.youkuaiyun.com/download/junmoxi/9946189

下面我们看一下后台怎么接受这个数据，注意，上面的页面我没写form表单，如果需要后台自己手动填上。

package com.lei.test;

import javax.servlet.http.HttpServletRequest;
import org.springframework.stereotype.Controller;

@Controller
public class MutilSelectController {
	
	@RequestMapping(value = "getvlaues")
	public String getvalues(HttpServletRequest request){
		
		String str = request.getParameter("example-basic");
		
		String [] values = str.split(",");//以,号分割
		
		service.find(String [] values);//传递数组过去
		
	}

}

看一下mapper里面怎么写sql语句

<select id="find" resultType="ProfitData">
		SELECT 
		<include refid="cols"/> 
		FROM pay_profit_data p
		<include refid="payProfitDataJoins"/>
		WHERE p.del_flag = #{DEL_FLAG_NORMAL} 
		
		<if test="values != null and values != ''">
            AND p.value IN
            <foreach collection="values" index="index" item="item"
              open="(" separator="," close=")"> 
                #{item}  
            </foreach> 
        </if>
		ORDER BY p.update_date DESC
	</select>

collection写你传递过来的数组变量

open 是以什么开头

separator 是以什么分割

close 是以什么结尾

这句的结果就是 p.vlaue In (1,2,3,4)