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分 ...
随机推荐
- 使用 CAST
使用 CAST: CAST ( expression AS data_type ) 使用 CONVERT: CONVERT (data_type[(length)], expression [, st ...
- request_resource
1.全局变量 resource结构体定义如下,指针parent.sibling.child用于构建树状结构. struct resource { resource_size_t start; reso ...
- Sonya and Robots CodeForces - 1004C （思维题）
Sonya and Robots time limit per test 1 second memory limit per test 256 megabytes input: standard in ...
- JMX浅谈
一 JMX 是什么? JMX(Java Management Extensions,即Java管理扩展) JMX在Java编程语言中定义了应用程序以及网络管理和监控的体系结构.设计模式.应用程序接口以 ...
- 解决pymysql不能实时查询最新的数据
#在网上查询到的原因为: InnoDB 的默认隔离级别.它可以防止任何被查询的行被其他事务更改,从而阻止不可重复的读取,而不是 幻读取.它使用中度严格的锁定策略,以便事务内的所有查询都会查看同一快照中 ...
- git+jenkins持续集成三-定时构建语法
构建位置:选择或创建工程_设置_构建触发器 1. 定时构建语法:* * * * * (五颗星,多个时间点,中间用逗号隔开)第一个*表示分钟,取值0~59第二个*表示小时,取值0~23第三个*表示一个月 ...
- Visual Studio 在 C# 项目添加动态链接库 dll
DLL(Dynamic Link Library)文件为动态链接库文件,又称“应用程序拓展”,是软件文件类型. 使用DLL文件的好处是程序不需要在运行之初加载所有代码,只有在程序需要某个函数的时候才从 ...
- HDU3977 Evil teacher 求fib数列模p的最小循环节
In the math class, the evil teacher gave you one unprecedented problem! Here f(n) is the n-th fibona ...
- "R6002 floating point support not loaded"错误
R6002 floating point support not loaded 错误,在Debug模式下会弹出如下错误: "floating point support not loaded ...
- HLG 1494网络 （求的割点数目）可做模板
网络 Time Limit: 1000 MS Memory Limit: 65535 K Total Submit: 103(32 users) Total Accepted: 54(31 users ...