jQuery easyUI +struts2+hibernate+oracle
实现 admin用户的分页操作
核心代码
Init.js
$(document).ready(function() {
//获取所有的a元素
var $as = $("li>a");
//获取id=tabs的元素
var $tt = $("#tt");
//注册点击事件
$as.bind("click", function() {
var text = $(this).text();
var url = this.href;
//获取添加的text 根据获取 id=tt面板中 是否包含含有 text标题的面板
var curtab = $("#tt").tabs("getTab", text);
alert(curtab);
if (curtab) {
//jQuery对象
var iframe = $(curtab.panel('options').content);
//根据属性名称获取 该属性值
var src1 = iframe.attr("src");
$("#tt").tabs("update", {
tab : curtab,
options : {
content : createFrame(src1)
}
});
} else {
$("#tt").tabs('add', {
title : text,
closable : true,
content : createFrame(url), //创建面板内容
tools : [{
iconCls : 'icon-mini-refresh',
handler : function() {
alert('refresh');
}
}]
});
}
return false;
});
});
//创建面板
function createFrame(url) {
var src = '<iframe scrolling="auto" frameborder="0" src="' + url + '" style="width:100%;height:100%;"></iframe>';
return src;
}
Adminlist.js
$(document).ready(function() {
$('#adminlist').datagrid({
url : './csdn/AdminAction_query.action?time=' + new Date().getTime(),
loadMsg : "数据正在加载……",
pageNumber : 1, //初始化起始的页码
pageSize : 10, //每页显示的数据量（测试改变不发生变化）
pageList : [10, 15, 20], //每页显示的数据量 可选项
sortName : 'aid', // 定义排列的名称
sortOrder : 'asc', // 定义排列的方式 asc
striped : true, // 是否实现隔行变色
fitColumns : true, // 是否自动设置列的宽度
singleSelect : false,
idField : 'aid', // 标识字段
frozenColumns : [[{
field : 'ck',
checkbox : true
}, {
title : '序号',
field : 'aid',
width : 50,
sortable : true
}]],
columns : [[ {
field : 'aname',
title : '用户名',
width : 100
}, {
field : 'apass',
title : '密码',
width : 100,
align : 'left',
editor : {
type : 'text'
}
}]],
pagination : true,
shownumbers : false,
toolbar : [{
iconCls : "icon-add",
text : "添加",
handler : function() {
$("#adminlist").dialog("open");
}
}, {
iconCls : "icon-remove",
text : "删除",
handler : function() {
var datas = $('#adminlist').datagrid('getSelections');
if (datas.length <= 0) {
showMsg("提示", "没有选中数据，不能执行删除!");
return;
}
$(datas).each(function(index) {
var rowIndex = $('#adminlist').datagrid('getRowIndex', this);
$('#adminlist').datagrid('deleteRow', rowIndex);
ids=this.aid;
});
$.post("./csdn/AdminAction_deleteById.action", {
id :ids
}, function() {
showMsg("成功", "删除成功!");
$('#adminlist').datagrid('reload');
});
}
}, {
iconCls : "icon-edit",
text : "修改",
handler : function() {
alert("修改");
}
}, {
iconCls : "icon-save",
text : "保存",
handler : function() {
alert("保存");
}
}]
});
var pagination = $('#adminlist').datagrid('getPager');
//设置分页属性
pagination.pagination({
beforePageText : "第",
afterPageText : "页 共{pages}页",
displayMsg : "从第{from}条到第{to}条 共{total}条"
});
$("#adminlist").dialog({
title : "添加管理员",
modal : true,
width : 300,
height : 350,
closed : true,
onBeforeOpen : function() {
$("#parentType").combotree("reload");
$("#add").form("clear");
}
});
$("#add").form({
url : '../../csdn/addGoodsType.action',
onSubmit : function() {
if (!$("#aname").validatebox("isValid") || !$("#apass").validatebox("isValid")) {
return false;
}
},
success : function(data) {
$("#adminlist").dialog("close");
$('#adminlist').datagrid("reload");
}
});
$('#adminlist').datagrid({
onDblClickRow : function(rowIndex, rowData) {
//alert(rowIndex+"------"+rowData.aname);
$('#adminlist').datagrid("beginEdit", rowIndex);
}
});
});
function showMsg(title, msg) {
$.messager.show({
title : title,
showType : "slide",
msg : msg,
timeout : 1000
});
}
Index.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<link rel="stylesheet" type="text/css"
href="${pageContext.request.contextPath }/styles/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
href="${pageContext.request.contextPath }/styles/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css"
href="${pageContext.request.contextPath }/styles/manager/init.css">
<script type="text/javascript"
src="${pageContext.request.contextPath }/scripts/jquery-1.8.0.min.js"></script>
<script type="text/javascript"
src="${pageContext.request.contextPath }/scripts/jquery.easyui.min.js"></script>
<script type="text/javascript"
src="${pageContext.request.contextPath }/scripts/manager/init.js"></script>
</head>
<body>
<div id="box" class="easyui-layout">
<!-- north开始 -->
<div data-options="region:'north',title:'North Title',split:true"
style="height:100px;"></div>
<!-- north结束 -->
<%--<div
data-options="region:'east',iconCls:'icon-reload',title:'East',split:true"
style="width:100px;"></div>
--%>
<!--west开始 -->
<div data-options="region:'west',title:'导航菜单',split:true"
style="width:200px;">
<div id="nav" class="easyui-accordion"
data-options="fit:true,border:false"
style="padding-right: 5px; padding-left: 5px;">
<div title="管理员管理" data-options="iconCls:'icon-save'">
<ul>
<li><a
href="${pageContext.request.contextPath }/backstage/admin/admin_list.jsp">管理员列表</a>
</li>
</ul>
</div>
<div title="会员管理">
<ul>
<li><a href="#">会员列表</a></li>
</ul>
</div>
<div title="商品类别管理" data-options="iconCls:'icon-reload'"
style="padding:10px;">
<ul>
<li><a href="${pageContext.request.contextPath }/backstage/goodstype_list.jsp">商品类别列表</a></li>
</ul>
</div>
<div title="商品管理" data-options="iconCls:'icon-reload'"
style="padding:10px;">
<ul>
<li><a href="#">商品列表</a></li>
</ul>
</div>
</div>
</div>
<!-- west结束 -->
<!-- center开始 -->
<div data-options="region:'center'" style="">
<div id="tt" class="easyui-tabs" data-options="fit:true">
<div title="后台操作的界面" style="padding:20px;">后台操作界面的说明</div>
</div>
</div>
<!-- center结束 -->
<!-- south开始 -->
<div data-options="region:'south',split:true"
style="height:25px; padding: 5px; background: #D2E0F2;">
<div align="center">版权归河北软件职业技术学院 @河软CSDN乐知学院所有2013-2020</div>
</div>
<!-- south结束 -->
</div>
</body>
</html>