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

来源：互联网发布：淘宝的支付方式有哪些编辑：程序博客网时间：2024/06/05 21:35

这是通过一个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.csdn.net/download/junmoxi/9946189

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

package com.lei.test;import javax.servlet.http.HttpServletRequest;import org.springframework.stereotype.Controller;@Controllerpublic 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)

阅读全文

0 0