项目里用到了一个多选下拉框,懒得在网上找,自己试着写了个简单的先用着,贴出来给学习的童鞋参考下。
这段JS控制各种事件(multiSelect.js)
/** * created by yuandong * created date 2012-5-23 * last updated date 2012-6-8 */ jQuery(document).ready(function() { //Click event of select div $('.multiSelectDiv').click(function(e){ var text = $(this).find('input[type=text]'); var hidden = $(this).find('input[type=hidden]'); var target = $(e.target); //If target is text if(target.attr('type') == text.attr('type')) { //Hide other div $('.multiSelectDiv').find('div').each(function(){ $(this).animate({opacity: 'hide'}, 300); }); var div = $(this).find('div'); var offSet = text.offset(); var left = offSet.left; var top = offSet.top; if(div.is(":visible")) { div.animate({opacity: 'hide'}, 300); } else { div.css({"top":top+20,"left":left}).animate({opacity:'show'}, 300); } } //If target is checkbox else if(target.attr('type') == 'checkbox') { var textVal = ''; var hiddenVal = ''; var selectDivObj = $(this); var curCheckboxCount = 0; var selectedCheckboxCount = 0; //Get value by selected checkbox $(this).find('input[type=checkbox][class!=selectAll]').each(function(){ if($(this).is(':checked')) { textVal += $(this).parent().parent().find('span').text() + ','; hiddenVal += $(this).val() + ','; selectedCheckboxCount++; } //When exist checkbox not select,set 'select all' to not select else { selectDivObj.find('input[type=checkbox][class=selectAll]').attr('checked',''); } curCheckboxCount++; }); if(curCheckboxCount>0 && selectedCheckboxCount>0 && curCheckboxCount==selectedCheckboxCount) { selectDivObj.find('input[type=checkbox][class=selectAll]').attr('checked','true'); } text.val(textVal.substring(0,textVal.length-1)); hidden.val(hiddenVal.substring(0,hiddenVal.length-1)); } //If target is clearImg, clear text,hidden,and checkbox value else if($(this).find('img').length>0 && target.attr('name') == 'clearImg') { text.val(''); hidden.val(''); $(this).find('input[type=checkbox]').each(function(){ if($(this).is(":checked")) { $(this).attr("checked",''); } }); } //If target is selectImg, show select else if($(this).find('img').length>0 && target.attr('name') == 'selectImg') { text.click(); } }); //Hide div when user click other area $('html').click(function(e){ //If not multi select div area, return if($(e.target).isChildAndSelfOf (".multiSelectDiv")) { return; } //Else hide select div else { $('.multiSelectDiv').find('div').each(function(){ $(this).animate({opacity: 'hide'}, 300); }); } }); //Select all items $('.selectAll').click(function(e){ var all = $(this); all.parent().parent().parent().find('input[type=checkbox]').each(function(){ if(all.is(":checked")) { $(this).attr("checked",'true'); } else { $(this).attr("checked",''); } }); }); //Check current elements jQuery.fn.isChildAndSelfOf = function(b){ return (this.closest(b).length > 0); }; //On init initMultiSelect(); }); //Init select function initMultiSelect() { $('.multiSelectDiv').each(function(){ var hiddenVal = $(this).find('input[type=hidden]').val(); var textVal = ''; var curCheckboxCount = 0; var selectedCheckboxCount = 0; var selectDivObj = $(this); //Select checkBox and set up input value after do query if(hiddenVal != '') { $(this).find('input[type=checkbox][class!=selectAll]').each(function(){ if(hiddenVal.indexOf($(this).val()) != -1) { $(this).attr('checked',true); textVal += $(this).parent().parent().find('span').text() + ','; selectedCheckboxCount ++; } curCheckboxCount ++; }); $(this).find('input[type=text]').val(textVal.substring(0,textVal.length-1)); //If checkbox count of current select is equals selected checkbox count,checked 'select all' if(curCheckboxCount>0 && selectedCheckboxCount>0 && curCheckboxCount==selectedCheckboxCount) { selectDivObj.find('input[type=checkbox][class=selectAll]').attr('checked','true'); } } //Set up the width of the select div var textWidth = 0; var img1Width = 0; var img2Width = 0; var textObj = $(this).find('input[type=text]'); textWidth = textObj.width(); var img1Obj = $(this).find('img'); var tempImgObj = new Image(); tempImgObj.src = img1Obj.attr( 'src'); img1Width = tempImgObj.width; var img2Obj = img1Obj.next('img'); tempImgObj.src = img2Obj.attr( 'src'); img2Width = tempImgObj.width; $(this).width(textWidth + img1Width + img2Width + 10); }); }
标签类:
public class MultiSelectTaglib extends TagSupport { //下拉框数据,初始化下拉框的数据 private List<LabelValueBean> items; //名称参数,传到后台的名称 private String nameParams; //id参数,传到后台的id private String idParams; //当前id的值,主要用于查询后再次选中查询前的checkbox private String curIdVal; //样式,设置文本框样式 private String textStyle; //是否只读(可选),设置文本框只读属性,默认只读 private boolean readonly = true; //是否需要放大镜(可选),设置是否有放大镜图标,默认有放大镜图标 private boolean hasSelectImg = true; //是否需要清空图标(可选),设置是否有清空图标,默认有清空图标 private boolean hasClearImg = true; //下拉框高度(可选),设置高度后,超过高度后会显示下拉框 private String selectHeight; //下拉框宽度(可选),设置宽度后,超过高度后会显示下拉框,默认200px private String selectWidth; //是否需要全选功能(可选) private boolean hasAllSelector; //国际化用到的参数 private final String SELECT_ALL = "select_all"; private final String RESOURCE_NAME = "ssb_application_resource"; /** * 重写doStartTag */ public int doStartTag() { //得到资源文件 Locale locale = pageContext.getRequest().getLocale(); ResourceBundle bundle = ResourceBundle.getBundle(RESOURCE_NAME, locale); Map<String, String> messages = new HashMap<String, String>(); messages.put(SELECT_ALL, bundle.getString("multiSelect.selectAll")); JspWriter out = pageContext.getOut(); if (out != null) { try { out.print(getContentString(messages)); } catch (IOException e) { PPMLog.debug("多选下拉框标签异常: " + e.getMessage()); } } return SKIP_BODY; } /** * 拼接显示的多选框域 * @return */ private String getContentString(Map<String, String> messages) { //用户存放HTML内容串 StringBuffer contentStr = new StringBuffer() ; //如果没设置宽度,默认200px if(StringHelper.isEmpty(selectWidth)) { selectWidth = "200px"; } //contentStr.append("<div class=\"multiSelectDiv\" style=\"width:" + selectWidth + "\">") contentStr.append("<div class=\"multiSelectDiv\">") .append("<input type=\"text\" name=\"").append(nameParams).append("\""); //如果需要把文本框设置为只读 if(readonly) { contentStr.append("readonly=\"readonly\""); } //文本框默认样式 String textDefStyle = "width:200px"; contentStr.append(" style=\"").append(StringHelper.isEmpty(textStyle) ? textDefStyle : textStyle).append("\"/>") .append("<input type=\"hidden\" name=\"").append(idParams).append("\" value=\"" + curIdVal + "\"/>"); HttpServletRequest request = (HttpServletRequest)pageContext.getRequest(); if(hasSelectImg) { String imgPath = request.getContextPath() + "/images/projectinfo/search.gif"; contentStr.append("<img src=\"" + imgPath + "\" class=\"icon\" style=\"cursor:pointer\" name=\"selectImg\"/>"); } //如果需要清除图标 if(hasClearImg) { String imgPath = request.getContextPath() + "/images/clear.gif"; contentStr.append("<img src=\"" + imgPath + "\" class=\"icon\" style=\"cursor:pointer\" name=\"clearImg\"/>"); } /* * 如果以后要支持自定义其他样式,可以将这里的高度和宽度去掉, 直接自定义下拉框的样式, * 注意这里默认的"display:none;position: absolute;"是必需的样式,如果自定义里有同样属性定义,会直接覆盖同名属性的值. * 这里为了使用简便,暂时不支持 String selectDefStyle = "display:none;position: absolute;"; contentStr.append(" style=\"").append(StringHelper.isEmpty(selectStyle) ? selectDefStyle+selectStyle : selectStyle).append("\"/>"); */ contentStr.append("<div style=\"display:none;position: absolute;"); //如果设置了下拉框高度 if(StringHelper.isNotEmpty(selectHeight)) { contentStr.append("overflow:auto;height:" + selectHeight + ";"); } contentStr.append("width:" + selectWidth + ";"); contentStr.append("\">"); contentStr.append(" <table cellspacing=\"1\" class=\"tb_datalist\">"); //如果list不为空,生成下拉列表 if(items.isEmpty()) { contentStr.append("<tr><td><td></tr>"); } else { //如果需要全选功能 if(hasAllSelector) { contentStr.append("<tr class=\"tr_title\">"); contentStr.append("<td width=\"10%\">") .append(" <input class=\"selectAll\" value=\"\" type=\"checkbox\"/></td>"); contentStr.append("<td width=\"90%\"><span>").append(messages.get(SELECT_ALL)).append("</span></td>"); contentStr.append("</tr>"); } //生成下拉列表 for(LabelValueBean labelVal:items) { if(labelVal != null) { contentStr.append("<tr>"); contentStr.append("<td width=\"10%\">") .append(" <input type=\"checkbox\" value=\"" + labelVal .getValue()+ "\"/></td>"); contentStr.append("<td width=\"90%\">").append("<span>" + labelVal.getLabel() + "</span></td>"); contentStr.append("</tr>"); } } } contentStr.append("</table>"); contentStr.append("</div>"); contentStr.append("</div>"); return contentStr.toString() ; } public void release() { super.release(); } public void setNameParams(String nameParams) { this.nameParams = nameParams; } public void setStyle(String textStyle) { this.textStyle = textStyle; } public void setIdParams(String idParams) { this.idParams = idParams; } public void setCurIdVal(String curIdVal) { this.curIdVal = curIdVal; } public void setItems(List<LabelValueBean> items) { this.items = items; } public void setHasClearImg(Boolean hasClearImg) { this.hasClearImg = hasClearImg; } public void setSelectWidth(String selectWidth) { this.selectWidth = selectWidth; } public void setSelectHeight(String selectHeight) { this.selectHeight = selectHeight; } public void setHasAllSelector(boolean hasAllSelector) { this.hasAllSelector = hasAllSelector; } }
tld文件(multiSelect.tld):
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE taglib PUBLIC "-//Sun Microsystems, Inc.//DTD JSP Tag Library 1.1//EN" "http://java.sun.com/j2ee/dtds/web-jsptaglibrary_1_1.dtd"> <taglib> <tlibversion>1.0</tlibversion> <jspversion>1.1</jspversion> <shortname>multiSelectTaglib</shortname> <uri>/multiSelectTaglib</uri> <tag> <name>multiSelect</name> <tagclass>com.zte.ppm.baseutil.business.multiSelectTaglib.service.MultiSelectTaglib</tagclass> <bodycontent>JSP</bodycontent> <info>check if the user have the right access</info> <attribute> <name>items</name> <required>true</required> <rtexprvalue>true</rtexprvalue> </attribute> <attribute> <name>curIdVal</name> <required>true</required> <rtexprvalue>true</rtexprvalue> </attribute> <attribute> <name>idParams</name> <required>true</required> <rtexprvalue>true</rtexprvalue> </attribute> <attribute> <name>nameParams</name> <required>true</required> <rtexprvalue>true</rtexprvalue> </attribute> <attribute> <name>textStyle</name> <required>false</required> <rtexprvalue>true</rtexprvalue> </attribute> <attribute> <name>readonly</name> <required>false</required> <rtexprvalue>true</rtexprvalue> </attribute> <attribute> <name>hasSelectImg</name> <required>false</required> <rtexprvalue>true</rtexprvalue> </attribute> <attribute> <name>hasClearImg</name> <required>false</required> <rtexprvalue>true</rtexprvalue> </attribute> <attribute> <name>selectHeight</name> <required>false</required> <rtexprvalue>true</rtexprvalue> </attribute> <attribute> <name>selectWidth</name> <required>false</required> <rtexprvalue>true</rtexprvalue> </attribute> <attribute> <name>hasAllSelector</name> <required>false</required> <rtexprvalue>true</rtexprvalue> </attribute> </tag> </taglib>
使用时导入相应tld文件和JS文件以及jQuery包:
<%@ taglib uri="/WEB-INF/multiSelect.tld" prefix="mSelect"%>
<script type="text/javascript" src="${appRoot}/js/multiSelect.js"></script>
<script type="text/javascript" src="${appRoot}/js/jquery/jquery-1.4.2.min.js"></script>
使用方法:
<mSelect:multiSelect nameParams="con.unitName" items="${dpgReportForm.operateUnitList}"
curIdVal="${dpgReportForm.con.unitName}" idParams="con.unitName"
hasClearImg="true" selectHeight="200px" hasAllSelector="true"/>
效果:
如果要实现注释中说的自定义下拉框样式且将全选选择框置顶,可以另外定义两个div,一个放全选按钮,一个放下面的选择数据。