http://blog.csdn.net/ghyg525/article/details/17612993
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实现的效果:
待续...