EasyUI左边树菜单和datagrid分页
//这个页面是Home.html
1 <!DOCTYPE html>
<html>
<head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="EasyUI-1.4.2/themes/default/easyui.css" type="text/css"></link>
<link rel="stylesheet" href="EasyUI-1.4.2/themes/icon.css" type="text/css"></link> <title>Home.html</title> </head> <body class="easyui-layout" >
<!-- 正上方panel -->
<div data-options="region:'north',title:'顶部',split:true" style="height:100px;padding: 10px;"></div>
<!-- 正左方 -->
<div data-options="region:'west',title:'菜单栏',split:true" style="width:280px;padding1:1px;overflow:hidden;"> <div class="easyui-accordion" style="position: absolute; top: 27px; left: 0px; right: 0px; bottom: 0px;"> <div title="博文管理" selected="true" iconcls="icon-save" style="overflow: auto; padding: 10px;">
<ul id="LeftTree" class="easyui-tree"></ul> </div>
<div title="新闻管理" iconcls="icon-reload" style="padding: 10px;">
<ul class="easyui-tree" id="LeftTree"></ul>
</div>
<div title="资源管理" style="padding: 10px;">
content3
</div>
</div>
</div>
<!-- 正中间 -->
<div data-options="region:'center',title:'功能区'" style="padding:5px;background:#eee;">
<div class="easyui-tabs" id="Tabs" fit="true" border="false">
<div title="欢迎页" style="padding:20px;overflow:hidden;">
<div style="margin-top:20px;">
<h3>你好，欢迎来到权限管理系统</h3>
</div>
</div>
</div>
</div>
<!-- 正右方 -->
<div data-options="region:'east',iconCls:'icon-reload',title:'右边',split:true" style="width:280px;"></div>
<!-- 正下方panel -->
<div data-options="region:'south',title:'底部 ',split:true" style="height:100px;"align="center"></div> </body> <script type="text/javascript" src="EasyUI-1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="EasyUI-1.4.2/jquery.easyui.min.js"></script>
<script type="text/javascript" src="EasyUI-1.4.2/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript"> /**
* 创建新选项卡
* @param title 选项卡标题
* @param url 选项卡远程调用路径
*/
function AddTab(title, url) {
if($("#Tabs").tabs("exists",title)){
$("#Tabs").tabs("select",title);
}else{
CreateFrame(url);
$("#Tabs").tabs("add",{
title:title,
content:CreateFrame(url),
closable:true,
cache : false
});
} } function CreateFrame(url){
var content="<iframe src='"+url+"' width='100%' height='100%' frameborder='0' scrolling='auto' ></iframe>";
return content;
} //动态创建树菜单
$(function(){
$("#LeftTree").tree({ data:[{
"id":"1",
"text":"文件",
"state":"closed",
//创建子节点
"children":[{
"id":"1.1",
"text":"用户管理",
"state":"closed",
"children":[{
"id":"1.1.1",
"text":"PhotoShop",
"url":"content.html",
/* "checked":true */
},{
"id": "1.1.2",
"text":"Sub Bookds",
"state":"closed",
//创建子孙节点
"children":[{
"id":"1.1.2_1",
"text":"HTML5",
"url":"http://www.baidu.com"
/* "checked":true */
},{
"id": "1.1.2_2",
"text":"CSS3",
"url":"http://www.qq.com"
}]
}]
/* "checked":true, */
},{
"id":"1.2",
"text":"微博审核",
"state":"closed",
"attributes":{
"url":"/demo/book/abc",
"price":100
},
"children":[{
"id":"1.2.1",
"text":"PhotoShop",
/* "checked":true */
},{
"id":"1.2.2",
"text":"Sub Bookds",
"state":"closed",
//创建子孙节点
"children":[{
"id":"1.2.2_1",
"text":"PhotoShop",
/* "checked":true */
},{
"id":"1.2.2_2",
"text":"Sub Bookds",
}]
}]
}]// END children
},{ //根节点
"id":"2",
"text":"Languages",
"state":"closed",
"children":[{
"id":"2.1",
"text":"Java"
},{
"id":"2.2",
"text":"C#"
}]
}],
onClick: function(node){
//判断点击的节点是否是子节点是子节点就添加tab,否则就return打开这个节点
var Nodes=$(this).tree("isLeaf",node.target);
if(Nodes==false){
return;
}else{
AddTab(node.text, node.url);
}
} }); });
</script>
</html>
//这里是Content.html页面 因为center只执行body里面的内容 所以我这个页面只写了body,JS也要放在body里面否则是不执行的,我刚才说了 只执行body里面的内容
<body>
<!--<div class="easyui-tabs" id="Tab" fit="true" border="false">
<div title="欢迎页" style="overflow:hidden;"> -->
<!-- <div style="margin-top:20px;">
<h3>你好，欢迎来到权限管理系统</h3>
</div> -->
//只要一个table就可以了
<table id="dg"></table>
<!-- </div>
</div> --> <script type="text/javascript">
$(function(){
$("#dg").datagrid({
/* title:"用户管理", */ //可要可不要
url: "List.action",
method: "POST",
singleSelect:true,//如果为true，则只允许选择一行。
ctrlSelect:true, //在启用多行选择的时候允许使用Ctrl键+鼠标点击的方式进行多选操作。
fitColumns:true, //真正的自动展开/收缩列的大小，以适应网格的宽度，防止水平滚动。
striped:true, //是否显示斑马线效果
fit:true,
/* loadMsg:"Processing, please wait …", */ //在从远程站点加载数据的时候显示提示消息。
rownumbers: true, //如果设置为true则会添加一列来显示行号。
pagination: true, //如果为true，则在DataGrid控件底部显示分页工具栏。
pageSize: 10, //在设置分页属性的时候初始化页面数据条数。
pageList: [10, 20, 50], //在设置分页属性的时候 初始化页面数据显示条数选择列表
toolbar:[{
text:"增加",
iconCls:"icon-add",
handler:function(){
}
},"-",{
text:"删除",
iconCls:"icon-remove",
handler:function(){
}
},"-",{
text:"修改",
iconCls:"icon-edit",
handler:function(){ }
},"-",{
text:"查询",
iconCls:"icon-search",
handler:function(){ }
} ], columns:[[
//这里的field对应的是后台的字段属性
{field:"id",title:"编号",width:100},
{field:"userName",title:"用户名",width:100},
{field:"password",title:"密码",width:100},
{field:"email",title:"Email",width:100},
{field:"mobile",title:"电话",width:100},
]]
});
});
</script>
</body>
//后台分页JavaBean
public class Page<T> {
private Integer pageIndex; // 当前页码
private Integer pageSize; // 每页的数据量
private Integer pageCount; // 总页码
/*private Integer page; // 当前页码
private Integer rows; // 每页的数据量
private Integer total; // 总页码
*/ private Integer count; // count统计(总数据量 或 其他)
private double sum; // sum统计
private List<T> list;
// 构造方法
public Page(int pageIndex, int pageSize){
this.pageIndex = pageIndex;
this.pageSize = pageSize;
}
public Integer getPageIndex() {
return pageIndex;
}
public void setPageIndex(Integer pageIndex) {
this.pageIndex = pageIndex;
}
public Integer getPageSize() {
return pageSize;
}
public void setPageSize(Integer pageSize) {
this.pageSize = pageSize;
}
public Integer getPageCount() {
return pageCount;
}
public void setPageCount(Integer pageCount) {
this.pageCount = pageCount;
}
public Integer getCount() {
return count;
}
public void setCount(Integer count) {
this.count = count;
if (this.pageSize != 0) {
// 顺带将总页码给赋值了
this.pageCount = this.count % this.pageSize == 0 ? this.count
/ this.pageSize : this.count / this.pageSize + 1;
}
}
public double getSum() {
return sum;
}
public void setSum(double sum) {
this.sum = sum;
}
public List<T> getList() {
return list;
}
public void setList(List<T> list) {
this.list = list;
}
}
//BaseDao
public List FindList(final String bhql,int pageIndex,int pageSize) {
final int limit = pageSize;
final int start = (pageIndex - 1) * limit;
/*final String bhql = hql;*/
List<Object> list = null;
list = this.getHibernateTemplate().executeFind(new HibernateCallback() {
public Object doInHibernate(Session session)
throws HibernateException, SQLException {
List result = session.createQuery(bhql).setFirstResult(start)
.setMaxResults(limit).list();
/*if(session!=null){
session.close();
}*/
return result;
}
});
return list;
}
//DaoImpl
public class UsersDaoImpl extends BaseDao implements UsersDao {
public Page<Users> FindList(Users user, Integer pageIndex, Integer pageSize) {
String Ahql="From Users where 1=1";
List<Users> pageList=super.FindList(Ahql, pageIndex, pageSize);
String Bhql="Select count(*) From Users"; //这句话可不要 直接调用下面的方法
Long s=(Long) super.getCount(Bhql);
int count=s.intValue();
Page<Users> page=new Page<Users>(pageIndex, pageSize);
/*page.setPageIndex(pageIndex);
page.setPageSize(pageSize);*/
page.setList(pageList);
page.setCount(count);
return page;
}
public Integer getObject() {
String hql="Select count(*) From Users";
Long s=(Long) super.getCount(hql);
return s.intValue();
}
}
//Action
public class UsersAction extends ActionSupport {
/**
*
*/
private static final long serialVersionUID = 1L;
private int page;
private int rows;
public Users getUser() {
return user;
}
public void setUser(Users user) {
this.user = user;
}
public Page<Users> getUserList() {
return userList;
}
public void setUserList(Page<Users> userList) {
this.userList = userList;
}
private Users user;
private UsersBiz userBiz;
public UsersBiz getUserBiz() {
return userBiz;
}
public void setUserBiz(UsersBiz userBiz) {
this.userBiz = userBiz;
}
private Page<Users> userList;
public void getList() throws IOException {
ServletActionContext.getResponse().setContentType(
"text/json;charset=utf-8");
Users user=(Users) ActionContext.getContext().getSession().get("users");
Page<Users> pageList= userBiz.FindList(user, page,rows);
JSONObject json = new JSONObject();
json.put("rows", pageList.getList());
json.put("total", pageList.getCount());
ServletActionContext.getResponse().getWriter().print(json);
}
public int getPage() {
return page;
}
public void setPage(int page) {
this.page = page;
}
public int getRows() {
return rows;
}
public void setRows(int rows) {
this.rows = rows;
}
}
好累啊,看在我这么无私奉献的份上,就高抬贵手顶一顶,最怕高抬臭脚来踩了。。。^v^
EasyUI左边树菜单和datagrid分页的更多相关文章
- EasyUI 树菜单
EasyUI 树菜单 通过ssm框架项目实现EasyUI 的树菜单的单选,复选,异步加载树,同步加载树和树权限控制等功能. 本章知识点 效果图: 需求:通过SSM框架,实现EasyUI 树菜单的单选, ...
- 数据网格和树-EasyUI Datagrid 数据网格、EasyUI Propertygrid 属性网格、EasyUI Tree 树、EasyUI Treegrid 树形网格
EasyUI Datagrid 数据网格 扩展自 $.fn.panel.defaults.通过 $.fn.datagrid.defaults 重写默认的 defaults. 数据网格(datagrid ...
- EasyUI的datagrid分页
EasyUI的datagrid分页 前台代码: <script type="text/javascript"> $(function () { //查询 search( ...
- jquery easyui datagrid 分页详解
由于项目原因,用了jquery easyui 感觉界面不错,皮肤样式少点,可是官网最近打不开了,资料比较少,给的demo没有想要的效果,今天在用datagrid 做分页显示的时候,折腾了半天,网上的资 ...
- EasyUI DataGrid分页数据绑定
记录东西感觉很痛苦,总结东西很痛苦,麻烦,不过为了下次的方便和知识的牢固以后要坚持总结. EasyUI DataGrid分页数据绑定 在解决方案中新建两个文件FormMain.aspx(html也可以 ...
- EasyUI datagrid 分页Json字符串格式
//EasyUI datagrid 分页Json字符串格式 //{"total":xx,"rows":[{...},{...}]} total:总数 rows: ...
- easyui datagrid分页
datagrid分页设置 pagination="true" 貌似是不行的! 只是显示分页工具栏 没有达到分页效果 前端 $(function (){ var p = $('#d ...
- easyui的datagrid分页写法小结
easyui的datagrid分页死活不起作用...沙雕了...不说了上代码 //关闭tab1打开tab2 查询Detail function refundDetail(){ $('#tt').tab ...
- asp.net mvc easyui datagrid分页
提到 asp.net mvc 中的分页,很多是在用aspnetpager,和easyui datagrid结合的分页却不多,本文介绍的是利用easyui 中默认的分页控件,实现asp.net mvc分 ...
随机推荐
- 权限组件（12）：自动发现项目中有别名的URL
自动发现项目中所有有别名的URL,效果如下: customer_list {'name': 'customer_list', 'url': '/customer/list/'} customer_ad ...
- LED室内定位算法：RSS,TOA,AOA,TDOA（转载）
转载自:https://blog.csdn.net/baidu_38197452/article/details/77115935 基于LED的室内定位算法大致可以分为四类: 1. 几何测量法 这种方 ...
- 栈经典列题：Rails
解题心得: 1.这题是先进后出的顺序,所以使用栈(先进后出表). 2.搞清楚题意,需要达成的序列和进入的序.不要弄混了. 3.思维混乱的时候要冷静,冷静,冷静~~~~! 题目: Description ...
- DFS:Tempter of the Bone (规定时间达到规定地点)
解题心得: 1.注意审题,此题是在规定的时间达到规定的地点,不能早到也不能晚到.并不是最简单的dfs 2.在规定时间达到规定的地点有几个剪枝: 一.公式:所需的步骤 - x相差行 - y相差列 = 偶 ...
- 【Restore IP Addresses 】cpp
题目: Given a string containing only digits, restore it by returning all possible valid IP address com ...
- linux常用的日志分析脚本
linux实用的日志分析脚本 日志分析 随意的tail一个access_log文件,下面是一条经典的访问记录 /Dec/::: +] “GET /query/trendxml/district/tod ...
- copy & deepcopy
1 import copy 2 3 字典参照列表结论,看是否有深层嵌套. 4 a = {'name':1,'age':2} 5 b = a 6 a['name'] = 'ff' 7 print(a) ...
- 练习题 - js函数
代码贴出来 1 function Cat() { 2 getColor = function(){ console.log(1);} 3 return this; 4 } 5 Cat.getColor ...
- 【转】Unity3D学习日记（二）使用UGUI制作虚拟摇杆控制摄像机
http://blog.csdn.net/begonia__z/article/details/51178907 前天撸了一个简单的UGUI虚拟摇杆,今天我就利用前天做的虚拟摇杆做了一个简单的摄像机控 ...
- 【bzoj2529】[Poi2011]Sticks 贪心
题目描述 给出若干木棍,每根木棍有特定的颜色和长度.问能否找到三条颜色不同的木棍构成一个三角形.(注意这里所说的三角形面积要严格大于0) 输入 第一行给出一个整数k(3<=k<=50),表 ...