开发小demo
1.前端总页面(index.jsp)
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<title>有点大雪影院管理系统</title>
<meta content="text/html" charset="UTF-8">
<link rel="stylesheet" type="text/css" href="themes/bootstrap/easyui.css">
<link rel="stylesheet" type="text/css" href="themes/icon.css">
<link rel="stylesheet" type="text/css" href="themes/color.css">
<link rel="stylesheet" type="text/css" href="themes/local_css/index.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="locale/easyui-lang-zh_CN.js"></script>
</head>
<body class="easyui-layout">
<div data-options="region:'north',hideCollapsedContent:false, title:'<center>有点大雪影院管理系统</center>', border:false, " style="height:100px;">
<div id="m_top" style="display:inline-block;padding-top: 8px">
<span style="text-align: center;color:royalblue;margin-left: 400px;">
<img src="themes/icons/kodinger_logo.png" alt="有点大雪影院管理系统" style="width: 50px; height: 50px;">
<span style="font-size: 33px;">欢迎来到有点大雪影院管理系统</span>
<span style="font-size: 20px; margin-left: 400px;">
欢迎您,${u.u_name}!
<a href="logout">注销</a>
</span>
</span>
</div>
</div>
<div data-options="region:'south',hideCollapsedContent:false,collapsed:true,title:'版权信息',border:'false',split:true" style="height:70px;">
<div id="belongs" style=" font-family: 'Lucida Sans'; text-align: center;">
<p>Copyright © 2019.5.15 XQRJ</p>
</div>
</div>
<div data-options="region:'east',split:true,hideCollapsedContent:false,collapsed:true,title:'系统通知'"
style="width:100px;"></div>
<div id="west_menu" data-options="region:'west',hideCollapsedContent:false,collapsed:false,title:'菜单',split:true" style="width:180px;">
<div class="easyui-accordion" data-options="fit:true,border:false" style="width:248px; height: 80px">
<div title="管理剧目" data-options="iconCls:'icon-film'" style="overflow:auto;padding:10px;">
<ul data-options="iconCls:'icon-staff'" >
<li><a href="#" title="剧目管理" onclick="addTab('剧目管理','m_film.jsp')">剧目管理</a></li>
</ul>
</div>
</div>
</div>
<div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;">
<div id="tt" class="easyui-tabs" data-options="fit:true">
<div title="系统欢迎页面" style="padding:10px;">
欢迎来到 <span style="font-size: 23px;">有点大雪影院</span><br>
</div>
</div>
</div>
<%--自定义js,用于页面处理--%>
<script type="text/javascript" src="/js/local_js/index.js"></script>
</body>
</html>
2.总页面js文件(index.js)
$(function () {
$("a[title]").click(function () {
var text = $(this).text();
var href = $(this).attr("title");
if ($("#tt").tabs("exists", text)) {
$("#tt").tabs("select", text);
} else {
$("#tt").tabs("add", {
title: text,
closable: true,
content: '<iframe title=' + text + 'src=' + href + ' frameborder="0" width="100%" height="100%" />'
});
}
});
});
function addTab(title, url) {
if ($('#tt').tabs('exists', title)) {
$('#tt').tabs('select', title);
} else {
var content = '<iframe scrolling="auto" frameborder="0" src="' + url + '" style="width:100%;height:100%;"></iframe>';
$('#tt').tabs('add', {
title: title,
content: content,
closable: true
});
}
}
3.分页面之一(m_film.jsp)
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>M_FILM</title>
<link rel="stylesheet" type="text/css" href="themes/bootstrap/easyui.css">
<link rel="stylesheet" type="text/css" href="themes/icon.css">
<link rel="stylesheet" type="text/css" href="themes/color.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
<div id="c1">
<table id="m_film" class="easyui-datagrid" style="width: 100%;height:600px;" data-options="
title:'剧目管理',
iconCls: 'icon-film',
url: 'search_all_plays',
method: 'get',
pagination:true,
toolbar: '#c1_tool'
">
</table>
<div id="c1_tool" style="padding: 5px;">
<a id="n1" href