EasyUI左边树菜单和datagrid分页

9/6/2015来源:Java教程人气:3871

EasyUI左边树菜单和datagrid分页
//这个页面是Home.html  1 <!DOCTYPE html>  2 <html>  3   <head>  4     5     6       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  7     <meta charset="utf-8">  8     <meta http-equiv="X-UA-Compatible" content="IE=edge">  9     <meta name="viewport" content="width=device-width,initial-scale=1"> 10       <link rel="stylesheet" href="EasyUI-1.4.2/themes/default/easyui.CSS" type="text/css"></link> 11       <link rel="stylesheet" href="EasyUI-1.4.2/themes/icon.css" type="text/css"></link> 12      13     <title>Home.html</title> 14      15   </head> 16    17   <body class="easyui-layout" > 18     <!-- 正上方panel -->  19     <div data-options="region:'north',title:'顶部',split:true" style="height:100px;padding: 10px;"></div>  20     <!-- 正左方 --> 21     <div data-options="region:'west',title:'菜单栏',split:true" style="width:280px;padding1:1px;overflow:hidden;"> 22          23         <div class="easyui-accordion" style="position: absolute; top: 27px; left: 0px; right: 0px; bottom: 0px;"> 24   25             <div title="博文管理" selected="true" iconcls="icon-save" style="overflow: auto; padding: 10px;"> 26             <ul id="LeftTree" class="easyui-tree"></ul>   27  28             </div> 29             <div title="新闻管理" iconcls="icon-reload" style="padding: 10px;"> 30                 <ul class="easyui-tree" id="LeftTree"></ul>  31             </div> 32             <div title="资源管理" style="padding: 10px;"> 33                 content3  34             </div> 35         </div> 36     </div> 37     <!-- 正中间 --> 38     <div data-options="region:'center',title:'功能区'" style="padding:5px;background:#eee;"> 39         <div class="easyui-tabs" id="Tabs" fit="true" border="false">   40             <div title="欢迎页" style="padding:20px;overflow:hidden;">    41                 <div style="margin-top:20px;">   42                     <h3>你好,欢迎来到权限管理系统</h3>   43                 </div>   44             </div>   45         </div> 46     </div>  47     <!-- 正右方 --> 48     <div data-options="region:'east',iconCls:'icon-reload',title:'右边',split:true" style="width:280px;"></div>  49     <!-- 正下方panel -->  50     <div data-options="region:'south',title:'底部 ',split:true" style="height:100px;"align="center"></div> 51      52   </body> 53    54   <script type="text/javascript" src="EasyUI-1.4.2/jquery.min.js"></script> 55   <script type="text/Javascript" src="EasyUI-1.4.2/jquery.easyui.min.js"></script> 56   <script type="text/javascript" src="EasyUI-1.4.2/locale/easyui-lang-zh_CN.js"></script> 57   <script type="text/javascript"> 58    59   /**   60  * 创建新选项卡   61  * @param title    选项卡标题   62  * @param url      选项卡远程调用路径   63  */  64    function AddTab(title, url) { 65                if($("#Tabs").tabs("exists",title)){ 66                    $("#Tabs").tabs("select",title); 67                }else{ 68                    CreateFrame(url); 69                    $("#Tabs").tabs("add",{    70                  title:title,    71                  content:CreateFrame(url), 72                   closable:true, 73                   cache : false 74                   });  75                } 76                  77            }  78             79        80        81       function CreateFrame(url){ 82           var content="<iframe src='"+url+"' width='100%' height='100%' frameborder='0' scrolling='auto' ></iframe>"; 83           return content; 84       } 85  86   87 //动态创建树菜单 88     $(function(){ 89         $("#LeftTree").tree({ 90          91              data:[{   92                 "id":"1",     93                 "text":"文件", 94                 "state":"closed", 95                 //创建子节点    96                 "children":[{ 97                     "id":"1.1",   98                     "text":"用户管理",  99                     "state":"closed",100                     "children":[{101                         "id":"1.1.1", 102                         "text":"photoshop",103                         "url":"content.html",104                         /* "checked":true */105                     },{    106                         "id": "1.1.2",    107                         "text":"Sub Bookds", 108                         "state":"closed",109                         //创建子孙节点 110                         "children":[{111                             "id":"1.1.2_1",112                             "text":"HTML5",113                             "url":"http://www.baidu.com"114                             /* "checked":true */115                             },{    116                             "id": "1.1.2_2",    117                             "text":"CSS3", 118                             "url":"http://www.QQ.com"119                         }]  120                     }]      121                     /* "checked":true,  */     122                 },{123                     "id":"1.2",124                     "text":"微博审核",    125                     "state":"closed",    126                     "attributes":{127                         "url":"/demo/book/abc",    128                         "PRice":100    129                     },    130                     "children":[{131                         "id":"1.2.1", 132                         "text":"PhotoShop",    133                         /* "checked":true */134                     },{    135                         "id":"1.2.2",136                         "text":"Sub Bookds", 137                         "state":"closed",138                         //创建子孙节点 139                         "children":[{140                             "id":"1.2.2_1", 141                             "text":"PhotoShop",    142                                 /* "checked":true */143                             },{    144                             "id":"1.2.2_2",    145                             "text":"Sub Bookds", 146                         }]147                     }]    148                 }]// END children    149             },{  //根节点150                 "id":"2",151                 "text":"Languages",    152                 "state":"closed",    153                 "children":[{154                     "id":"2.1",155                     "text":"Java"156                 },{157                     "id":"2.2",158                     "text":"C#"   159                 }]    160             }],161             onClick: function(node){162                 //判断点击的节点是否是子节点是子节点就添加tab,否则就return打开这个节点163                 var Nodes=$(this).tree("isLeaf",node.target);164                     if(Nodes==false){165                         return;166                     }else{167                         AddTab(node.text, node.url);168                     }169             }170             171          });172          173          174     });175   </script>176 </html>

//这里是Content.html页面 因为center只执行body里面的内容 所以我这个页面只写了body,JS也要放在body里面否则是不执行的,我刚才说了 只执行body里面的内容

 1   <body> 2   <!--<div class="easyui-tabs" id="Tab" fit="true" border="false"> 3           <div title="欢迎页" style="overflow:hidden;">   --> 4                 <!-- <div style="margin-top:20px;">   5                     <h3>你好,欢迎来到权限管理系统</h3>   6                 </div>  -->  7     //只要一个table就可以了 8                 <table id="dg"></table> 9        <!--   </div>  10   </div> -->11   12   <script type="text/javascript">13       $(function(){14           $("#dg").datagrid({15               /* title:"用户管理", */  //可要可不要16               url: "List.action",17               method: "POST",18               singleSelect:true,//如果为true,则只允许选择一行。19               ctrlSelect:true, //在启用多行选择的时候允许使用Ctrl键+鼠标点击的方式进行多选操作。20               fitColumns:true, //真正的自动展开/收缩列的大小,以适应网格的宽度,防止水平滚动。21               striped:true,    //是否显示斑马线效果22               fit:true,23               /* loadMsg:"Processing, please wait …", */ //在从远程站点加载数据的时候显示提示消息。24               rownumbers: true, //如果设置为true则会添加一列来显示行号。25               pagination: true, //如果为true,则在DataGrid控件底部显示分页工具栏。26               pageSize: 10, //在设置分页属性的时候初始化页面数据条数。27               pageList: [10, 20, 50], //在设置分页属性的时候 初始化页面数据显示条数选择列表28               toolbar:[{29                   text:"增加",30                   iconCls:"icon-add",31                   handler:function(){32                   }33               },"-",{34                   text:"删除",35                   iconCls:"icon-remove",36                   handler:function(){37                   }38               },"-",{39                   text:"修改",40                   iconCls:"icon-edit",41                   handler:function(){42                   43                   }44               },"-",{45                   text:"查询",46                   iconCls:"icon-search",47                   handler:function(){48                   49                   }50               } ],51               52               53               54               columns:[[55                   //这里的field对应的是后台的字段属性56                   {field:"id",title:"编号",width:100},57                   {field:"userName",title:"用户名",width:100},58                   {field:"passWord",title:"密码",width:100},59                   {field:"email",title:"Email",width:100},60                   {field:"mobile",title:"电话",width:100},61               ]]62           });63       });64   </script>65   </body>

//后台分页JavaBean

 1 public class Page<T> { 2         private Integer pageIndex; // 当前页码 3         private Integer pageSize; // 每页的数据量 4         private Integer pageCount; // 总页码 5          6         /*private Integer page; // 当前页码 7         private Integer rows; // 每页的数据量 8         private Integer total; // 总页码 9 */        private Integer count; // count统计(总数据量 或 其他)10         private double sum;    // sum统计11         private List<T> list;12         13         // 构造方法14         public Page(int pageIndex, int pageSize){15             this.pageIndex = pageIndex;16             this.pageSize = pageSize;17         }18         19         public Integer getPageIndex() {20             return pageIndex;21         }22         public void setPageIndex(Integer pageIndex) {23             this.pageIndex = pageIndex;24         }25         public Integer getPageSize() {26             return pageSize;27         }28         public void setPageSize(Integer pageSize) {29             this.pageSize = pageSize;30         }31         public Integer getPageCount() {32             return pageCount;33         }34         public void setPageCount(Integer pageCount) {35             this.pageCount = pageCount;36         }37         public Integer getCount() {38             return count;39         }40 41     public void setCount(Integer count) {42         this.count = count;43 44         if (this.pageSize != 0) {45             // 顺带将总页码给赋值了46             this.pageCount = this.count % this.pageSize == 0 ? this.count47                     / this.pageSize : this.count / this.pageSize + 1;48         }49     }50         public double getSum() {51             return sum;52         }53         public void setSum(double sum) {54             this.sum = sum;55         }56         public List<T> getList() {57             return list;58         }59         public void setList(List<T> list) {60             this.list = list;61         }62         63         64 }

//BaseDao

 1     public List  FindList(final String bhql,int pageIndex,int pageSize) { 2         final int limit = pageSize; 3  4         final int start = (pageIndex - 1) * limit; 5  6         /*final String bhql = hql;*/ 7  8         List<Object> list = null; 9 10         list = this.getHibernateTemplate().executeFind(new HibernateCallback() {11 12             public Object doInHibernate(session session)13                     throws HibernateException, SQLException {14                 List result = session.createQuery(bhql).setFirstResult(start)15                         .setMaxResults(limit).list();16                 /*if(session!=null){17                     session.close();18                 }*/19                 return result;20             }21 22         });23         return list;24     }

//DaoImpl

 1 public class UsersDaoImpl extends BaseDao implements UsersDao { 2  3     public Page<Users> FindList(Users user, Integer pageIndex, Integer pageSize) { 4         String Ahql="From Users where 1=1"; 5          6         List<Users> pageList=super.FindList(Ahql, pageIndex, pageSize); 7          8         String Bhql="Select count(*) From Users";  //这句话可不要 直接调用下面的方法 9         10         Long s=(Long) super.getCount(Bhql);11         int count=s.intValue();12         13         Page<Users> page=new Page<Users>(pageIndex, pageSize);14         /*page.setPageIndex(pageIndex);15         page.setPageSize(pageSize);*/16         page.setList(pageList);17         page.setCount(count);18         return page;19     }20 21     public Integer getObject() {22         String hql="Select count(*) From Users";23         Long s=(Long) super.getCount(hql);24         return s.intValue();25     }26     27 28 }

//Action

 1 public class UsersAction extends ActionSupport { 2  3     /** 4      *  5      */ 6     private static final long serialVersionUID = 1L; 7      8     private int page; 9     private int rows;10 11     public Users getUser() {12         return user;13     }14 15     public void setUser(Users user) {16         this.user = user;17     }18 19 20     public Page<Users> getUserList() {21         return userList;22     }23 24     public void setUserList(Page<Users> userList) {25         this.userList = userList;26     }27 28     private Users user;29     private UsersBiz userBiz;30     public UsersBiz getUserBiz() {31         return userBiz;32     }33 34     public void setUserBiz(UsersBiz userBiz) {35         this.userBiz = userBiz;36     }37 38     private Page<Users> userList;39     40     41     public void getList() throws IOException {42         ServletActionContext.getResponse().setContentType(43                 "text/json;charset=utf-8");44         Users user=(Users) ActionContext.getContext().getSession().get("users");45         Page<Users> pageList= userBiz.FindList(user, page,rows);46         JSONObject json = new JSONObject();47         json.put("rows", pageList.getList());48         json.put("total", pageList.getCount());49         ServletActionContext.getResponse().getWriter().print(json);50 51     }52 53     public int getPage() {54         return page;55     }56 57     public void setPage(int page) {58         this.page = page;59     }60 61     public int getRows() {62         return rows;63     }64 65     public void setRows(int rows) {66         this.rows = rows;67     }68     69 }

好累啊,看在我这么无私奉献的份上,就高抬贵手顶一顶,最怕高抬臭脚来踩了。。。^v^