Spring+SpringMVC+Mybatis+EasyUI古诗搜索系统-(二,前端部分)
Spring+SpringMVC+Mybatis+EasyUI古诗搜索系统-(二,前端部分)
northsailor 发表于1年前
Spring+SpringMVC+Mybatis+EasyUI古诗搜索系统-(二,前端部分)
  • 发表于 1年前
  • 阅读 10
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

摘要: 前段代码

head.jspf

<!-- 抽取出的公共头部 -->
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:set value="${pageContext.request.contextPath}" var="shop"></c:set>
	<title>唐诗搜索系统</title>
	<!-- 下面是easyUI的环境 -->
	<link rel="stylesheet" type="text/css" href="${shop}/js/jquery-easyui-1.4.5/themes/default/easyui.css" >
	<link rel="stylesheet" type="text/css" href="${shop}/js/jquery-easyui-1.4.5/themes/icon.css">
    <script type="text/javascript" src="${shop}/js/jquery-easyui-1.4.5/jquery.min.js" charset="utf-8"></script>
    <script type="text/javascript" src="${shop}/js/jquery-easyui-1.4.5/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="${shop}/js/jquery-easyui-1.4.5/locale/easyui-lang-zh_CN.js"></script>

index.jsp

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML>
<html>
<head>
<%@include file="head.jspf"%>
<link rel="stylesheet" type="text/css" href="${shop}/css/vip.css">
<script type="text/javascript">
	$(function() {
		$("a[title]")
				.click(
						function() {
							//1.判断当前后面是否有ta。
							//2.如果没有,创建新tab,否则切换到当前tab。
							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%"></iframe>'
												});
							}

						});
	});
</script>
</head>

<body>
<body class="easyui-layout">
	<div data-options="region:'north',split:true"
		style="height:100px;background:#B3DFDA;padding:0px">
		<header style="font-size: 65px;color: blue; text-align: center;">唐诗搜索系统</header>
	</div>
	<div data-options="region:'west',split:false,title:'菜单栏'"
		style="width:150px;padding:10px;">
		<div id="menu" class="easyui-accordion" data-options="fit:true">

			<div title="基本操作">
				<ul>
					<li><a href="#" title="toPoetriesSearch.do">唐诗搜索</a></li>
					<li><a href="#" title="toPoetsSearch.do">作者诗词搜索</a></li>
				</ul>
			</div>

		</div>

	</div>
	<div
		data-options="region:'east',split:true,collapsed:true,title:'East'"
		style="width:100px;padding:10px;">east region</div>
	<div data-options="region:'south',border:false"
		style="height:50px;background:#A9FACD;padding:10px;">
		<p style="margin: 10px; text-align: center;">copyright
			极客学院javaWEB六期一班黄建清</p>
	</div>
	<div data-options="region:'center',title:'操作页面'"
		style="padding: 1px;background: #fff;">
		<div id="tt" class="easyui-tabs" data-options="fit:true">
			<div title="主页面" style="padding:10px;">
				<div>
					<header style="font-size: 40px;color: blue; text-align: center;">欢迎使用唐诗搜索系统</header>
					<p style="font-size: 25px;color: blue; text-align: center;">题目或名句搜索诗句,请选择第一个选项</p>
					<p style="font-size: 25px;color: blue; text-align: center;">搜索诗人的所有诗句,请选择第二个选项</p>
				</div>
			</div>
		</div>
	</div>
</body>
</body>
</html>

poetriesSearch.jsp

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<html>
<head>
<%@include file="head.jspf"%>
<style type="text/css">
body {
	margin: 0px;
	padding: 0px;
}
</style>

</head>

<body>
	<script type="text/javascript">
		$(document).ready(function() {
			page_init();
		});
		function page_init() {
			$("#dg")
					.datagrid(
							{
								url : 'listPoeWithPageForJson.do',
								queryParams : {
									pageNumber : 1,
									pageSize : 10
								},//查询参数
								loadMsg : '请等待....',
								singleSelect : true,//只能选择一行
								fitColumns : true,//列的宽度填满表格,防止下方出现滚动条。
								nowrap : false,
								pageNumber : 1, //初始页码,得在这设置才效果,pagination设置没效果。
								pagination : true,//分页控件
								fit : true,
								toolbar : [
										{
											text : "<input type='text' id='ss' />"
										}],
								frozenColumns : [ [ {
									field : 'xy',
									checkbox : true
								}] ],
								columns : [ [ {
									field : 'title',
									title : '标题',
									width : 100
								}, {
									field : 'content',
									title : '诗词',
									width : 1000
								}, {
									field : 'poets.name',
									title : '作者',
									width : 50,
									formatter : function(value, row, index) {
										if (row.poets != null) {
											return row.poets.name;
										}
									}
								}

								] ]
							});
			var p = $("#dg").datagrid('getPager');
			$(p).pagination({
				pageSize : 10,//每页显示的记录条数,默认为20
				pageList : [ 10, 15, 20, 25 ],//可以设置每页记录条数的列表
				beforePageText : '第',//页数文本框前显示的汉字
				afterPageText : '页    共 {pages} 页',
				displayMsg : '共 {total} 条记录',
				onSelectPage : function(pageNumber, pageSize) {//分页触发
					find(pageNumber, pageSize);
				}
			});
			$("#ss").searchbox({
				width : 300,
				height : 35,
				menu : '#mm',
				searcher : function(value, name) {
					if (name == "title") {

						$('#dg').datagrid('load', {
							pageSize : 10,
							name : value,
							title : value
						});

					} else if (name == "content") {
						$("#dg").datagrid('load', {
							pageSize : 10,
							name : value,
							content : value
						});
					}

				},
				prompt : '请输入查询的内容'
			});
		}
		function find(pageNumber, pageSize) {
			$("#dg").datagrid('getPager').pagination({
				pageSize : pageSize,
				pageNumber : pageNumber
			});//重置
			$("#dg").datagrid("loading"); //加屏蔽
			$.ajax({
				type : "POST",
				dataType : "json",
				url : "listPoeWithPageForJson.do",
				data : {
					pageNumber : pageNumber,
					pageSize : pageSize
				},
				success : function(data) {
					$("#dg").datagrid('loadData', data);
					$("#dg").datagrid("loaded"); //移除屏蔽
				},
				error : function(err) {
					$.messager.alert('操作提示', '获取信息失败...请联系管理员!', 'error');
					$("#dg").datagrid("loaded"); //移除屏蔽
				}
			});

		}
	</script>
	<div id="mm" style="width:120px">
		<div data-options="name:'title',iconCls:'icon-ok'">诗名搜诗</div>
		<div data-options="name:'content',iconCls:'icon-ok'">名句搜索</div>
	</div>


	<table id="dg"></table>

</body>
</html>

poetsSearch.jsp

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<html>
<head>
<%@include file="head.jspf"%>
<style type="text/css">
body {
	margin: 0px;
	padding: 0px;
}
</style>

</head>

<body>
	<script type="text/javascript">
		$(document).ready(function() {
			page_init();
		});
		function page_init() {
			$("#dg")
					.datagrid(
							{
								url : 'listByNameWithPageForJson.do',
								queryParams : {
									pageNumber : 1,
									pageSize : 10
								},//查询参数
								loadMsg : '请等待....',
								singleSelect : true,//只能选择一行
								fitColumns : true,//列的宽度填满表格,防止下方出现滚动条。
								nowrap : false,
								pageNumber : 1, //初始页码,得在这设置才效果,pagination设置没效果。
								pagination : true,//分页控件
								fit : true,
								toolbar : [
										{
											text : "<input type='text' id='ss' />"
										}],
								frozenColumns : [ [ {
									field : 'xy',
									checkbox : true
								}] ],
								columns : [ [ {
									field : 'title',
									title : '标题',
									width : 100
								}, {
									field : 'content',
									title : '诗词',
									width : 1000
								}, {
									field : 'name',
									title : '作者',
									width : 50,
								}

								] ]
							});
			var p = $("#dg").datagrid('getPager');
			$(p).pagination({
				pageSize : 10,//每页显示的记录条数,默认为20
				pageList : [ 10, 15, 20, 25 ],//可以设置每页记录条数的列表
				beforePageText : '第',//页数文本框前显示的汉字
				afterPageText : '页    共 {pages} 页',
				displayMsg : '共 {total} 条记录',
				onSelectPage : function(pageNumber, pageSize) {//分页触发
					find(pageNumber, pageSize);
				}
			});
			$("#ss").searchbox({
				width : 300,
				height : 35,
				menu : '#mm',
				searcher : function(value,name) {
						if (name == "name") {
						$('#dg').datagrid('load', {
							pageNumber : 1,
							pageSize : 10,
							name : value
						});

					} 

				},
				prompt : '李白'
			});
		}
		function find(pageNumber, pageSize) {
			$("#dg").datagrid('getPager').pagination({
				pageSize : pageSize,
				pageNumber : pageNumber
			});//重置
			$("#dg").datagrid("loading"); //加屏蔽
			$.ajax({
				type : "POST",
				dataType : "json",
				url : "listByNameWithPageForJson.do",
				data : {
					pageNumber : pageNumber,
					pageSize : pageSize
				},
				success : function(data) {
					$("#dg").datagrid('loadData', data);
					$("#dg").datagrid("loaded"); //移除屏蔽
				},
				error : function(err) {
					$.messager.alert('操作提示', '获取信息失败...请联系管理员!', 'error');
					$("#dg").datagrid("loaded"); //移除屏蔽
				}
			});

		}
	</script>
	<div id="mm" style="width:120px">
		<div data-options="name:'name',iconCls:'icon-ok'">作者名搜诗</div>
	</div>
	<table id="dg"></table>

</body>
</html>

 

共有 人打赏支持
粉丝 2
博文 5
码字总数 3598
×
northsailor
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: