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分 ...
随机推荐
- A1055 The World's Richest（25 分）
A1055 The World's Richest(25 分) Forbes magazine publishes every year its list of billionaires based ...
- V4L2学习（一）整体说明
1.概述 Video4Linux2是Linux内核中关于视频设备的内核驱动框架,为上层的访问底层的视频设备提供了统一的接口.凡是内核中的子系统都有抽象底层硬件的差异,为上层提供统一的接口和提取出公共代 ...
- Diycode开源项目 LoginActivity分析
1.首先看一下效果 1.1.预览一下真实页面 1.2.分析一下: 要求输入Email或者用户名,点击编辑框,弹出键盘,默认先进入输入Email或用户名编辑框. 点击密码后,密码字样网上浮动一段距离,E ...
- Robot Framework Webdriver For Firefox FQA
记录一下过程中使用的问题,希望大家碰到类似问题能够提高效率解决. 问题1.通过js脚本定位unieap框架网页中radio选项. 通过执行js脚本获取radio选项,并通过xpath路径点击. js脚 ...
- wget常用下载命令
wget wget是一个从网络上自动下载文件的自由工具,支持通过HTTP.HTTPS.FTP三个最常见的TCP/IP协议下载,并可以使用HTTP代理.wget名称的由来是“World Wide Web ...
- ogre3D学习基础13 -- 键盘控制网格动画mesh
以上一节为蓝本,这里增加一点难度,添加了四个节点,增加键盘控制移动速度,使用bool变量控制是否移动. 第一,要增加键盘控制,那就使用OIS::KeyListener,在监听器里添加一个父类KeyLi ...
- c++ 中double与string之间的转换,char *
运行代码为 /* * main.cpp * * Created on: Apr 7, 2016 * Author: lizhen */ #include <iostream> //#inc ...
- Unity 脚本<2>
UnityEngine; using System.Collections; public class PlayerControl : MonoBehaviour { [HideInInspector ...
- Centos定时自动执行脚本
检查本机crond的基本情况 1.crond的运行状况 2.crond是否开机自启动 如何将脚本添加进自动运行的时间内 直接编辑 vim /etc/crontab ,默认的文件形式如后面的图: 我 ...
- Java和C#中神奇的String
Java String: String 类适用于描述字符串事物.该类是不可以被继承的.我们主要学习: 1字符串特性.字符串最大的特性:一旦被初始化就不可以被改变.重赋值只是改变了引用. 2字符串操作. ...