easyui加载combobox

最新推荐文章于 2024-07-22 20:19:47 发布

回眸一笑Bug生

最新推荐文章于 2024-07-22 20:19:47 发布

阅读量841

点赞数

分类专栏：框架文章标签： easyui combobox

本文链接：https://blog.csdn.net/zjsdrs/article/details/78396411

版权

框架专栏收录该内容

11 篇文章 0 订阅

订阅专栏

记录一下easyui插件combobox的加载以及获取值和赋值

前端实现

前提已经导入easyui插件并且已经引入相关js、css

1.声明combobox

<input id="department" style="width: 20px;" />

2.加载combobox

$(function() {
		$('#department').combobox({
			url : "",
			required : true,
			valueField : 'id',
			textField : 'text'
		});
	})

url为请求的后台地址，因项目而异

后台处理

1.创建entity用户存储下拉列表的value和text

package cn.com.xu.entity;
/**
 * Combobox实体类
 * @author Uself 2017年10月30日 下午7:17:00
 *
 */
public class Combobox {
	private String id;
	private String text;
	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;
	}
	
}

2.数据处理

/**
	 * 获取部门信息
	 * @return
	 */
	public String getDepartmentList(){
		HttpServletResponse response = ServletActionContext.getResponse();
		List<Combobox> list = new ArrayList<Combobox>();
		try {
			//具体的业务逻辑，从数据库中查询
			Combobox obj = new Combobox();
			obj.setId("a");
			obj.setText("技术部");
			obj.setId("b");
			obj.setText("人事部");
			list.add(obj);
			//解决中文乱码
			response.setContentType("text/plain;charset=UTF-8");
			PrintWriter out = response.getWriter();
			out.write(JSONArray.fromObject(list).toString());
		} catch (Exception e) {
			e.printStackTrace();
		}
		return null;
	}

这样就可以加载combobox了

值得获取和赋值

function handle(){
		/* 获取id的值 */
		$("#department").combobox("getValue");
		/* 获取text的值，即下拉列表显示出来的值 */
		$("#department").combobox("getText");
		
		/* 为id和text赋值 */
		$("#department").combobox("setValue", "c");
		$("#department").combobox("setText", "经理部");
	}