文档章节

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

northsailor
 northsailor
发布于 2016/07/14 17:15
字数 1219
阅读 70
收藏 0
点赞 0
评论 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

zjzdy/Offline-small-search

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

zjzdy ⋅ 2016/03/07 ⋅ 0

window.location.hash解析

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

aminqiao ⋅ 2014/05/09 ⋅ 0

Spring+mybatis的一个简单例子

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

wangxuwei ⋅ 2016/01/09 ⋅ 0

FineCMS v2.2.1 更新内容

一、主程序更新: 增加后台内容按id搜索 增加站点首页和模块首页的静态化模式 增加单页/模块默认URL地址规则供参考 增加百度编辑器前端和后台可使用不同的工具样式 增加文本块其他站点调用方...

天睿云计算 ⋅ 2014/03/06 ⋅ 21

国内首个支持离线搜题软件--离线小搜

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

zjzdy ⋅ 2016/03/07 ⋅ 0

打算搞个在线文档管理工具

一直在为团队寻找一款开源的文档管理工具(部署在我们自己的服务器上),用途主要有两个: 产品和研发编写文档,方便日后解决问题和新人培训 面向公司其他部门的一个QA平台 我希望它拥有的功...

testglory ⋅ 2017/05/17 ⋅ 0

springMVC笔记系列(19)——控制器实现详解(上)

本文我们在前文基础上引入一个例子,边做边聊控制器。 我们想实现一个课程查询的功能。 首先大脑应该条件反射——如何定义MVC。 M:课程(包含章节)——Course(包含Chapter) V:课程页面—...

HappyBKs ⋅ 2016/06/19 ⋅ 1

互联网项目经理工作到底是一种什么样的体验?

  一阶段:1个程序员   好吧!程序员就听老板口述做开发,想想就可怕。这种情况最好就是老板自己当程序员,否则脾气不好会打架。   二阶段:2-5人的小技术团队   下面三种情况都可以...

程序员客栈 ⋅ 2016/04/27 ⋅ 0

shell脚本学习总结----sed+grep+awk+正则

shell脚本学习总结----sed+grep+awk+正则 ================================================================================ 第一部分 sed ============================================......

doublelinux ⋅ 2017/10/19 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Spring Boot整合模板引擎thymeleaf

项目结构 引入依赖pom.xml <!-- 引入 thymeleaf 模板依赖 --><dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId......

yysue ⋅ 6分钟前 ⋅ 0

ConstraintLayout使用解析

AndroidStudio3.0创建Project默认的布局就是ConstraintLayout。 AndroidStudio3.0前的可以自己修改,使用ConstraintLayout。 为了要使用ConstraintLayout,我们需要在app/build.gradle文件中...

_OUTMAN_ ⋅ 17分钟前 ⋅ 0

OSChina 周三乱弹 —— 这样的女人私生活太混乱了

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @ 胖达panda :你经历过体验到人生的大起大落吗?我一朋友在10秒内体验了,哈哈。@小小编辑 请点一首《almost lover》送给他。 《almost love...

小小编辑 ⋅ 51分钟前 ⋅ 8

自己动手写一个单链表

文章有不当之处,欢迎指正,如果喜欢微信阅读,你也可以关注我的微信公众号:好好学java,获取优质学习资源。 一、概述 单向链表(单链表)是链表的一种,其特点是链表的链接方向是单向的,对...

公众号_好好学java ⋅ 56分钟前 ⋅ 0

Centos7重置Mysql 8.0.1 root 密码

问题产生背景: 安装完 最新版的 mysql8.0.1后忘记了密码,向重置root密码;找了网上好多资料都不尽相同,根据自己的问题总结如下: 第一步:修改配置文件免密码登录mysql vim /etc/my.cnf 1...

豆花饭烧土豆 ⋅ 今天 ⋅ 0

熊掌号收录比例对于网站原创数据排名的影响[图]

从去年下半年开始,我在写博客了,因为我觉得业余写写博客也还是很不错的,但是从2017年下半年开始,百度已经推出了原创保护功能和熊掌号平台,为此,我也提交了不少以前的老数据,而这些历史...

原创小博客 ⋅ 今天 ⋅ 0

LVM讲解、磁盘故障小案例

LVM LVM就是动态卷管理,可以将多个硬盘和硬盘分区做成一个逻辑卷,并把这个逻辑卷作为一个整体来统一管理,动态对分区进行扩缩空间大小,安全快捷方便管理。 1.新建分区,更改类型为8e 即L...

蛋黄Yolks ⋅ 今天 ⋅ 0

Hadoop Yarn调度器的选择和使用

一、引言 Yarn在Hadoop的生态系统中担任了资源管理和任务调度的角色。在讨论其构造器之前先简单了解一下Yarn的架构。 上图是Yarn的基本架构,其中ResourceManager是整个架构的核心组件,它负...

p柯西 ⋅ 今天 ⋅ 0

uWSGI + Django @ Ubuntu

创建 Django App Project 创建后, 可以看到路径下有一个wsgi.py的问题 uWSGI运行 直接命令行运行 利用如下命令, 可直接访问 uwsgi --http :8080 --wsgi-file dj/wsgi.py 配置文件 & 运行 [u...

袁祾 ⋅ 今天 ⋅ 0

JVM堆的理解

在JVM中,我们经常提到的就是堆了,堆确实很重要,其实,除了堆之外,还有几个重要的模块,看下图: 大 多数情况下,我们并不需要关心JVM的底层,但是如果了解它的话,对于我们系统调优是非常...

不羁之后 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部