日期:2014-05-16  浏览次数:20484 次

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>
			<req