jquery demo - jquery表格插件flexigrid的java简单应用实例

来源：互联网发布：苹果分线器推荐知乎编辑：程序博客网时间：2024/06/04 18:38

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{@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException {this.doPost(req, resp);}@Overrideprotected 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实现的效果:

待续...

0 0