文档章节

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

z_jordon
 z_jordon
发布于 2015/04/17 13:55
字数 1648
阅读 746
收藏 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
粉丝 35
博文 251
码字总数 78212
作品 0
厦门
技术主管
EasyUI Combobox中getValue和getText

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

霜叶情
04/12
0
0
.NET快速信息化系统开发框架 V3.2 -> Web 用户管理模块编辑界面-组织机构选择支持级联选择

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

NET快速开发框架
07/05
0
0
自绘制HT For Web ComboBox下拉框组件

传统的HTML5的下拉框select只能实现简单的文字下拉列表,而HT for Web通用组件中ComboBox不仅能够实现传统HTML5下拉框效果,而且可以在文本框和下拉列表中添加自定义的小图标,让整个组件看起...

xhload3d
2015/03/12
0
0
jeasyui combobox组件以及将table下面加上横向滚动条

$('#comboboxlist').combobox('getText'); 所有选中的值对 $('#comboboxlist').combobox('getValue'); 只能获取一个值。 $('#comboboxlist').combobox('getValues'); 获取选中的所有值 取出的......

writeademo
2017/10/25
0
0
JQuery Easy Ui 可装载组合框 - ComboBox

可装载组合框 - ComboBox 继承自$.fn.combo.defaults,通过$.fn.combobox.defaults覆盖默认值 combobox显示的是一个可以编辑的文本框和一个下拉列表.允许用户从里面选择一个或者是多个值,用户...

Amamatthew
2014/09/19
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Java IO类库之PrintStreamWriter

* A <code>PrintStream</code> adds functionality to another output stream, * namely the ability to print representations of various data values * conveniently. Two other fea......

老韭菜
49分钟前
0
0
qduoj~前端~二次开发~笔记

青岛大学qdu的onlinejudge是js的写的前端,框架是vue.js,在nodejs上部署运行,其实整体运行还是建立在docker的容器虚拟环境里,这里暂时不需要docker。安装环境是Ubuntu14-64bit 1.安装一大...

虚拟世界的懒猫
53分钟前
6
0
ConcurrentHashMap源码解读

部分内容转自:http://jiabinyuan.xyz/#/app/archive/detail/25 内部结构 内部采用了segment结构,每一个segment相当于一个hashtable。看下面的结构图: 从图的结构我们可以了解到,Concurr...

edwardGe
57分钟前
1
0
Ubuntu终端Tab键自动补全

打开 /etc/bash.bashrc,找到下列代码,取消注释。 #enable bash completion in interactive shells#if ! shopt -oq posix; then# if [-f /usr/share/bash-completion/bash_compl......

大熊猫
今天
0
0
polipo socks5代理转http代理

天朝的网络,哎~ 装个 yarn 都时而会卡 假设在SSlocal 已经装好运行的前提下,来安装设置 polipo sudo apt-get install polipo sudo vim /etc/polipo/config 追加下列配置内容,并保存 socksP...

纯洁徐
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部