jeecg3.5版本中comboBox标签的使用及完善

jeecg的官方文档是这样介绍comboBox标签的使用的：

属性名	类型	描述	是否必须	默认值
name	string	控件名称	是	null
url	string	远程数据访问	是	null
id	string	唯一标识	是	null
text	string	显示文本	是	null
width	string	宽度	否	null
listWidth	string	下拉框宽度	否	null
listHeight	string	下拉框高度	否	null

用法：

<t:comboBox url="jeecgDemoController.do?combox" name="sex" text="userName" id="id"></t:comboBox>

但没有介绍远程数据返回时要以什么格式返回，找到jeecgDemoController.do?combox对应的代码发现是这样的：

@RequestMapping(params = "combox")
	@ResponseBody
	public List<JeecgDemo> combox(HttpServletRequest request, DataGrid dataGrid) {
		CriteriaQuery cq = new CriteriaQuery(JeecgDemo.class);
		List<JeecgDemo> ls = this.jeecgDemoService.getListByCriteriaQuery(cq, false);
		return ls;
	}

直接返回实体对象的列表的json封装，但我试过后发现这是错的！观察源码发现这个标签实际上是对jquery easyui的combox的一个封装，如下：

StringBuffer sb = new StringBuffer();
		ComboBox comboBox=new ComboBox();
		comboBox.setText(text);
		comboBox.setId(id);
		sb.append("<script type=\"text/javascript\">"
				+"$(function() {"
				+"$(\'#"+name+"\').combobox({"
				+"url:\'"+url+"&id="+id+"&text="+text+"\',"
				+"editable:\'false\',"
				+"valueField:\'id\',"
				+"textField:\'text\'," 
				+"width:\'"+width+"\'," 
				+"listWidth:\'"+listWidth+"\'," 
				+"listHeight:\'"+listWidth+"\'," 
				+"onChange:function(){"
				+"var val = $(\'#"+name+"\').combobox(\'getValues\');"
				+"$(\'#"+name+"hidden\').val(val);"
				+"}"
				+"});"
				+"});"
				+"</script>");
		sb.append("<input type=\"hidden\" name=\""+name+"\" id=\""+name+"hidden\" > "
				+"<input class=\"easyui-combobox\" "
				+"multiple=\"true\" panelHeight=\"auto\" name=\""+name+"name\" id=\""+name+"\" >");
		return sb;

其中定义了下拉框中的value取的是id这个字段的值，text取的是text这个字段的值：

+"valueField:\'id\',"
+"textField:\'text\',"

所以返回的数据格式就清楚了，必须是类似于以下格式

{[id:'objId',text:'value'],[
id:'objId',text:'value'
]}

我们可以用hashmap或自己写一个类来封装要返回的数据，然后放到list或数组中返回，我这边直接用了jeecg中的ComboBox这个类：

package org.jeecgframework.core.common.model.json;


/**
 * 后台向前台返回JSON，用于easyui的datagrid
 * 
 * @author
 * 
 */
public class ComboBox {

	private String id;
	private String text;
	private boolean selected;
	public String getId() {
		return id;
	}

	public void setId(String id) {
		this.id = id;
	}

	public String getText() {
		return text;
	}

	public void setText(String text) {
		this.text = text;
	}

	public boolean isSelected() {
		return selected;
	}

	public void setSelected(boolean selected) {
		this.selected = selected;
	}
}

最后在controller中的代码大概如下：

@RequestMapping(params = "combox")
	@ResponseBody
	public List<ComboBox> combox(HttpServletRequest request, DataGrid dataGrid) {
		CriteriaQuery cq = new CriteriaQuery(ChannelEntity.class);
		List<ChannelEntity> ls = this.channelService.getListByCriteriaQuery(cq, false);
		List<ComboBox> comboxList = new ArrayList<ComboBox>(ls.size());
		for (ChannelEntity channel : ls) {
			ComboBox comboBox = new ComboBox();
			comboBox.setId(channel.getId());
			comboBox.setText(channel.getName());
			comboxList.add(comboBox);
		}
		return comboxList;
	}

需要先从数据库中取了返回的数据，再封装成ComboBox。

象上面这样就大概可以使用jeecg中的comboBox标签了。

但jeecg3.5中的omboBox标签存在两个问题：

1. 只能多选（居然没提供可以设置单选的属性，呃）

2.不能设置默认选中的值（这在编辑界面是必须的呀^_^)

所以我自己对jeecg的代码稍微做了些修改，以支持上面这两个需求。

1.支持设置单选，多选的属性

在ComboBoxTag这个类中增加一个属性和对应的setter方法，如下：

private boolean multiple = true;
public void setMultiple(boolean multiple) {
		this.multiple = multiple;
	}

修改ComboBoxTag这个类中的end方法，处理multiple属性，如下：

.append("multiple:").append((Boolean.toString(this.multiple))).append(",")

在标签定义文件（WEB-INF\tld\easyui.tld）中增加multiple属性，如下：

<attribute>
			<name>multiple</name>
			<rtexprvalue>true</rtexprvalue>
			<description>是否多选</description>
		</attribute>

这样只要在使用comboBox标签时在代码中设置multiple属性为false就可以支持单选了。

2.增加设置默认选中的值的属性

在ComboBoxTag这个类中增加一个属性和对应的setter方法，如下：

private String selectedValue;
public void setSelectedValue(String selectedValue) {
		this.selectedValue = selectedValue;
	}

修改ComboBoxTag这个类中的end方法，处理selectedValue属性，如下：

if (StringUtil.isNotEmpty(this.selectedValue)) {
			sb.append("$(\'#").append(name).append("\').combobox(\'setValue\',\'").append(this.selectedValue).append("\');");
		}

在标签定义文件（WEB-INF\tld\easyui.tld）中增加selectedValue属性，如下：

<attribute>
			<name>selectedValue</name>
			<rtexprvalue>true</rtexprvalue>
			<description>默认选中值</description>
		</attribute>

这样只要在使用comboBox标签时在代码中设置selectedValue的值就就可以支持设置默认值了。

最后附上完整的代码：

jsp

<t:comboBox url="channelController.do?combox" name="channelId" text="name" id="id" multiple="false" selectedValue="${channelUserPage.channelId}"></t:comboBox>

controller

@RequestMapping(params = "combox")
	@ResponseBody
	public List<ComboBox> combox(HttpServletRequest request, DataGrid dataGrid) {
		CriteriaQuery cq = new CriteriaQuery(ChannelEntity.class);
		List<ChannelEntity> ls = this.channelService.getListByCriteriaQuery(cq, false);
		List<ComboBox> comboxList = new ArrayList<ComboBox>(ls.size());
		for (ChannelEntity channel : ls) {
			ComboBox comboBox = new ComboBox();
			comboBox.setId(channel.getId());
			comboBox.setText(channel.getName());
			comboxList.add(comboBox);
		}
		return comboxList;
	}

ComboBoxTag类：

package org.jeecgframework.tag.core.easyui;

import java.io.IOException;

import javax.servlet.jsp.JspTagException;
import javax.servlet.jsp.JspWriter;
import javax.servlet.jsp.tagext.TagSupport;

import org.apache.commons.lang.StringUtils;
import org.jeecgframework.core.common.model.json.ComboBox;
import org.jeecgframework.core.util.StringUtil;

/**
 * 
 * 类描述：下拉选择框标签
 * 
 * @author: 张代浩
 * @date： 日期：2012-12-7 时间：上午10:17:45
 * @version 1.0
 */
public class ComboBoxTag extends TagSupport {
	protected String id;// ID
	protected String text;// 显示文本
	protected String url;// 远程数据
	protected String name;// 控件名称
	protected Integer width;// 宽度
	protected Integer listWidth;// 下拉框宽度
	protected Integer listHeight;// 下拉框高度
	protected boolean editable;// 定义是否可以直接到文本域中键入文本
	// modify by jasonzhang 20150415:增加multiple属性以控制下拉框可以单选还是多选
	private boolean multiple = true;
	// modify by jasonzhang 20150415:增加selectedValue属性设置下拉框的默认选中值
	private String selectedValue;

	public int doStartTag() throws JspTagException {
		return EVAL_PAGE;
	}

	public int doEndTag() throws JspTagException {
		try {
			JspWriter out = this.pageContext.getOut();
			out.print(end().toString());
			out.flush();
		} catch (IOException e) {
			e.printStackTrace();
		}
		return EVAL_PAGE;
	}

	public StringBuffer end() {
		StringBuffer sb = new StringBuffer();
//		ComboBox comboBox = new ComboBox();
//		comboBox.setText(text);
//		comboBox.setId(id);
		//如果name带有点号如果"business.id"，则用点位符\\.替换掉.
		String jqueryIdName = name;
		if (name.indexOf('.') > -1) {
			jqueryIdName = StringUtils.replace(jqueryIdName, ".", "\\\\.");
		}
		sb.append("<script type=\"text/javascript\">")
				.append("$(function() {")
				.append("$(\'#" + jqueryIdName + "\').combobox({")
				.append("url:\'" + url + "&id=" + id + "&text=" + text + "\',")
				.append("editable:\'false\',")
				.append("multiple:").append((Boolean.toString(this.multiple))).append(",")
				.append("valueField:\'id\',")
				.append("textField:\'text\',")
				.append("width:\'" + width + "\',")
				.append("listWidth:\'" + listWidth + "\',")
				.append("listHeight:\'" + listWidth + "\',")
				.append("onChange:function(){")
				.append("var val = $(\'#" + jqueryIdName
						+ "\').combobox(\'getValues\');")
				.append("$(\'#" + jqueryIdName + "hidden\').val(val);").append("},");
		// modify by jasonzhang 20150415:增加selectedValue属性设置下拉框的默认选中值
		sb.append("onLoadSuccess:function(data){");
		if (StringUtil.isNotEmpty(this.selectedValue)) {
			sb.append("$(\'#").append(jqueryIdName).append("\').combobox(\'setValue\',\'").append(this.selectedValue).append("\');");
		}
		sb.append("}").append("});});");
	    sb.append("</script>");
		sb.append(
				"<input type=\"hidden\" name=\"").append(name).append("\" id=\"").append(name).append("hidden\"");
		// modify by jasonzhang 20150415:增加selectedValue属性设置下拉框的默认选中值
		if (StringUtil.isNotEmpty(this.selectedValue)) {
			sb.append(" value=\"").append(this.selectedValue).append("\"");
		}
		sb.append(" > ");
		
		sb.append("<input class=\"easyui-combobox\" ")
				.append(" panelHeight=\"auto\" name=\"" + name + "name\" id=\""
						+ name + "\" >");
		return sb;
	}

	public void setId(String id) {
		this.id = id;
	}

	public void setText(String text) {
		this.text = text;
	}

	public void setUrl(String url) {
		this.url = url;
	}

	public void setName(String name) {
		this.name = name;
	}

	public void setMultiple(boolean multiple) {
		this.multiple = multiple;
	}

	public void setSelectedValue(String selectedValue) {
		this.selectedValue = selectedValue;
	}

}

标签文件中comboBox对应部分

<tag>
		<name>comboBox</name>
		<tag-class>org.jeecgframework.tag.core.easyui.ComboBoxTag</tag-class>
		<body-content>JSP</body-content>
		<description>下拉选择框</description>
		<attribute>
			<name>name</name>
			<required>true</required>
			<rtexprvalue>true</rtexprvalue>
			<description>控件名称</description>
		</attribute>
		<attribute>
			<name>url</name>
			<required>true</required>
			<rtexprvalue>true</rtexprvalue>
			<description>远程数据</description>
		</attribute>
		<attribute>
			<name>id</name>
			<required>true</required>
			<rtexprvalue>true</rtexprvalue>
			<description>ID对应字段</description>
		</attribute>
		<attribute>
			<name>text</name>
			<required>true</required>
			<rtexprvalue>true</rtexprvalue>
			<description>text对应字段</description>
		</attribute>
		<attribute>
			<name>width</name>
			<rtexprvalue>true</rtexprvalue>
			<description>width对应字段</description>
		</attribute>
		<attribute>
			<name>listWidth</name>
			<rtexprvalue>true</rtexprvalue>
			<description>listWidth对应字段</description>
		</attribute>
		<attribute>
			<name>listHeight</name>
			<rtexprvalue>true</rtexprvalue>
			<description>listHeight对应字段</description>
		</attribute>
		<attribute>
			<name>multiple</name>
			<rtexprvalue>true</rtexprvalue>
			<description>是否多选</description>
		</attribute>
		<attribute>
			<name>selectedValue</name>
			<rtexprvalue>true</rtexprvalue>
			<description>默认选中值</description>
		</attribute>
	</tag>

20150420更新：

修改如果下拉框的名字带有点号，下拉框将不能正常工作的bug

来源：oschina

链接：https://my.oschina.net/u/914897/blog/402902