首页 > 其他 > 详细

EasyUI 动态生成列属性

时间:2015-01-13 17:46:34      阅读:339      评论:0      收藏:0      [点我收藏+]

需求:通过Model类属性动态生成DataGrid表格

1、定义ColumnTitle注解类

package com.mrchu.annotation;

import java.lang.annotation.Retention;
import java.lang.annotation.RetentionPolicy;
import java.lang.annotation.Target;

/**
 * 列标题注解类
 * 
 * @author MrChu
 * @version 1.0
 * @date 2015年1月12日
 */
@Target({java.lang.annotation.ElementType.FIELD})
@Retention(RetentionPolicy.RUNTIME)
public @interface ColumnTitle {
	
	/** 列标题 */
	String title();
	
	/** 列排序 */
	int sort();

}

2、Model属性添加注解

package com.mrchu.model;

import com.mrchu.annotation.ColumnTitle;

public class User {

	@ColumnTitle(title = "姓名", sort = 1)
	private String name;
	
	@ColumnTitle(title = "性别", sort = 2)
	private String sex;
	
	@ColumnTitle(title = "年龄", sort = 3)
	private String age;

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public String getSex() {
		return sex;
	}

	public void setSex(String sex) {
		this.sex = sex;
	}

	public String getAge() {
		return age;
	}

	public void setAge(String age) {
		this.age = age;
	}
	
}

3、Model属性解析

package com.mrchu.controller;

/**
 * 控制器
 * 
 * @author MrChu
 * @version 1.0
 * @date 2015年1月8日
 */
public class Controller {
	
	/** 冻结列Field集合 */
	private static final List<String> frozenFields = 
											Arrays.asList(new String[]{"name"});
	
	/** Field样式属性集合 */
	@SuppressWarnings("serial")
	private static final Map<String, Object> alignStyles = 
												new HashMap<String, Object>() {{
		put("sex", "center");
	}};
	
	/**
	 * 初始化表格
	 * @param request
	 * 		HttpServletRequest
	 * @param response
	 * 		HttpServletResponse
	 * @param className
	 * 		类的完全限定名
	 * @param session
	 * 		HttpSession
	 * @throws ClassNotFoundException
	 * 		类加载异常,加载器没有发现此类
	 */
	@RequestMapping(value = "/initTable", method = RequestMethod.POST)
	public void initTable(HttpServletRequest request, HttpServletResponse response, 
			String className, HttpSession session) throws ClassNotFoundException {
		Map<String, Object> data = new HashMap<String, Object>();
		Class<? extends Object> clazz = Class.forName(className);
		if (clazz != null) {
			Field[] fields = clazz.getDeclaredFields();
			if (fields != null && fields.length != 0) {
				List<Map<String, Object>> columns = new ArrayList<Map<String, Object>>();
				List<Map<String, Object>> frozenColumns = 
													new ArrayList<Map<String, Object>>();
				for (Field field : fields) {
					if (field.isAnnotationPresent(ColumnTitle.class)) {
						ColumnTitle columnTitle = field.getAnnotation(ColumnTitle.class);
						if (columnTitle != null) {
							Map<String, Object> column = new HashMap<String, Object>();
							column.put("field", field.getName());
							column.put("title", columnTitle.title());
							if (alignStyles.containsKey(field.getName())) {
								column.put("align", alignStyles.get(field.getName()));
							}
							if (!frozenFields.contains(field.getName())) {
								columns.add(column);
							} else {
								frozenColumns.add(column);
							}
						}
					}
				}
				List<Object> columnArray = new ArrayList<Object>();
				columnArray.add(columns);
				data.put("columns", columnArray);
				List<Object> frozenColumnArray = new ArrayList<Object>();
				frozenColumnArray.add(frozenColumns);
				data.put("frozenColumns", frozenColumnArray);
			}
		}
		writeJson(request, response, data);
	}

}

initTable方法最终返回的数据格式:

[[
        {field: 'name', title: '姓名'}, 
        {field: 'sex', title: '性别', align: 'center'}, 
        {field: 'age', title: '年龄'}
]]
4、页面渲染

$.ajax({
	type: 'post',
	url: 'Controller/initTable?className=com.mrchu.model.User',
	success: function (map) {
		var data = jQuery.parseJSON(map);
		$('#grid').datagrid({
			url: 'data.json',
			idField: 'id',
			columns: data.columns,
			frozenColumns: data.frozenColumns
		});
	}
});

5、此种方式可实现DataGrid表格列属性的动态切换,代码有删减。







EasyUI 动态生成列属性

原文:http://blog.csdn.net/for_china2012/article/details/42677891

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!