尚筹网：角色维护之分页前端部分

最新推荐文章于 2021-10-09 10:57:31 发布

OceanStar的学习笔记

最新推荐文章于 2021-10-09 10:57:31 发布

阅读量261

点赞数

原文链接：https://www.bilibili.com/video/av69857918?p=81

版权

尚筹网专栏收录该内容

37 篇文章 1 订阅

订阅专栏

准备

layer弹层组件

在工程中加入layer资源

2019尚筹网单一+分布式架构\单一架构\资料\前端\layer-v3.1.1\layer
在这里插入图片描述

在页面导入layer开发环境

考虑到每个页面都有可能用到，所以在include-head.jsp文件中引入

<script type="text/javascript" src="layer/layer.js"></script>

使用layer弹层提示

layer.msg("要提示的消息！");

在这里插入图片描述

前端部分

创建外部JavaScript源码文件

所在工程：atcrowdfunding-admin-1-webui
在这里插入图片描述
内容：

// 初始化全局变量
function initGlobalVariable() {
	window.pageSize = 5;
	window.pageNum = 1;
	window.keyword = "";
}

// 给服务器发送请求获取分页数据（pageInfo），并在页面上显示分页效果（主体、页码导航条）
function showPage() {
	
	// 给服务器发送请求获取分页数据：PageInfo
	var pageInfo = getPageInfo();
	console.log(pageInfo);
	
	// 在页面上的表格中tbody标签内显示分页的主体数据
	generateTableBody(pageInfo);
	
	// 在页面上的表格中tfoot标签内显示分页的页码导航条
	initPagination(pageInfo);
}

// 获取分页数据：PageInfo
function getPageInfo() {
	
	// 以同步请求方式调用$.ajax()函数并获取返回值（返回值包含全部响应数据）
	var ajaxResult = $.ajax({
		"url":"role/search/by/keyword.json",
		"type":"post",
		"data":{
			"pageNum":(window.pageNum == undefined)?1:window.pageNum,
			"pageSize":(window.pageSize == undefined)?5:window.pageSize,
			"keyword":(window.keyword == undefined)?"":window.keyword
		},
		"dataType":"json",
		"async":false	// 为了保证getPageInfo()函数能够在Ajax请求拿到响应后获取PageInfo，需要设置为同步操作
	});
	
	console.log(ajaxResult);
	
	console.log(ajaxResult.responseJSON);
	
	// 从全部响应数据中获取JSON格式的响应体数据
	var resultEntity = ajaxResult.responseJSON;
	
	// 从响应体数据中获取result，判断当前请求是否成功
	var result = resultEntity.result;
	
	// 如果成功获取PageInfo
	if(result == "SUCCESS") {
		return resultEntity.data;
	}
	
	if(result == "FAILED") {
		layer.msg(resultEntity.message);
	}
	
	return null;
}

// 使用PageInfo数据在tbody标签内显示分页数据
function generateTableBody(pageInfo) {
	
	// 执行所有操作前先清空
	$("#roleTableBody").empty();
	
	// 获取数据集合
	var list = pageInfo.list;
	
	// 判断list是否有效
	if(list == null || list.length == 0) {
		$("#roleTableBody")
			.append("<tr><td colspan='4' style='text-align:center;'>没有查询到数据！</td></tr>");
		
		return ;
	}
	
	/*
<tr>
	<td>1</td>
	<td><input type='checkbox'></td>
	<td>PM - 项目经理</td>
	<td>
		<button type='button' class='btn btn-success btn-xs'><i class=' glyphicon glyphicon-check'></i></button>
		<button type='button' class='btn btn-primary btn-xs'><i class=' glyphicon glyphicon-pencil'></i></button>
		<button type='button' class='btn btn-danger btn-xs'><i class=' glyphicon glyphicon-remove'></i></button>
	</td>
</tr>
	 */
	
	for(var i = 0; i < list.length; i++) {

		var role = list[i];
		
		var checkBtn = "<button type='button' class='btn btn-success btn-xs'><i class=' glyphicon glyphicon-check'></i></button>";
		var pencilBtn = "<button type='button' class='btn btn-primary btn-xs'><i class=' glyphicon glyphicon-pencil'></i></button>";
		var removeBtn = "<button type='button' class='btn btn-danger btn-xs'><i class=' glyphicon glyphicon-remove'></i></button>";
		
		var numberTd = "<td>"+(i+1)+"</td>";
		var checkBoxTd = "<td><input roleid='"+role.id+"' type='checkbox'></td>";
		var roleNameTd = "<td>"+role.name+"</td>";
		var btnTd = "<td>"+checkBtn+" "+pencilBtn+" "+removeBtn+"</td>";
		
		var tr = "<tr>"+numberTd+checkBoxTd+roleNameTd+btnTd+"</tr>";
		
		// 将前面拼好的HTML代码追加到#roleTableBody中
		$("#roleTableBody").append(tr);
	}
}

//声明函数封装导航条初始化操作
function initPagination(pageInfo) {
	
	// 声明变量存储分页导航条显示时的属性设置
	var paginationProperties = {
		num_edge_entries : 3,			//边缘页数
		num_display_entries : 5,		//主体页数
		callback : pageselectCallback,	//回调函数
		items_per_page : window.pageSize,	//每页显示数据数量，就是pageSize
		current_page : (window.pageNum - 1),//当前页页码
		prev_text : "上一页",			//上一页文本
		next_text : "下一页"			//下一页文本
	};
	
	// 显示分页导航条
	$("#Pagination").pagination(pageInfo.total, paginationProperties);
}

// 在每一次点击“上一页”、“下一页”、“页码”时执行这个函数跳转页面
function pageselectCallback(pageIndex,jq) {

	// 将全局变量中的pageNum修改为最新值
	// pageIndex从0开始，pageNum从1开始
	window.pageNum = pageIndex + 1;
	
	// 调用分页函数重新执行分页
	showPage();
	
	return false;
}

引用my-role.js

/atcrowdfunding-admin-1-webui/src/main/webapp/WEB-INF/role-page.jsp 修改为

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="UTF-8">
<%@ include file="/WEB-INF/include-head.jsp"%>
<link rel="stylesheet" href="css/pagination.css" />
<script type="text/javascript" src="script/jquery.pagination.js"></script>
<script type="text/javascript" src="script/my-role.js"></script>
<script type="text/javascript">
	$(function(){
		
		// 调用分页参数初始化方法
		initGlobalVariable();
		
		// 执行分页
		showPage();
	});
</script>
<body>

	<%@ include file="/WEB-INF/include-nav.jsp"%>
	<div class="container-fluid">
		<div class="row">
			<%@ include file="/WEB-INF/include-sidebar.jsp"%>
			<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
				<div class="panel panel-default">
					<div class="panel-heading">
						<h3 class="panel-title">
							<i class="glyphicon glyphicon-th"></i> 数据列表
						</h3>
					</div>
					<div class="panel-body">
						<form class="form-inline" role="form" style="float: left;">
							<div class="form-group has-feedback">
								<div class="input-group">
									<div class="input-group-addon">查询条件</div>
									<input class="form-control has-success" type="text"
										placeholder="请输入查询条件">
								</div>
							</div>
							<button type="button" class="btn btn-warning">
								<i class="glyphicon glyphicon-search"></i> 查询
							</button>
						</form>
						<button type="button" class="btn btn-danger"
							style="float: right; margin-left: 10px;">
							<i class=" glyphicon glyphicon-remove"></i> 删除
						</button>
						<button type="button" class="btn btn-primary"
							style="float: right;" onclick="window.location.href='form.html'">
							<i class="glyphicon glyphicon-plus"></i> 新增
						</button>
						<br>
						<hr style="clear: both;">
						<div class="table-responsive">
							<table class="table  table-bordered">
								<thead>
									<tr>
										<th width="30">#</th>
										<th width="30"><input type="checkbox"></th>
										<th>名称</th>
										<th width="100">操作</th>
									</tr>
								</thead>
								<tbody id="roleTableBody"></tbody>
								<tfoot>
									<tr>
										<td colspan="6" align="center">
											<div id="Pagination" class="pagination">
												<!-- 这里显示分页 -->
											</div>
										</td>
									</tr>
								</tfoot>
							</table>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

</body>
</html>

关键词查询

基本思路

在点击“查询”按钮后，获取文本框中填写的keyword值，赋值给全局变量keyword，调用showPage()函数即可。

给“查询”按钮标记id
给“查询”按钮绑定单击响应函数
在单击响应函数中获取文本框中输入的数据
验证输入数据是否有效
如果无效，提示，停止函数执行
如果有效，赋值给window.keyword
调用showPage()

代码

$("#searchBtn").click(function(){
	// 在单击响应函数中获取文本框中输入的数据
	var keyword = $.trim($("#keywordInput").val());
	
	// 验证输入数据是否有效
	if(keyword == null || keyword == "") {
		// 如果无效，提示，停止函数执行
		layer.msg("请输入关键词！");
		return ;
	}
	
	// 如果有效，赋值给window.keyword
	window.keyword = keyword;
	
	// 调用showPage()重新分页
	showPage();
});

在这里插入图片描述

OceanStar的学习笔记

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
尚筹网：角色维护之分页前端部分

准备layer弹层组件在工程中加入layer资源2019尚筹网单一+分布式架构\单一架构\资料\前端\layer-v3.1.1\layer在页面导入layer开发环境考虑到每个页面都有可能用到，所以在include-head.jsp文件中引入<script type="text/javascript" src="layer/layer.js"></script&gt...
复制链接

扫一扫