EasyUI 动态生成列属性

21 篇文章 0 订阅
4 篇文章 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表格列属性的动态切换,代码有删减。







  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值