文档章节

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

z_jordon
 z_jordon
发布于 2015/04/17 13:55
字数 1648
阅读 761
收藏 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......

霜叶情
04/12
0
0
自绘制HT For Web ComboBox下拉框组件

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

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

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

NET快速开发框架
07/05
0
0
JQuery Easy Ui 可装载组合框 - ComboBox

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

Amamatthew
2014/09/19
0
0
easyui combobox下拉框实现多选框以及全选、全不选的实现

实现效果如下图: 当勾选全选的时候,可以选中下列所有的选项,当取消勾选时可取消所有勾选。 废话不多说 贴代码吧: 前端代码: //这里的id是上面的combobox的id,因为我要在点击一个按钮的之...

故久呵呵
07/12
0
0

没有更多内容

加载失败,请刷新页面

加载更多

用户体验要素——以用户为设计中心

一、用户体验是什么 产品会与外界发生联系,人们如何去使用产品,人们使用产品无非解决两种问题,一,提高效率;二娱乐。而用户体验兼顾着功能和界面两个方面,为的是“提高人们的工作效率”...

铸剑为犁413
40分钟前
0
0
学习设计模式——代理模式

1. 认识代理模式 1. 定义:为其他对象提供一种代理以控制对这个对象的访问。 2. 组织结构: Proxy:代理对象,要实现与目标代理对象的相同的接口,这样就可以使用代理来代替具体的目标对象,...

江左煤郎
今天
1
0
java JDK动态代理

本篇随笔是对java动态代理中的JDK代理方式的具体实现。 首先需要定义一个接口,为其定义了两个方法:   public interface UserService { public void add(); public void delete(); } 然后需...

编程SHA
今天
2
0
轻松理解Dubbo分布式服务框架

Dubbo是什么? Dubbo是一个分布式服务框架,致力于提供高性能和透明化的RPC远程服务调用方案,以及SOA服务治理方案。简单的说,dubbo就是个服务框架,如果没有分布式的需求,其实是不需要用的...

别打我会飞
今天
3
0
TypeScript基础入门之JSX(一)

转发 TypeScript基础入门之JSX(一) 介绍 JSX是一种可嵌入的类似XML的语法。 它旨在转换为有效的JavaScript,尽管该转换的语义是特定于实现的。 JSX在React框架中越来越受欢迎,但此后也看到了...

durban
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部