EasyUI——实现对上次写的页面的增删改查样式，并实现查询的效果，模糊查询数据-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_43918130/article/details/103286885

本文介绍如何使用EasyUI框架实现管理员信息的展示、添加、修改、删除及查询功能。通过具体代码示例，详细讲解了如何设置表格样式、添加操作按钮以及实现模糊查询，适合初学者跟随学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

前言

看这个，最好先看一下我上一篇的学习，因为是层层递进的，可以一起跟着学。

引入样式

在这里插入图片描述
具体的代码如下

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.3/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.3/themes/icon.css">
<script type="text/javascript" src="jquery-easyui-1.3.3/jquery.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script>
<title>管理员管理</title>
</head>
<body style="margin: 5px;">
	<table id="dg" title="管理员信息管理" class="easyui-datagrid" fitColumns="true" pagination="true"
	pagination="true" rownumbers="true" fit="true" url="managerList" toolbar="#tb" >
		<thead>
			<tr>
				<th field="cb" checkbox="true"></th>
				<th field="id" width="8%">编号</th>
				<th field="userName" width="20%">管理员姓名</th>
				<th field="password" width="72%">管理员密码</th>
			</tr>
		</thead>											
	</table>
	<div id="tb">
		<div>
			<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true">添加</a>
			<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true">修改</a>
			<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true">删除</a>
			<a href="#" class="easyui-linkbutton" iconCls="icon-search" plain="true">查找</a>
		</div>
	</div>
</body>
</html>

完善查询

修改一下，把查询功能抽离出来，加上查询条件

效果如下

在这里插入图片描述

代码变动

<div id="tb">
		<div>
			<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true">添加</a>
			<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true">修改</a>
			<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true">删除</a>
		</div>
		<div>
		管理员姓名：<input type="text" name="m_userName" id="m_userName"/>
		<a href="#" class="easyui-linkbutton" iconCls="icon-search" plain="true">查找</a>
		</div>
	</div>

昨天写的博客已经在底层把查询的写完了，现在只用直接用就行了

功能实现

首先我在后台加了一个System.out.println(userName);的输出语句，昨天已经把模糊查询写完了，现在只需要把这个模糊查询的值传给后台就行了，我们改变的是userName，现在加一个JavaScript的处理事件，为search加的
如下

<div>
		&nbsp;管理员姓名：<input type="text" name="s_userName" id="s_userName"/>
		<a href="javascript:searchManager()" class="easyui-linkbutton" iconCls="icon-search" plain="true">&nbsp;查找</a>
		</div>

然后在上面实现这个js方法

<script type="text/javascript">
	function searchManager() {
		//全是ajax调用的，因为我们只用对局部的数据进行变动
		//datagrid方法，引入的是下面的table的id，并且是可以自己加参数的
		$('#dg').datagrid('load',{
			//jQuery的知识点
			userName:$('#s_userName').val()
		});
	}
</script>

现在输入一个查询条件为3的数据进行查询，对比上面的三条数据，少了一条，说明查询实现了
在这里插入图片描述现在看一下我们加的那个输出语句在控制台输出的东西

有两次数据的输出，可以看到，第一次数据的输出hi空，因为我们在第一次加载界面的时候，是没有给查询条件的，而首次加载界面，就会与后台进行一次数据的交互，这样我们传过去的是空数据，就实现了无条件查询，即查找全部的数据，现在我们把userName改成3，就实现了带条件的查询