文档章节

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

z_jordon
 z_jordon
发布于 2015/04/17 13:55
字数 1648
阅读 774
收藏 0

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

© 著作权归作者所有

共有 人打赏支持
z_jordon
粉丝 36
博文 251
码字总数 78212
作品 0
厦门
技术主管
私信 提问
EasyUI Combobox中getValue和getText

在组织部项目中使用的Combobox都是通过<input>标签实现的,如下: <input id="checkPlace" class="easyui-combobox" name="checkPlace" data-options="valueField:'id',textField:'text',ur......

霜叶情
2018/04/12
0
0
easyui-combobox与JSP的使用冲突

最近使用easyUI的combobox下拉控件时出现BUG,我在combobox中定义了一个循环下拉菜单,菜单的内容通过jsp的foreach标签取值。功能代码如下: ${item.report_name} 结果导致前台的下拉框的内容...

怒摘一板
2017/04/13
128
0
.NET快速信息化系统开发框架 V3.2 -> Web 用户管理模块编辑界面-组织机构选择支持级联选择

下拉框级联选择功能非常的实用,框架用户管理编辑界面对组织机构的选择在3.2版本中新增了级联选择的支持,让组织机构的选择更加的方便与高效,也不容易出错。 我们框架的组织机构结合实际分成...

NET快速开发框架
2018/07/05
0
0
easyui select 变为combobox的问题

用select标签转变为combobox html代码: aitem1 bitem2 bitem3 ditem4 eitem5 JS代码 $('#cc').combobox({ formatter:function(row){ }, filter:function(q,row){ }, valueField:'id', text......

wangaowell
2015/03/20
2K
0
combobox用url属性,数据回显问题

我用这个标签添加了数据,数据添加成功 点击修改弹出修改对话框,该数据文本框、日期都能正常回显,但是combobox无法回显!当我点击这个combobox后,从新打开修改窗口,所有的数据都能正常回...

WithMing
2015/07/24
1K
1

没有更多内容

加载失败,请刷新页面

加载更多

day27:expect批量杀进程|

1、linux下当前目录有一个文件ip-pwd.ini,内容如下: [root@localhost_002 shell100]# cat ip-pwd.ini 10.111.11.1,root,xyxyxy10.111.11.2,root,xzxzxz10.111.11.3,root,12345610.......

芬野de博客
47分钟前
2
0
分布式之数据库和缓存双写一致性方案解析(二)

引言 该文是对《分布式之数据库和缓存双写一致性方案解析》,一文的补充。博主在该文中,提到了这么一句话 应该没人问我,为什么没有先更新缓存,再更新数据库这种策略。 博主当时觉得,这种...

hensemlee
52分钟前
3
0
druid安装与案例

druid 可以运行在单机环境下,也可以运行在集群环境下。简单起见,我们先从单机环境着手学习。 环境要求 java7 或者更高版本 linux, macOS或者其他unix系统(不支持windows系统) 8G内存 2核C...

hblt-j
58分钟前
0
0
bejson上线 gif转帧工具。

说道这个工具,不得不提一句经典格言“色Q是推动科技发展的动力” 有人发了这个图,我和所有人一样想看到那个瞬间。 当然,我没有PS,有没有太好的转帧工具,但是这并不妨碍我是一个技术死肥...

废柴大叔
59分钟前
0
0
详解利用clear清除浮动的一些问题解决

下面这段代码是用来清除浮动带来的高度塌陷问题 .clearfix:before { content: "."; display: block; height: 0; clear: both; visibility: hidden;} Quest......

前端小攻略
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部