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分 ...
随机推荐
- 04vim的使用
linux常用命令 workon 查看已经安装的虚拟环境 deactivate 退出虚拟环境 whoami 查看用户 sudo bash install.sh 添加权限 pwd 查看在那个路径下 cd ...
- c++ 操作符优先级
优先级 操作符 描述 例子 结合性 1 ()[]->.::++-- 调节优先级的括号操作符数组下标访问操作符通过指向对象的指针访问成员的操作符通过对象本身访问成员的操作符作用域操作符后置自增操作 ...
- Codeforces Round #460 (Div. 2)-C. Seat Arrangements
C. Seat Arrangements time limit per test1 second memory limit per test256 megabytes Problem Descript ...
- Reachability from the Capital
题目描述 There are nn cities and mm roads in Berland. Each road connects a pair of cities. The roads in ...
- 实验6 流类库与I/O
Part2 基础练习 使用文件I/O流,以文本方式打开Part1中合并后的文件,在文件最后一行添加字符"merge successfully. " // 合并两个文件内容到一个新文 ...
- sql server 不可见字符处理 总结
前言 问题描述:在表列里有肉眼不可见字符,导致一些更新或插入失败. 几年前第一次碰见这种问题是在读取考勤机人员信息时碰见的,折腾了一点时间,现在又碰到了还有点新发现就顺便一起记录下. 如下图所示 go ...
- 某面试公司出的面试题---用JS比较两个版本号高低
一天中午某个公司给我反馈的面试题,说,比较两个文件的版本号,然后我给发过去了,说我的代码不符合他的要求,o(╯□╰)o了var compareVersion = compareVersion||fun ...
- sc.exe
sc.exe 编辑 本词条缺少名片图,补充相关内容使词条更完整,还能快速升级,赶紧来编辑吧! 服务管理程序:可用sc.exe远程创建 外文名 sc.exe 停止事件服务 sc stop eventl ...
- [python][django学习篇][4]django完成数据库代码翻译：迁移数据库(migration)
上一篇我们已经完成数据库的设计,但是仅仅是python语言,并没有真正创建了数据库表.翻译成数据库语言,真正创建数据库表由django manage.py来实现,这一过程专业术语:迁移数据库 切换到m ...
- 习题：Dual Matrices（思路题/分治）
tyvj1764 描述一个N行M列的二维矩阵,矩阵的每个位置上是一个绝对值不超过1000的整数.你需要找到两个不相交的A*B的矩形,使得这两个矩形包含的元素之和尽量大.注:A*B的矩形指连续的A行.B ...