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，下拉复选框的样式确实有点丑，有兴趣的朋友可以修改一下，改的好看可以给我一份哈，我实在没有美工的天分╮(╯▽╰)╭