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.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^
posted on 2015-04-21 12:48 HYX15517551511 阅读(2690) 评论(0) 收藏 举报
浙公网安备 33010602011771号