flexigrid效果堪比extjs, 是一个很不错了jquery表格插件
先看效果, 显示简单显示数据:
插件自动发送指定的ajax请求, 只需返回固定格式的json字符串就可以得到以上效果,
页面代码如下:
<html>
<head>
<title>简单显示表格</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link type="text/css" href="flexigrid/css/flexigrid_blue.css" rel="stylesheet"/>
<script type="text/javascript" src="flexigrid/jquery.js"></script>
<script type="text/javascript" src="flexigrid/flexigrid.js"></script>
<script type="text/javascript">
$(function() { //flexigrid表格设置
$("#flex").flexigrid({
url : 'userlist', //ajax方式对应的url地址
dataType : 'json', //请求数据格式
colModel : [{
display : 'ID',
name : 'userid',
width : 60, //得加上 要不IE报错
sortable : true, //是否可被排序
align : 'center'
}, {
display : '用户',
name : 'username',
width : 100,
sortable : true,
align : 'center'
}, {
display : '密码',
name : 'password',
width : 100,
sortable : true,
align : 'center'
}, {
display : '类型',
name : 'usertype',
width : 100,
sortable : true,
align : 'center'
}],
usepager : true, //是否使用分页
sortname : 'userid', //按那一列排序
sortorder : 'asc', //排序方式
rp : 5, //每页默认显示数量
useRp : true, //是否可动态设置每页显示数量
striped : true, //是否显示斑纹效果
resizable : false, //是否可伸缩
nowrap : true, // 是否不换行
showTableToggleBtn : false, //是否显示表开关
checkbox: false,//是否显示第一列的checkbox（用于全选）
errormsg : '发生错误', //错误提示信息
nomsg : '无相关记录', //无结果提示信息
procmsg : '正在处理,请稍候 ... ', //正在处理的提示信息
pagestat : '显示 {from} / {to} 行,共 {total} 行', // 显示当前页和总页面的样式
autoload : true, // 自动加载
blockOpacity : 1, // 透明度设置
minwidth : 30, // 列的最小宽度
minheight : 80, // 列的最小高度
width : 500,
height : 120,
title : '用户列表'
})
});
</script>
</head>
<body>
<table id="flex" ></table>
</body>
</html>
后台使用最原始的servlet实现, 代码如下:
@WebServlet("/userlist")
public class UserListServlet extends HttpServlet{
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
this.doPost(req, resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
String sortname = req.getParameter("sortname"); //排序字段
String sortorder = req.getParameter("sortorder"); //排序方式
int page = Integer.valueOf(req.getParameter("page")); //当前页码
int rp = Integer.valueOf(req.getParameter("rp")); //每页显示数量
UserService userService = new UserService();
//获取用户列表信息
List<Map<String, Object>> users = userService.getUserList(sortname,sortorder,(page-1)*rp,rp);
//获取用户总数
int total = userService.getUserTotal();
//换取flexigrid需要的json对象字符串
String jsonstr = JsonUtil.getJson(users,page,total);
//返回json字符串
resp.getWriter().write(jsonstr);
}
}
UserService代码片段:
/**
* 获取用户列表
* @param sortname
* @param sortorder
* @param begin
* @param rows
* @return
*/
public List<Map<String, Object>> getUserList(String sortname, String sortorder,int begin, int rows) {
String sql = "select * from user order by "+sortname+" "+sortorder+" limit "+begin+","+rows+"";
return DbUtil.queryForList(sql, null);
}
/**
* 获取用户总数
* @return
*/
public int getUserTotal(){
String sql = "select count(*) from user";
int total = Integer.valueOf(DbUtil.queryForMap(sql, null).get("count(*)").toString());
return total;
}
JsonUtil类代码片段:
public static String getJson(List<?> list, int page, Object total) { Map<String,Object> result = new HashMap<String, Object>();
result.put("rows", list);
result.put("page", page);
result.put("total", total);
return gson.toJson(result);
}
数据库结构可见图中显示, dao层比较简单在此不在敷衍,
上述只是最简单的显示数据, 此外还可以添加增删改按钮实现更丰富的功能,
下图是配合jquery另一款插件jqmodal实现的效果:
待续...