Flexigrid是一个jQuery表格插件.

使用方法：

一、相关资源文件的引入

<link rel="stylesheet" type="text/css" href="css/flexigrid.css"> 
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script> 
<script type="text/javascript" src="js/flexigrid.js"></script>

二、JSP页面显示

<table class="flexigrid" style="display: none"></table> 
<script type="text/javascript"> 
	$(function() { 
		$(".flexigrid").flexigrid( { 
			url : 'getUserAction.action', 
			dataType : 'json', 
			colModel : [  
				    {display : '名称',name : 'username',width : 120,sortable : true,align : 'center'}, 
				    {display : '组织名称',name : 'orgname',width : 120,sortable : true,align : 'center'} , 
				    {display : '状态',name : 'state',width : 100,sortable : true,align : 'center'} ,  
				    {display : '登录名',name : 'loginname',width : 120,sortable : true,align : 'center'}, 
				    {display : '创建时间',name : 'ctime',width : 120,sortable : true,align : 'center'}, 
				    {display : '备注',name : 'note',width : 120,sortable : true,align : 'center'} 
				], 
			buttons : [ 
				    {name: '新增', bclass: 'add', onpress : add}, 
				    {name: '删除', bclass: 'delete', onpress : del}, 
				    {name: '编辑', bclass: 'edit', onpress : edit} 
				], 
			sortorder : "asc", 
			usepager : true, 
			title : '人员信息列表', 
			useRp : true, 
			rp : 10,  //每页默认结果数  
			pagestat: '显示记录从{from}到{to}，总数 {total} 条', //汉化显示样式  
			pagetext: '当前页', 
			outof: '总页数', 
			showTableToggleBtn : false, 
			resizable : true, 
			width : 'auto', 
			height : 265 
		}); 
		function add(){ 
			alert("Add"); 
		} 
		function del(){ 
			alert("Delete"); 
		} 
		function edit(){ 
			alert("Edit"); 
		} 
	}) 
</script>

三、Struts配置

<package name="user_json" extends="json-default"> 
	<action name="getUserAction" method="queryAll" class="com.home.web.UserAction"> 
		 <result name="success" type="json"></result>   
	</action> 
</package>

四、后台代码实现

import java.io.IOException; 
import java.sql.Connection; 
import java.sql.ResultSet; 
import java.sql.ResultSetMetaData; 
import java.sql.SQLException; 
import java.sql.Statement; 
import java.util.ArrayList; 
import java.util.HashMap; 
import java.util.List; 
import java.util.Map; 
import com.home.util.ConnectionManager; 
 
public class UserAction { 
	// 结果集 
	private List<Map<String, Object>> rows = new ArrayList<Map<String, Object>>(); 
 
	private Integer page = 1;  //当前页 
	private Integer total;     //总记录数 
	private Integer rp;        //每页记录数 
 
	public String queryAll() throws IOException { 
		 
		Statement sta = null; 
		ResultSet rs = null; 
		try { 
			Connection conn = ConnectionManager.getConnection(); 
			sta = conn.createStatement(); 
			//mysql分页  
			String sql = "select username,orgname,state,loginname,ctime,note from e_user limit "+(page-1)*rp+","+rp; 
			rs = sta.executeQuery(sql); 
			ResultSetMetaData md = rs.getMetaData(); // 获得结果集结构信息,元数据 
			int columnCount = md.getColumnCount(); 
			while (rs.next()) { 
				Map<String, Object> rowData = new HashMap<String, Object>(); 
				for (int i = 1; i <= columnCount; i++) { 
						rowData.put(md.getColumnName(i), rs.getObject(i));	 
				} 
				rows.add(rowData); 
			} 
			total = ConnectionManager.getRows(); 
			ConnectionManager.closeAll(rs, sta, conn); //关闭资源 
		} catch (SQLException e) { 
			e.printStackTrace(); 
		} 
		return "success"; 
	} 
 
 
	public String forSend() { 
		return "success"; 
	} 
	 
	public List<Map<String, Object>> getRows() { 
		return rows; 
	} 
 
 
	public void setRows(List<Map<String, Object>> rows) { 
		this.rows = rows; 
	} 
 
	public Integer getPage() { 
		return page; 
	} 
 
	public void setPage(Integer page) { 
		this.page = page; 
	} 
 
	public Integer getTotal() { 
		return total; 
	} 
 
	public void setTotal(Integer total) { 
		this.total = total; 
	} 
 
	public Integer getRp() { 
		return rp; 
	} 
 
	public void setRp(Integer rp) { 
		this.rp = rp; 
	} 
}

后台数据查询代码是基于mysql、JDBC。