zoukankan      html  css  js  c++  java
  • 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="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="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:"编号",100},
    57                   {field:"userName",title:"用户名",100},
    58                   {field:"password",title:"密码",100},
    59                   {field:"email",title:"Email",100},
    60                   {field:"mobile",title:"电话",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.count
    47                     / 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^

  • 相关阅读:
    MySql msi安装
    C# TextBox文本内容选中
    SQL 删除时间最靠前的几条数据
    Layui表格工具栏绑定事件失效问题
    Layui我提交表单时,table.reload(),表格会请求2次,是为什么?按下面的做
    table 中数据行循环滚动
    html 3D反转效果
    网页电子表数字样式
    power tool 强制撤销
    GHOST -ntexact 正常还原
  • 原文地址:https://www.cnblogs.com/HYXJavaweb/p/4444062.html
Copyright © 2011-2022 走看看