示例效果图
示例代码
GridJsonExample
package fan.tutorial.client.ui.grids;
import java.util.ArrayList;
import java.util.List;
import com.extjs.gxt.ui.client.Style.HorizontalAlignment;
import com.extjs.gxt.ui.client.data.BaseListLoader;
import com.extjs.gxt.ui.client.data.HttpProxy;
import com.extjs.gxt.ui.client.data.JsonLoadResultReader;
import com.extjs.gxt.ui.client.data.ListLoadResult;
import com.extjs.gxt.ui.client.data.ModelData;
import com.extjs.gxt.ui.client.data.ModelType;
import com.extjs.gxt.ui.client.event.ButtonEvent;
import com.extjs.gxt.ui.client.event.SelectionListener;
import com.extjs.gxt.ui.client.store.ListStore;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.LayoutContainer;
import com.extjs.gxt.ui.client.widget.button.Button;
import com.extjs.gxt.ui.client.widget.grid.CheckBoxSelectionModel;
import com.extjs.gxt.ui.client.widget.grid.ColumnConfig;
import com.extjs.gxt.ui.client.widget.grid.ColumnModel;
import com.extjs.gxt.ui.client.widget.grid.Grid;
import com.extjs.gxt.ui.client.widget.layout.FitLayout;
import com.google.gwt.core.client.GWT;
import com.google.gwt.http.client.RequestBuilder;
import com.google.gwt.i18n.client.NumberFormat;
import com.google.gwt.user.client.Element;
import fan.tutorial.client.model.IEmployee;
import fan.tutorial.server.value.Constant;
public class GridJsonExample
extends LayoutContainer {
@Override
protected void onRender(Element parent,
int index) {
super.onRender(parent, index);
//创建内容面板
ContentPanel panel =
new ContentPanel();
//设置面板标题
panel.setHeadingHtml("Grid Json");
//设置面板宽度高度
panel.setSize(600, 350);
//设置面板咋说? ture/false 自己看看效果就知道了
panel.setFrame(
true);
//设置面板按钮的对齐方式
panel.setButtonAlign(HorizontalAlignment.CENTER);
//设置面板布局, FitLayout 内容填充整个面板
panel.setLayout(
new FitLayout());
//创建ModelType
ModelType modelType =
new ModelType();
//设置根名称(与json数据根名称要保持一致, 否则无法正确的解析数据)
modelType.setRoot(Constant.RESULT);
//添加表格需要使用到的字段域, 未被添加的字段域在表格中无数据展示
modelType.addField(IEmployee.NAME);
modelType.addField(IEmployee.SEX);
modelType.addField(IEmployee.SALARY);
modelType.addField(IEmployee.BIRTHPLACE);
modelType.addField(IEmployee.HIREDATE);
//复选框选择模型
CheckBoxSelectionModel<ModelData> sm =
new CheckBoxSelectionModel<ModelData>();
//表格列配置
List<ColumnConfig> configs =
new ArrayList<ColumnConfig>();
//表格列配置信息
configs.add(sm.getColumn());
configs.add(
new ColumnConfig(IEmployee.NAME, "姓名", 100));
configs.add(
new ColumnConfig(IEmployee.SEX, "性别", 100));
ColumnConfig columnConfig =
new ColumnConfig(IEmployee.SALARY, "薪资", 100);
columnConfig.setNumberFormat(NumberFormat.getFormat("0.0"));
configs.add(columnConfig);
configs.add(
new ColumnConfig(IEmployee.BIRTHPLACE, "籍贯", 100));
configs.add(
new ColumnConfig(IEmployee.HIREDATE, "入职时间", 100));
//Spring MVC Controller 请求地址
String url = GWT.getHostPageBaseURL() + "employee/find/all.json";
//构建RequestBuilder
RequestBuilder builder =
new RequestBuilder(RequestBuilder.GET, url);
//创建HttpProxy
HttpProxy<String> proxy =
new HttpProxy<String>(builder);
//JsonLoadResultReader
JsonLoadResultReader<ListLoadResult<ModelData>> reader =
new JsonLoadResultReader<ListLoadResult<ModelData>>(modelType);
//数据加载器
final BaseListLoader<ListLoadResult<ModelData>> loader =
new BaseListLoader<ListLoadResult<ModelData>>(proxy, reader);
//数据存储器
final ListStore<ModelData> store =
new ListStore<ModelData>(loader);
//创建表格
final Grid<ModelData> grid =
new Grid<ModelData>(store,
new ColumnModel(configs));
//设置显示加载标识
grid.setLoadMask(
true);
//设置显示表格边框
grid.setBorders(
true);
//设置选择模型
grid.setSelectionModel(sm);
//设置插件, 如果不设置, 全选复选框无法点击
grid.addPlugin(sm);
grid.getView().setEmptyText("请点击按钮加载数据
");
//设置宽度自动扩展的列
grid.setAutoExpandColumn(IEmployee.HIREDATE);
//将表格添加到面板
panel.add(grid);
//按钮
Button button =
new Button("加载数据",
new SelectionListener<ButtonEvent>() {
@Override
public void componentSelected(ButtonEvent ce) {
//加载数据
loader.load();
}
});
panel.addButton(button);
this.add(panel);
}
}
EmployeeController
package fan.tutorial.server.controller;
import javax.annotation.Resource;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import fan.tutorial.server.commons.JsonUtil;
import fan.tutorial.server.service.DataService;
import fan.tutorial.server.value.Constant;
@Controller
@RequestMapping("/employee")
public class EmployeeController {
@Resource
private DataService service;
@RequestMapping(value = "/find/all")
public String findAll(Model model){
String result = JsonUtil.toJson(Constant.RESULT, Constant.DATE_FORMAT_PATTENR_DEFAULT, service.findAllEmployee());
model.addAttribute(Constant.RESULT, result);
return Constant.RESULT_CODE;
}
}
DataService
package fan.tutorial.server.service;
import java.util.List;
import javax.annotation.Resource;
import org.springframework.stereotype.Service;
import fan.tutorial.client.model.Employee;
import fan.tutorial.server.value.Data;
@Service
public class DataService {
@Resource
private Data data;
public List<Employee> findAllEmployee(){
return data.getEmployeeList();
}
}
Data
package fan.tutorial.server.value;
import java.util.ArrayList;
import java.util.Calendar;
import java.util.Date;
import java.util.List;
import org.springframework.stereotype.Component;
import fan.tutorial.client.model.Employee;
@Component
public class Data {
private static final int INTERVAL_YEAR = -14;
private static final Date CURRENT_DATE = new Date();
private List<Employee> employeeList;
private List<Employee> buildEmplyeeList(){
List<Employee> stocks = new ArrayList<Employee>();
stocks.add(new Employee("叶水燕", "女", 4500, "广东茂名", getIntervalDate(CURRENT_DATE, INTERVAL_YEAR, 0, 0)));
stocks.add(new Employee("何国群", "男", 4500, "广东云浮", getIntervalDate(CURRENT_DATE, INTERVAL_YEAR, 1, 1)));
stocks.add(new Employee("钟婷婷", "女", 5500, "广东茂名", getIntervalDate(CURRENT_DATE, INTERVAL_YEAR, 2, 2)));
stocks.add(new Employee("叶国珠", "女", 4500, "广东广州", getIntervalDate(CURRENT_DATE, INTERVAL_YEAR, 3, 3)));
stocks.add(new Employee("杨忠杰", "男", 5500, "广东佛山", getIntervalDate(CURRENT_DATE, INTERVAL_YEAR, 4, 4)));
stocks.add(new Employee("杨晓婷", "女", 6500, "广东湛江", getIntervalDate(CURRENT_DATE, INTERVAL_YEAR, 5, 5)));
stocks.add(new Employee("邵昭一", "男", 7000, "广东深圳", getIntervalDate(CURRENT_DATE, INTERVAL_YEAR, 6, 6)));
stocks.add(new Employee("蔡叶青", "男", 5500, "广东茂名", getIntervalDate(CURRENT_DATE, INTERVAL_YEAR, 7, 7)));
stocks.add(new Employee("蔡水娇", "女", 6700, "广东茂名", getIntervalDate(CURRENT_DATE, INTERVAL_YEAR, 8, 8)));
stocks.add(new Employee("李坤兴", "男", 5800, "广东湛江", getIntervalDate(CURRENT_DATE, INTERVAL_YEAR, 8, 8)));
stocks.add(new Employee("冼金燕", "女", 8000, "广东广州", getIntervalDate(CURRENT_DATE, INTERVAL_YEAR, 8, 8)));
stocks.add(new Employee("蔡圣昌", "男", 7800, "广东深圳", getIntervalDate(CURRENT_DATE, INTERVAL_YEAR, 8, 8)));
stocks.add(new Employee("梁丽桥", "女", 7700, "广东东莞", getIntervalDate(CURRENT_DATE, INTERVAL_YEAR, 8, 8)));
stocks.add(new Employee("莫小文", "女", 6500, "广东深圳", getIntervalDate(CURRENT_DATE, INTERVAL_YEAR, 8, 8)));
stocks.add(new Employee("李文静", "女", 5500, "广东茂名", getIntervalDate(CURRENT_DATE, INTERVAL_YEAR, 8, 8)));
stocks.add(new Employee("倪金农", "男", 7400, "广东深圳", getIntervalDate(CURRENT_DATE, INTERVAL_YEAR, 8, 8)));
stocks.add(new Employee("王晓文", "女", 4500, "广东广州", getIntervalDate(CURRENT_DATE, INTERVAL_YEAR, 8, 8)));
employeeList = stocks;
return stocks;
}
private Date getIntervalDate(Date date, int year, int month, int day){
Calendar calendar = Calendar.getInstance();
calendar.setTime(date);
calendar.set(Calendar.YEAR, calendar.get(Calendar.YEAR) + year);
calendar.set(Calendar.MONTH, calendar.get(Calendar.MONTH) + month);
calendar.set(Calendar.DAY_OF_MONTH, calendar.get(Calendar.DAY_OF_MONTH) + day);
return calendar.getTime();
}
public List<Employee> getEmployeeList() {
return employeeList == null ? buildEmplyeeList() : employeeList;
}
}
Employee
package fan.tutorial.client.model;
import java.util.Date;
public class Employee {
private String sex;
private String name;
private double salary;
private String birthplace;
private Date hiredate;
public Employee(String name, String sex, double salary, String birthplace, Date hiredate){
this.sex = sex;
this.name = name;
this.salary = salary;
this.birthplace = birthplace;
this.hiredate = hiredate;
}
public String getSex() {
return sex;
}
public void setSex(String sex) {
this.sex = sex;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public Date getHiredate() {
return hiredate;
}
public void setHiredate(Date hiredate) {
this.hiredate = hiredate;
}
public String getBirthplace() {
return birthplace;
}
public void setBirthplace(String birthplace) {
this.birthplace = birthplace;
}
public double getSalary() {
return salary;
}
public void setSalary(double salary) {
this.salary = salary;
}
}
IEmployee
package fan.tutorial.client.model;
public interface IEmployee {
String SEX = "sex";
String NAME = "name";
String SALARY = "salary";
String BIRTHPLACE = "birthplace";
String HIREDATE = "hiredate";
}
JsonUtil
package fan.tutorial.server.commons;
import java.util.HashMap;
import java.util.Map;
import com.google.gson.Gson;
import com.google.gson.GsonBuilder;
import com.google.gson.JsonParser;
public class JsonUtil {
private static final String DATE_FORMAT_DEFAULT = "yyyy-MM-dd";
public static String toJson(String rootName, Object obj){
return toJson(rootName, DATE_FORMAT_DEFAULT, obj);
}
public static String toJson(String[] rootName, Object[] obj){
return toJson(rootName, DATE_FORMAT_DEFAULT, obj);
}
public static String toJson(String[] rootName, String dateFormatPattern, Object[] obj){
if(rootName.length > 0 && rootName.length == obj.length){
Gson gson = new GsonBuilder().setDateFormat(dateFormatPattern).create();
Map<String, Object> map = new HashMap<String, Object>();
for(int i = 0; i < obj.length; i++){
map.put(rootName[i], obj[i]);
}
return gson.toJson(map);
}
return "";
}
public static String toJson(String rootName, String dateFormatPattern, Object obj){
Gson gson = new GsonBuilder().setDateFormat(dateFormatPattern).create();
Map<String, Object> map = new HashMap<String, Object>();
map.put(rootName, obj);
return gson.toJson(map);
}
public static String toJson(Object object){
return toJson(object, DATE_FORMAT_DEFAULT);
}
public static String toJson(Object object, String dateFormatPattern){
return new GsonBuilder().setDateFormat(dateFormatPattern).create().toJson(object);
}
public static <T> T fromJson(String json, Class<T> clazz){
return fromJson(json, DATE_FORMAT_DEFAULT, clazz);
}
public static <T> T fromJson(String json, String dateFormatPattern, Class<T> clazz){
return new GsonBuilder().setDateFormat(dateFormatPattern).create().fromJson(json, clazz);
}
public static <T> T fromJson(String json, java.lang.reflect.Type type){
return fromJson(json, DATE_FORMAT_DEFAULT, type);
}
public static <T> T fromJson(String json, String dateFormatPattern, java.lang.reflect.Type type){
return new GsonBuilder().setDateFormat(dateFormatPattern).create().fromJson(json, type);
}
public static String formatJson(String json){
Gson gson = new GsonBuilder().setPrettyPrinting().create();
String jsonString = gson.toJson(new JsonParser().parse(json));
return jsonString;
}
}
Constant
package fan.tutorial.server.value;
public interface Constant {
String RESULT = "result";
String SUCCESS = "success";
String ERROR = "error";
String RESULT_CODE = "template/json/result";
String REST_GET_METHOD = "get";
String REST_POST_METHOD = "post";
String OFFSET = "offset";
String LIMIT = "limit";
String SORT_FIELD = "sortField";
String SORT_DIR = "sortDir";
String TOTAL = "total";
String DATE_FORMAT_PATTENR_DEFAULT = "yyyy-MM-dd";
int PAGE_SIZE_DEFAULT = 15;
}
WEB-INF/pages/template/json/result.jsp
<%@ page pageEncoding="UTF-8"%>
${result}