使用extjs4.0实现动态列及分页

    在做信息管理系统类项目时，用户有时需要实现表格的列头（列名字段）可以根据数据库返回的结果集不同而有不同的显示，包括字段名或者字段顺序。比如，同样是邮件列表，可以根据用户个人配置，显示“标题、发送时间、发送人”或者“发送时间、发送人、标题”又或者“标题、正文简介”等。这个时候，如何使用extjs自带的grid组件实现呢？

    首先，我们需要知道extjs的grid组件与后台程序之间传输数据一般使用json，而对于json这种形式，在struts2框架下，要实现不变列名（及列名使用硬编码配置，无法根据后台返回结果不同而有不同显示），比较简单，只要在action中定义相关类属性，在js中做相应的字段绑定即可。如果要实现动态列，就需要自己手动在action中将结果集（一般从数据库中查询得出）转化成json格式，并写入到response中，返回至客户端，交由extjs的grid组件进行渲染显示。

    下面贴出笔者的js代码和后台action代码，感兴趣的同学可以参考一二。

    1、js代码

     

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>


	
		
		
		
		
		
		
		
		

		
	

	
		
		

	

      2、action代码

      

package com.struts;

import java.io.IOException;

import javax.servlet.http.HttpServletResponse;

import org.apache.struts2.ServletActionContext;

import com.opensymphony.xwork2.ActionSupport;

public class testUser extends ActionSupport {

	/**
	 * 
	 */
	private static final long serialVersionUID = 1L;
	public String execute() throws Exception {
		return SUCCESS;
	}

	public void testPage() throws Exception {
		System.out.print("enter testPage");
		String start = (ServletActionContext.getRequest().getParameter("start") == null) ? "0"
				: ServletActionContext.getRequest().getParameter("start");
		String gridJson;
		if (start.equals("0")) {
			gridJson = "{" + "'fields': [" + "{'name': 'id', 'type': 'int'},  "
					+ "{'name': 'name', 'type': 'string'},"
					+ "{'name': 'sex', 'type': 'string'},"
					+ "{'name': 'add', 'type': 'string'}" + "]," + "'data': ["
					+ "{'id': '1', 'name': 'AAA', 'sex': '男','add':'SSS'},"
					+ "{'id': '2', 'name': 'BBB', 'sex': '男','add':'SSS'},"
					+ "{'id': '3', 'name': 'CCC', 'sex': '男','add':'SSS'},"
					+ "{'id': '4', 'name': 'DDD', 'sex': '女','add':'是'},"
					+ "{'id': '5', 'name': 'EEE', 'sex': '男','add':'撒的发生'}"
					+ "]," + "'columns': ["
					+ "{'header': '编号', 'dataIndex': 'id'},"
					+ "{'header': '姓名', 'dataIndex': 'name'},"
					+ "{'header': '性别', 'dataIndex': 'sex'},"
					+ "{'header': '地址2', 'dataIndex': 'add'}" + "],"
					+ "'totalRecord':8,'success':true" + "}";
		} else {
			gridJson = "{" + "'fields': [" + "{'name': 'id', 'type': 'int'},  "
					+ "{'name': 'name', 'type': 'string'},"
					+ "{'name': 'sex', 'type': 'string'},"
					+ "{'name': 'add', 'type': 'string'}" + "]," + "'data': ["
					+ "{'id': '6', 'name': 'AAA', 'sex': '男','add':'SSS'},"
					+ "{'id': '7', 'name': 'BBB', 'sex': '男','add':'SSS'},"
					+ "{'id': '8', 'name': 'CCC', 'sex': '男','add':'SSS'},"
					+ "{'id': '9', 'name': 'DDD', 'sex': '女','add':'是'},"
					+ "{'id': '10', 'name': 'EEE', 'sex': '男','add':'撒的发生'}"
					+ "]," + "'columns': ["
					+ "{'header': '编号', 'dataIndex': 'id'},"
					+ "{'header': '姓名', 'dataIndex': 'name'},"
					+ "{'header': '性别', 'dataIndex': 'sex'},"
					+ "{'header': '地址2', 'dataIndex': 'add'}" + "],"
					+ "'totalRecord':8,'success':true" + "}";
		}
		HttpServletResponse response = ServletActionContext.getResponse();
		// 编制响应的格式
		response.setContentType("text/html;charset=UTF-8");

		try {
			response.getWriter().write(gridJson);
		} catch (IOException e) {
			e.printStackTrace();
		}
	}
	
}

      3、json数据格式

      

{  
    'fields': [  
        {'name': 'id', 'type': 'int'},  
        {'name': 'name', 'type': 'string'},  
        {'name': 'sex', 'type': 'string'},
        {'name': 'add', 'type': 'string'}
    ],
    'data': [  
        {'id': '1', 'name': 'AAA', 'sex': '男','add':'SSS'},  
        {'id': '2', 'name': 'BBB', 'sex': '男','add':'SSS'},   
        {'id': '3', 'name': 'CCC', 'sex': '男','add':'SSS'},   
        {'id': '4', 'name': 'DDD', 'sex': '女','add':'是'},   
        {'id': '5', 'name': 'EEE', 'sex': '男','add':'撒的发生'} 
    ],  
    'columns': [  
        {'header': '编号', 'dataIndex': 'id'},  
        {'header': '姓名', 'dataIndex': 'name'},  
        {'header': '性别', 'dataIndex': 'sex'},
        {'header': '地址', 'dataIndex': 'add'}
    ],"totalRecord": 8,"success": true}

      4、struts.xml配置文件

      

     在action代码中修改返回json数据中的columns节实现列名不同显示，fields节数据为表格列的元数据，应与columns节数据对应，data为数据节，totalRecord为数据总条数，供分页控件使用。