文档章节

Spring+SpringMVC+Mybatis+EasyUI古诗搜索系统-(二,前端部分)

northsailor
 northsailor
发布于 2016/07/14 17:15
字数 1219
阅读 78
收藏 0

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>

 

© 著作权归作者所有

共有 人打赏支持
northsailor
粉丝 1
博文 5
码字总数 3598
作品 0
兰州
程序员
ZHENFENGSHISAN/perfect-ssm

Quick Start 项目简介 ssm系列 ssm-demo:Spring+SpringMVC+Mybatis+easyUI整合 perfect-ssm:RESTful API+redis缓存 ssm-cluster:前后端分离+集群部署 ssm-dubbo:dubbo服务化 ssm-micro-se......

ZHENFENGSHISAN
2017/09/18
0
0
zjzdy/Offline-small-search

#Offline-small-search (离线小搜) 离线搜索软件,现支持离线搜题,搜古诗文,搜开发文档,等等.可自行打包离线包. 声明:所有离线包版权归其所有者所有,与本软件及软件开发人员无关,本软件仅提供...

zjzdy
2016/03/07
0
0
window.location.hash解析

location对象:设置或获取当前URL的信息 使用location对象可以设置或返回URL中的一些信息,一个完整的URL地址的格式为: 协议://主机:端口/路径名称#hash标识?搜索条件 其 中,协议是URL的起...

aminqiao
2014/05/09
0
0
Spring+mybatis的一个简单例子

一、eclipse新建java项目取名SpringTest 二、导入sping,mybatis,jdbc(这里用postgresql)包到构建路径 三、在psql中建库、建表的脚本。 四、创建java类 student表对应的pojo对象 映射文件cn/...

wangxuwei
2016/01/09
744
0
国内首个支持离线搜题软件--离线小搜

离线小搜(Offline-small-search) 离线搜索软件,现支持离线搜题,搜古诗文,搜开发文档,等等.可自行打包离线包. 国内首个支持离线搜题的软件. 功能及特点 离线全文检索,采用高度压缩打包的ZIM文...

zjzdy
2016/03/07
379
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

day60-20180818-流利阅读笔记-待学习

钉钉:工作的归工作,生活的…也归工作? 毛西 2018-08-18 1.今日导读 你用过“钉钉”么?被公司要求使用钉钉的感受是如何的呢?这款阿里巴巴旗下的移动办公社交平台在弯道超车微信、为许多企...

aibinxiao
36分钟前
6
0
Kubernetes的HTTPS和证书问题,汇总

通过Kubernetes建立服务网站,需要干的事情和HTTPS和证书问题,汇总如下: 建立Nginx服务器 搞服务器第一步,Ubuntu 18.04设置静态IP 安装Nginx服务。 Kubernetes的deployment使用 创建服务,...

openthings
51分钟前
1
0
php 使用redis锁限制并发访问类

1.并发访问限制问题 对于一些需要限制同一个用户并发访问的场景,如果用户并发请求多次,而服务器处理没有加锁限制,用户则可以多次请求成功。 例如换领优惠券,如果用户同一时间并发提交换领...

豆花饭烧土豆
今天
0
0
Linux环境搭建 | 手把手教你配置Linux虚拟机

在上一节 「手把你教你安装Linux虚拟机」 里,我们已经安装好了Linux虚拟机,在这一节里,我们将配置安装好的Linux虚拟机,使其达到可以开发的程度。 Ubuntu刚安装完毕之后,还无法进行开发,...

良许Linux
今天
0
0
(三)Nginx配置·续

概述 前文写了关于Nginx环境配置,但是还没有完,接下来将会继续讲三个相关的配置 主要是以下三个 1.Nginx访问日志 2.Nginx日志切割 3.静态文件不记录日志和过期时间 Nginx访问日志 1.先看看...

杉下
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部