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

最新推荐文章于 2017-04-06 16:34:26 发布

跨时代135

最新推荐文章于 2017-04-06 16:34:26 发布

阅读量458

点赞数

分类专栏： JQuery

JQuery 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

http://blog.csdn.net/ghyg525/article/details/17612993

flexigrid效果堪比extjs, 是一个很不错了jQuery表格插件

先看效果, 显示简单显示数据:

插件自动发送指定的ajax请求, 只需返回固定格式的json字符串就可以得到以上效果,

页面代码如下:

[html]view plaincopy 
    
 <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实现, 代码如下:

[java]view plaincopy 
    
 @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代码片段:

[java]view plaincopy 
    
 /** 
  * 获取用户列表 
  * @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类代码片段:

[java]view plaincopy 
    
 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实现的效果:

待续...

跨时代135

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery demo - jquery表格插件flexigrid的java简单应用实例

http://blog.csdn.net/ghyg525/article/details/17612993flexigrid效果堪比extjs, 是一个很不错了jQuery表格插件先看效果, 显示简单显示数据:插件自动发送指定的ajax请求, 只需返回固定格式的json字符串就可以得到以上效果, 页面代码如下:[html] view
复制链接

扫一扫