jeecg3.5版本中comboBox标签的使用及完善
博客专区 > z_jordon 的博客 > 博客详情
jeecg3.5版本中comboBox标签的使用及完善
z_jordon 发表于3年前
jeecg3.5版本中comboBox标签的使用及完善
  • 发表于 3年前
  • 阅读 724
  • 收藏 0
  • 点赞 0
  • 评论 0

新睿云服务器60天免费使用,快来体验!>>>   

摘要: 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

标签: jeecg comboBox标签
  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 35
博文 249
码字总数 77756
×
z_jordon
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: