文档章节

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

northsailor
 northsailor
发布于 2016/07/14 17:15
字数 1219
阅读 79
收藏 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
Spring+mybatis的一个简单例子

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

wangxuwei
2016/01/09
744
0
window.location.hash解析

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

aminqiao
2014/05/09
0
0
zjzdy/Offline-small-search

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

zjzdy
2016/03/07
0
0
FineCMS v2.2.1 更新内容

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

天睿云计算
2014/03/06
2.9K
21

没有更多内容

加载失败,请刷新页面

加载更多

统一客服消息返回错误:{"errcode":43004,"errmsg":"require subscribe hint: [9Vv08633952]"}

公众号或者小程序发送客服消息错误: {"errcode":43004,"errmsg":"require subscribe hint: [9Vv08633952]"} 场景:小程序使用公众号的服务消息,推送消息,如果接收人没有关注公众号,就会出...

tianma3798
23分钟前
1
0
Rainbond V5.0 Beta公测公告

Rainbond支撑企业应用的开发、架构、交付和运维的全流程,通过“无侵入”架构无缝衔接各类企业应用,底层资源可以对接和管理IaaS、虚拟机和物理服务器 Rainbond V5.0即日起开启Beta版本公测,...

好雨云帮
41分钟前
2
0
Word Pattern(leetcode290)

Given a pattern and a string str, find if str follows the same pattern. Here follow means a full match, such that there is a bijection between a letter in pattern and a non-empt......

woshixin
47分钟前
1
0
Kubernetes 1.13.1快速升级

Kubernetes 1.13.1已经正式发布,快速升级(含国内镜像快速下载链接)包括升级kubeadm/kubectl/kubelet版本、拉取镜像、升级Kubernetes集群三个主要步骤。注意Kubernetes 1.12.3版本暂时不支...

openthings
50分钟前
2
0
多线程的实现方式

多线程是指 一个程序运行时,产生或使用了不止一个线程。 线程的生命周期是怎么样的,下面这张图我们可以看出些端倪: 这章我们主要讨论多线程实现的方式,基础知识部分我们可以下来再恶补。...

搬砖大侠
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部