Flexigrid是一个jQuery表格插件 下载地址:http://download.csdn.net/detail/itmyhome/7613879

使用方法：

一、相关资源文件的引入

<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',{display : '状态',name : 'state',width : 100,{display : '登录名',name : 'loginname',{display : '创建时间',name : 'ctime',{display : '备注',name : 'note',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。

源码下载：http://download.csdn.net/detail/itmyhome/7613879

转载请注明出处：http://www.voidcn.com/article/p-uxfudyly-bhk.html