【javaweb】左边选择右边展现的tld

本文介绍了一种自定义的双向选择器实现方法,通过创建一个 JSP 标签库来生成具有灵活配置选项的选择器组件。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在做web的时候,有时候可能要用到选择器,一般是在权限什么的,如图

为了做出这种效果,我们首先需要一个tld,tld的格式什么的就不解释了,一搜一大把,我们直接上代码
tld

<tag>
    <name>selectTag</name>
    <tagclass>com.cniia.ny.web.util.SelectTag</tagclass>
    <bodycontent>empty</bodycontent>
    <attribute>
      <name>arl</name>
      <required>false</required>
      <rtexprvalue>true</rtexprvalue>
    </attribute>
    <attribute>
      <name>preArl</name>
      <required>false</required>
      <rtexprvalue>true</rtexprvalue>
    </attribute>
    <attribute>
      <name>arr</name>
      <required>false</required>
      <rtexprvalue>true</rtexprvalue>
    </attribute>
    <attribute>
      <name>preArr</name>
      <required>false</required>
      <rtexprvalue>true</rtexprvalue>
    </attribute>
    <attribute>
      <name>selectItem</name>
      <required>false</required>
      <rtexprvalue>true</rtexprvalue>
    </attribute>
    <attribute>
      <name>waitItem</name>
      <required>false</required>
      <rtexprvalue>true</rtexprvalue>
    </attribute>
    <attribute>
      <name>leftSort</name>
      <required>false</required>
      <rtexprvalue>true</rtexprvalue>
    </attribute>
    <attribute>
      <name>rightSort</name>
      <required>false</required>
      <rtexprvalue>true</rtexprvalue>
    </attribute>
    <attribute>
      <name>leftId</name>
      <required>false</required>
      <rtexprvalue>true</rtexprvalue>
    </attribute>
    <attribute>
      <name>size</name>
      <required>false</required>
      <rtexprvalue>true</rtexprvalue>
    </attribute>
    <attribute>
      <name>leftValue</name>
      <required>false</required>
      <rtexprvalue>true</rtexprvalue>
    </attribute>
    <attribute>
      <name>rightId</name>
      <required>false</required>
      <rtexprvalue>true</rtexprvalue>
    </attribute>
    <attribute>
      <name>rightValue</name>
      <required>false</required>
      <rtexprvalue>true</rtexprvalue>
    </attribute>
    <attribute>
      <name>width</name>
      <required>false</required>
      <rtexprvalue>true</rtexprvalue>
    </attribute>
    <attribute>
      <name>align</name>
      <required>false</required>
      <rtexprvalue>true</rtexprvalue>
    </attribute>
    <attribute>
      <name>itemStyle</name>
      <required>false</required>
      <rtexprvalue>true</rtexprvalue>
    </attribute>
    <attribute>
      <name>moveStyle</name>
      <required>false</required>
      <rtexprvalue>true</rtexprvalue>
    </attribute>
    <attribute>
      <name>selectStyle</name>
      <required>false</required>
      <rtexprvalue>true</rtexprvalue>
    </attribute>
    <attribute>
      <name>leftName</name>
      <required>false</required>
      <rtexprvalue>true</rtexprvalue>
    </attribute>
    <attribute>
      <name>rightName</name>
      <required>false</required>
      <rtexprvalue>true</rtexprvalue>
    </attribute>
    <attribute>
      <name>contextPath</name>
      <required>false</required>
      <rtexprvalue>true</rtexprvalue>
    </attribute>
  </tag>

与tld对应的就是他的class了,也就是java文件,名为SelectTag.java

package com.cniia.ny.web.util;

import javax.servlet.jsp.JspException;
import javax.servlet.jsp.JspTagException;
import javax.servlet.jsp.tagext.TagSupport;
import java.util.*;
import java.io.*;
import java.lang.reflect.*;

/**
 * @author yug
 * 
 * @mender:gu_daping
 *
 * 双向选择框的Tag
 */
public class SelectTag extends TagSupport
{
  //左边列表框的值
  ArrayList arl = new ArrayList();

  //左边列表的预设值
  ArrayList preArl = new ArrayList();
  
  //右边列表框的值
  ArrayList arr = new ArrayList();

  //右边列表的预设值
  ArrayList preArr = new ArrayList();
  
  //左边标题显示
  private String selectItem = null;

  //右边标题显示
  private String waitItem = null;

  //左边是否可以上下排序
  private String leftSort = null;

  //右边是否可以上下排序
  private String rightSort = null;

  //左边列表框的id值
  private String leftId = null;

  //左边列表框的value值
  private String leftValue = null;

  //右边列表框的id值
  private String rightId = null;

  //右边列表框的value值
  private String rightValue = null;

  //整个双向select框的宽度
  private String width = null;

  //整个双向select框的偏向
  private String align = null;

  //标题的样式
  private String itemStyle = null;

  //移动按钮的样式
  private String moveStyle = null;

  //select框的样式
  private String selectStyle = null;

  //左边列表框的name值
  private String leftName = null;

  //右边列表框的name值
  private String rightName = null;

  private static long secq = System.currentTimeMillis();

  //左边列表框的id
  private String lid = null;

  //左边列表框的id
  private String rid = null;

  //列表的size
  private Long size = new Long(10);
  
  private String contextPath = null;
  
  /**
   * @return 返回 leftName。

   */
  public String getLeftName()
  {
    return leftName;
  }

  /**
   * @param leftName 要设置的 leftName。

   */
  public void setLeftName(String leftName)
  {
    this.leftName = leftName;
  }

  /**
   * @return 返回 rightName。

   */
  public String getRightName()
  {
    return rightName;
  }

  /**
   * @param rightName 要设置的 rightName。

   */
  public void setRightName(String rightName)
  {
    this.rightName = rightName;
  }

  /**
   * @return 返回 selectStyle。

   */
  public String getSelectStyle()
  {
    return selectStyle;
  }

  /**
   * @param selectStyle 要设置的 selectStyle。

   */
  public void setSelectStyle(String selectStyle)
  {
    this.selectStyle = selectStyle;
  }

  /**
   * @return 返回 moveStyle。

   */
  public String getMoveStyle()
  {
    return moveStyle;
  }

  /**
   * @param moveStyle 要设置的 moveStyle。

   */
  public void setMoveStyle(String moveStyle)
  {
    this.moveStyle = moveStyle;
  }

  /**
   * @return 返回 itemStyle。

   */
  public String getItemStyle()
  {
    return itemStyle;
  }

  /**
   * @param itemStyle 要设置的 itemStyle。

   */
  public void setItemStyle(String itemStyle)
  {
    this.itemStyle = itemStyle;
  }

  /**
   * @return 返回 align。

   */
  public String getAlign()
  {
    return align;
  }

  /**
   * @param align 要设置的 align。

   */
  public void setAlign(String align)
  {
    this.align = align;
  }

  /**
   * @return 返回 width。

   */
  public String getWidth()
  {
    return width;
  }

  /**
   * @param width 要设置的 width。

   */
  public void setWidth(String width)
  {
    this.width = width;
  }

  /**
   * @return 返回 leftId。

   */
  public String getLeftId()
  {
    return leftId;
  }

  /**
   * @param leftId 要设置的 leftId。

   */
  public void setLeftId(String leftId)
  {
    this.leftId = leftId;
  }

  /**
   * @return 返回 leftValue。

   */
  public String getLeftValue()
  {
    return leftValue;
  }

  /**
   * @param leftValue 要设置的 leftValue。

   */
  public void setLeftValue(String leftValue)
  {
    this.leftValue = leftValue;
  }

  /**
   * @return 返回 rightId。

   */
  public String getRightId()
  {
    return rightId;
  }

  /**
   * @param rightId 要设置的 rightId。

   */
  public void setRightId(String rightId)
  {
    this.rightId = rightId;
  }

  /**
   * @return 返回 rightValue。

   */
  public String getRightValue()
  {
    return rightValue;
  }

  /**
   * @param rightValue 要设置的 rightValue。

   */
  public void setRightValue(String rightValue)
  {
    this.rightValue = rightValue;
  }

  /**
   * @return 返回 leftSort。

   */
  public String getLeftSort()
  {
    return leftSort;
  }

  /**
   * @param leftSort
   *            要设置的 leftSort。

   */
  public void setLeftSort(String leftSort)
  {
    this.leftSort = leftSort;
  }

  /**
   * @return 返回 rightSort。

   */
  public String getRightSort()
  {
    return rightSort;
  }

  /**
   * @param rightSort
   *            要设置的 rightSort。

   */
  public void setRightSort(String rightSort)
  {
    this.rightSort = rightSort;
  }

  /**
   * @return 返回 arl。

   */
  public ArrayList getArl()
  {
    return arl;
  }

  /**
   * @param arl
   *            要设置的 arl。

   */
  public void setArl(ArrayList arl)
  {
    this.arl = arl;
  }

  public ArrayList getPreArl() {
	return preArl;
}

public void setPreArl(ArrayList preArl) {
	this.preArl = preArl;
}

/**
   * @return 返回 arr。

   */
  public ArrayList getArr()
  {
    return arr;
  }

  /**
   * @param arr
   *            要设置的 arr。

   */
  public void setArr(ArrayList arr)
  {
    this.arr = arr;
  }

  public ArrayList getPreArr() {
	return preArr;
}

public void setPreArr(ArrayList preArr) {
	this.preArr = preArr;
}

/**
   * @return 返回 selectItem。

   */
  public String getSelectItem()
  {
    return selectItem;
  }

  /**
   * @param selectItem
   *            要设置的 selectItem。

   */
  public void setSelectItem(String selectItem)
  {
    this.selectItem = selectItem;
  }

  /**
   * @return 返回 waitItem。

   */
  public String getWaitItem()
  {
    return waitItem;
  }
  
  public Long getSize() {
	return size;
}

public void setSize(Long size) {
	this.size = size;
}

public String getContextPath() {
	return contextPath;
}

public void setContextPath(String contextPath) {
	this.contextPath = contextPath;
}

/**
   * @param waitItem
   *            要设置的 waitItem。

   */
  public void setWaitItem(String waitItem)
  {
    this.waitItem = waitItem;
  }

  private static Method getMethod(Method[] objMethods, String strMethodName)
  {
    for(int i = 0; i < objMethods.length; i++)
    {
      if(objMethods[i].getName().equalsIgnoreCase("get" + strMethodName))
      {
        return objMethods[i];
      }
    }
    return null;
  }

  private static String getValue(ArrayList myarr, int j, String name)
  {
    String result = null;
    if(myarr == null || myarr.size() == 0)
    {
      result = "";
    }
    else
    {
      try
      {
        String className = myarr.get(j).getClass().getName();
        Class c = Class.forName(className);
        Method[] objMethods = c.getMethods();
        Method obj = getMethod(objMethods, name);
        Object res = obj.invoke(myarr.get(j), null);
        result = String.valueOf(res);
      }
      catch(Exception e1)
      {
        e1.printStackTrace();
      }
    }
    return result;
  }

  public SelectTag()
  {
    selectItem = "";
    waitItem = "";
    rightSort = "false";
    leftSort = "false";
    width = "80%";
    align = "center";
    itemStyle = "item_two_select";
    moveStyle = "button_select";
    selectStyle = "two_select";
    leftName = "";
    rightName = "";
  }

  // Method called when the closing tag is encountered
  public int doStartTag() throws JspException
  {

    lid = "Select" + String.valueOf(secq++);
    rid = "Wait" + String.valueOf(secq++);
    StringBuffer body = new StringBuffer();
    body = body
           .append("<script language=\"javascript\">\n function openwin(url, l, t, w ,h){\n open(url,'','toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=no,width='+w +',height='+ h +',left='+ l +',top='+ t);\n}\n");
    body = body
           .append("function MoveSingleItem(sel_source, sel_dest){\n if (sel_source.selectedIndex==-1)\n return;\n var slength = sel_source.options.length;\n for(i=0;i<sel_source.options.length; i++){\n if(sel_source.options[i].selected){\n var newOption = document.createElement(\"option\"); \n newOption.text = sel_source.options[i].text; \n newOption.value = sel_source.options[i].value; \n sel_dest.add(newOption);\n sel_source.options.remove(i);i=i-1;\n}\n}\n}\n");
    body = body
           .append("function MoveAllItems(sel_source, sel_dest){\n var sel_source_len = sel_source.length;\n for (var j=0; j<sel_source_len; j++){\n var newOption = document.createElement(\"option\"); \n newOption.text = sel_source.options[j].text; \n newOption.value = sel_source.options[j].value;\n sel_dest.add(newOption);\n }\n while((k=sel_source.length-1)>=0){\n sel_source.options.remove(k);\n}\n return false;\n}\n");
    body = body
           .append("function SelectAll(theSel){\n for (i = 0 ;i<theSel.length;i++)\n theSel.options[i].selected = true;\n}\n");
    body = body.append("var curOption=new Option();\n");
    body = body
           .append("function up(obj){\n if(obj.selectedIndex!=-1){\n var obj1=obj.options(obj.selectedIndex);\n if (obj.selectedIndex>0)\n obj1.swapNode(obj1.previousSibling);\n}\n}\n");
    body = body
           .append(
           "function down(obj){\n if(obj.selectedIndex!=-1){\n var obj1=obj.options(obj.selectedIndex);\n if (obj.selectedIndex<obj.options.length-1)\n obj1.swapNode(obj1.nextSibling);\n}\n}\n");
    body = body
           .append(
           "function swapOption(obj){\n if(curOption!=null && curOption!=obj.options[getIndex(obj)] && getIndex(obj)>-1 && getIndex(obj)<obj.size)\n curOption.swapNode(obj.options[getIndex(obj)]);\n}\n");
    body = body
           .append("function getIndex(obj){\n var theIndex=Math.floor((event.offsetY+2)/(obj.offsetHeight/obj.size));\n if(theIndex<0)\n theIndex=0;\n else if(theIndex>obj.options.length)\n theIndex=obj.options.length;\n return theIndex;\n}\n");
    body = body.append("</script>\n");
    body = body.append("");
    body = body.append("<table width=\"" + width + "\" align=\"" + align + "\" border=\"0\" cellpadding=\"2\" cellspacing=\"0\">\n");
    body = body.append("<tr>\n <td width=\"48%\" align=center valign=\"top\">\n");
    body = body.append("<table width=\"100%\"  border=\"0\" cellspacing=\"0\" cellpadding=\"0\">\n");
    body = body.append("<tr bgcolor=\"#FFFFFF\">\n");
    body = body.append("<td width=\"3\" height=\"23\"> </td>\n <td valign=\"bottom\">\n");
    body = body.append("<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\">\n");
    body = body.append("<tr><td class=\"" + itemStyle + "\">" + selectItem + "</td></tr></table></td>\n");
    body = body.append("<td align=\"right\" valign=\"bottom\">\n");
    body = body.append("<table width=\"100%\"  border=\"0\" cellspacing=\"0\" cellpadding=\"0\">\n");
    if(leftSort.equals("true"))
    {
      body = body.append("<tr><td align=\"right\"><button class=\"" + moveStyle + "\" onclick=\"up(" + lid + ")\">↑</button></td>\n");
      body = body.append("<td width=\"25\" align=\"right\"><button class=\"" + moveStyle + "\" onclick=\"down(" + lid + ")\">↓</button></td></tr>\n");
    }
    body = body.append("</table>\n </td>\n <td width=\"3\"> </td>\n </tr>\n </table>\n");
    body = body.append("<table width=\"100%\"  border=\"0\" cellspacing=\"0\" cellpadding=\"3\">\n");
    body = body.append("<tr>\n <td bgcolor=\"#FFFFFF\" align=\"center\">\n");
    body = body.append("<select name=\"" + leftName + "\" size=" + size + " multiple  class=\"" + selectStyle + "\" id=\"" + lid + "\" ondblclick=\"MoveSingleItem(" + lid + ", " + rid + ")\" >\n");
    if(arl == null || arl.size() == 0)
    {
      body = body.append("");
    }
    else
    {
      for(int i = 0; i < arl.size(); i++)
      {
		String lValue = getValue(arl, i, leftId);
		body = body.append("<option value=" + lValue);
		for(int ik=0; ik<preArl.size(); ik++){
			String preLValue = getValue(preArl, ik, leftId);
			if(preLValue!=null && preLValue.equals(lValue)){
				body.append("selected=\"selected\"");
			}
		}
		body.append(">" + getValue(arl, i, leftValue) + "</option>\n");
      }
    }
    body = body.append("</select>\n </td>\n </tr>\n </table>\n </td>\n ");
    body = body.append("<td width=\"4%\" align=\"center\" valign=\"middle\">\n");
    body = body.append("<table width=\"100%\"  border=\"0\" cellpadding=\"0\" cellspacing=\"0\">\n");
    body = body.append("<tr>\n <td height=\"159\" align=\"center\" bgcolor=\"#FFFFFF\">\n");
    body = body.append("<table border=\"0\" cellpadding=\"5\" cellspacing=\"0\">\n");
    body = body.append("<tr><td height=\"37\"><a class=\"" + moveStyle + "\" href=\"#\"><img border=\"0\" src=\"../images/move_all_to_right.png\" width='20' height='20' onclick=\"MoveAllItems(" + lid + ", " + rid + ")\"/></a></td></tr>\n");
    body = body.append("<tr><td height=\"37\"><a class=\"" + moveStyle + "\" href=\"#\"><img border=\"0\" src=\"../images/move_single_to_right.png\" width='20' height='20' onclick=\"MoveSingleItem(" + lid + ", " + rid + ")\"/></a></td></tr>\n");
    body = body.append("<tr><td height=\"37\"><a class=\"" + moveStyle + "\" href=\"#\"><img border=\"0\" src=\"../images/move_single_to_left.png\" width='20' height='20' onclick=\"MoveSingleItem(" + rid + ", " + lid + ")\"/></a></td></tr>\n");
    body = body.append("<tr><td height=\"37\"><a class=\"" + moveStyle + "\" href=\"#\"><img border=\"0\" src=\"../images/move_all_to_left.png\"  width='20' height='20' onclick=\"MoveAllItems(" + rid + ", " + lid + ")\"/></a></td></tr>\n");
    body = body.append("</table>\n </td>\n </tr>\n </table>\n </td>\n");
    body = body.append("<td width=\"48%\" align=center valign=\"top\">\n");
    body = body.append("<table width=\"100%\"  border=\"0\" cellspacing=\"0\" cellpadding=\"0\">\n");
    body = body.append("<tr bgcolor=\"#FFFFFF\"><td width=\"3\"> </td>\n");
    body = body.append("<td height=\"23\" valign=\"bottom\"><table border=\"0\" cellspacing=\"0\" cellpadding=\"0\">\n");
    body = body.append("<tr><td class=\"" + itemStyle + "\">" + waitItem + "</td></tr></table></td>\n");
    body = body.append("<td valign=\"bottom\">\n");
    body = body.append("<table width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\">\n");
    if(rightSort.equals("true"))
    {
      body = body.append("<tr><td align=\"right\"><button class=\"" + moveStyle + "\" onclick=\"up(" + rid + ")\">↑</button></td>\n");
      body = body.append("<td width=\"25\" align=\"right\"><button class=\"" + moveStyle + "\" onclick=\"down(" + rid + ")\">↓</button></td></tr>\n");
    }
    body = body.append("</table></td><td width=\"3\"> </td></tr></table>\n");
    body = body.append("<table width=\"100%\" border=\"0\" cellpadding=\"3\" cellspacing=\"0\">\n");
    body = body.append("<tr><td bgcolor=\"#FFFFFF\" align=\"center\">\n");
    body = body.append("<select name=\"" + rightName + "\" size=" + size + " multiple=\"true\" class=\"" + selectStyle + "\" id=\"" + rid + "\" ondblclick=\"MoveSingleItem(" + rid + ", " + lid + ")\" >\n");
    if(arr == null || arr.size() == 0)
    {
      body = body.append("");
    }
    else
    {
      for(int i = 0; i < arr.size(); i++)
      {
    	String rValue = getValue(arr, i, rightId);
        body = body.append("<option value=" + rValue);
        for(int ik=0; ik<preArr.size(); ik++){
			String preRValue = getValue(preArr, ik, rightId);
			if(preRValue!=null && preRValue.equals(rValue)){
				body.append(" selected=\"selected\" ");
			}
		}
        body.append(">" + getValue(arr, i, rightValue) + "</option>\n");
      }
    }
    body = body.append("</select>\n </td></tr></table></td></tr></table>\n");
    body = body.append("");
    String sBody = body.toString();
    try
    {
      pageContext.getOut().print(sBody);
    }
    catch(IOException e)
    {
      throw new JspTagException("Tag: " + e.getMessage());
    }
    return SKIP_BODY;
  }

  // Method called when the closing tag is encountered
  public int doEndTag() throws JspException
  {
    return EVAL_PAGE;
  }

  public void release()
  {
    super.release();
	}
}

这两步做好需要在web.xml里配置一下,此处不赘述

在jsp里引用需要

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

其中pub为变量名,pub.tld为文件名
在你需要的地方写上

<pub:selectTag align="left" arl="${userList}"  leftId="userid"  leftName="username"
							leftValue="username" rightId="userid" rightValue="username" rightName="userRead" selectStyle="two_select"
							itemStyle="item_two_select" moveStyle="button_select" size="15" width="95%" contextPath="${contextPath}" />
						<input type="hidden" name="userReadArr" value=""/>


其中arl为你传过来的值,其他标签在java文件中有注明,
至此,一个和文章开头图片中的效果就做好了,是不是很开森?


本文为原创,转载请注明出处,谢谢

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值