jquery+jsp实现下拉复选框checkboxlist

因为业务需要，做一个下拉复选框，复选框里面的数据全是从数据库中取值的。从网上收了一下，没有找到比较官方的java版的下拉复选框，只搜到http://www.jb51.net/article/24012.htm里面用jQuery实现的效果，好吧，就用它吧……

 

为了方便使用，我把下拉复选框做成了jsp标签，具体过程如下：

 

1.创建Checkboxlist类继承自SimpleTagSupport，代码如下

public class Checkboxlist extends SimpleTagSupport{
	private String sql;
	private String column;
	private String label;
	private String inputId;
	private String inputName;
	private String inputStyle;
	private Boolean showNull;

	@Override
	public void doTag() throws JspException, IOException {
		JspWriter jspWriter= getJspContext().getOut();
                //利用传入的sql从数据库中取得resultSet 
		//以下是用来组装查询的下拉复选框
		
		jspWriter.append("<" + "script type='text/javascript'>");
		jspWriter.append("$(document).ready(function() {Jselect($('#").append(inputId).append("'),{bindid:'").append(inputId).append("',hoverclass:'hover',optionsbind:function(){return ").append(inputId).append("html();}});});");
		jspWriter.append("function ").append(inputId).append("html(){");
		jspWriter.append("var optionshtml=\"<table style='width:100%; border: solid 1px #000;background:#fff;' cellpadding='0' cellspacing='0'>\";");
		for (遍历resultSet) {
			String entry=resultSet每一行
			if (showNull) {
				jspWriter.append("optionshtml=optionshtml+\"<tr><td style='width:20px'><input type='checkbox' value='"+entry+"'/></td><td>"+entry+"</td></tr>\";");
			}else {
				if (!entry.trim().equals("")) {
					jspWriter.append("optionshtml=optionshtml+\"<tr><td style='width:20px'><input type='checkbox' value='"+entry+"'/></td><td>"+entry+"</td></tr>\";");
				}
			}
		}
		jspWriter.append("optionshtml=optionshtml+\"</table>\";");
		jspWriter.append("return optionshtml; }");
		jspWriter.append("</script>");
		jspWriter.append(label).append("：<input id='").append(inputId).append("' name='").append(inputName).append("' style='").append(inputStyle).append("' type='text' readonly='readonly'/>");
		jspWriter.flush();
	}

	public void setSql(String sql) {
		this.sql = sql;
	}

	public void setColumn(String column) {
		this.column = column;
	}
	
	public void setLabel(String label) {
		this.label = label;
	}

	public void setInputId(String inputId) {
		this.inputId = inputId;
	}

	public void setInputName(String inputName) {
		this.inputName = inputName;
	}

	public void setInputStyle(String inputStyle) {
		this.inputStyle = inputStyle;
	}

	public void setShowNull(Boolean showNull) {
		this.showNull = showNull;
	}

	public Boolean getShowNull() {
		return showNull;
	}
}

 

2.在WEB-INF下创建customtag.tld文件：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE taglib PUBLIC "-//Sun Microsystems, Inc.//DTD JSP Tag Library 1.2//EN"
                        "http://java.sun.com/dtd/web-jsptaglibrary_1_2.dtd">
<taglib>
	<tlib-version>1.0</tlib-version>
	<jsp-version>1.2</jsp-version>
	<short-name>cm</short-name>

	<tag>
		<name>checkboxlist</name>
		<tag-class>com.ed.cm.util.customtag.Checkboxlist</tag-class>
		<body-content>empty</body-content>
		<attribute>
			<name>sql</name>
			<required>true</required>
			<description>传入的sql语句，用于构造复选框项</description>
		</attribute>
		<attribute>
			<name>column</name>
			<required>true</required>
		</attribute>
		<attribute>
			<name>label</name>
			<required>true</required>
			<description>下拉复选框前的文字</description>
		</attribute>
		<attribute>
			<name>inputId</name>
			<required>true</required>
			<description>下拉复选框的id属性</description>
		</attribute>
		<attribute>
			<name>inputName</name>
			<required>true</required>
			<description>下拉复选框的name属性</description>
		</attribute>
		<attribute>
			<name>inputStyle</name>
			<required>true</required>
			<description>下拉复选框的style属性，主要设置width</description>
		</attribute>
		<attribute>
			<name>showNull</name>
			<required>true</required>
			<type>Boolean</type>
			<description>数据库取值为null的是否显示</description>
		</attribute>
	</tag>
</taglib>

 

3.创建option_check.js：

(function($){ 
	$.showselect = { 
		init : function(o,options){ 
			var defaults = { 
				bindid : null, //事件绑定在bindid上 
				hoverclass:null, //鼠标移到选项时样式名称 
				optionsbind:function(){} //下拉框绑定函数 
			} 
			var options = $.extend(defaults,options); 
			if(options.optionsbind!=null){//如果绑定函数不为空 
				this._setbind(o,options); 
			} 
			if(options.bindid!=null){ 
				this._showcontrol(o,options); 
			} 
		}, 
		_showcontrol:function(o,options){//控制下拉框显示 
			$("#"+options.bindid).toggle(function(){ 
				$(o).next().slideDown(); 
			},function(){ 
				$(o).next().slideUp(); 
			})
		}, 
		_setbind:function(o,options){//绑定数据 
			var optionshtml="<div style='z-index: 999; position: absolute; height:130px; overflow:auto;'>" 
			+options.optionsbind()+"</div>"; 
			$(o).after(optionshtml); 
			var offset= $(o).offset(); 
			var w=$(o).width(); 
			$(o).next().css({top:offset.top+$(o).height()+7,left:offset.left,width:w}); 
			if(options.hoverclass!=null){ 
				$(o).next().find("tr").hover(function(){$(this).addClass(options.hoverclass);}, 
				function(){$(this).removeClass(options.hoverclass);}); 
			} 
			$(o).next().find("input[type=checkbox]").filter("[lang=checked]").each(function(){$(this).attr("checked","checked");}); 
			$(o).next().find("input[type=checkbox]").click(function(){ 
				var $ckoption=$(this).attr("checked"); 
				if($ckoption){ 
					$(this).attr("checked",""); 
				}else{ 
					$(this).attr("checked","checked"); 
				} 
			}); 
			$(o).next().find("tr").click(function(){ 
				var $ckflag=$(this).find("input[type=checkbox]"); 
				if($ckflag.attr("checked")){ 
					$ckflag.attr("checked",""); 
					$ckflag.attr("lang",""); 
				} 
				else{ 
					$ckflag.attr("checked","checked"); 
					$ckflag.attr("lang","checked"); 
				} 
				var selarray=new Array(); 
				$(o).next().find("input[type=checkbox]").each(function(){ 
					if($(this).attr("checked")) 
					selarray.push($(this).parent().next().text()); 
				}); 
				$(o).val(selarray.join(',')); 
			}); 
			$(o).next().hide(); 
		} 
	} 
	Jselect = function(o,json){ 
		$.showselect.init(o,json); 
	}; 
})(jQuery); 

 4.在jsp中使用，加入一行

<%@ taglib uri="/WEB-INF/customtag.tld" prefix="cm"%>

 添加css样式

<style type="text/css">
.hover 
{ 
background-color: #c0c0c0; 
color: #fff; 
} 
</style>

 引入jquery.js和option_check.js

使用时：

<cm:checkboxlist sql="SELECT XXX FROM XXX where XXX" column="XXX" label="XXX" inputId="XXX" inputName="XXX" inputStyle="width: 200px;" showNull="false"></cm:checkboxlist>

 5.ok，下拉复选框的样式确实有点丑，有兴趣的朋友可以修改一下，改的好看可以给我一份哈，我实在没有美工的天分╮(╯▽╰)╭

 

 

 

评论

1 楼 jayghost 2011-09-03  

我可以很负责任的告诉大家，我已经把这个标签的前台换成了http://www.erichynds.com/jquery/jquery-ui-multiselect-widget/的样子，方法类似，如果需要显示成中文，加上

	$(".multiselect").multiselect({
		checkAllText: "全选",
		uncheckAllText: "不全选",
		noneSelectedText: "请选择",
		selectedText: "选中#/#",
		minWidth: 150
	});