EasyUI之datagrid与查询

文渊.

于 2021-10-03 12:56:52 发布

阅读量440

点赞数

分类专栏：笔记文章标签： easyui mvc

本文链接：https://blog.csdn.net/m0_52788922/article/details/120593627

版权

本文档介绍了如何在EasyUI环境下实现datagrid的分页和查询功能。首先，通过菜单点击事件跳转到对应界面，然后创建jsp和js文件，结合MVC框架完成entity、dao和web类。接着，配置xml文件并根据数据库数据创建界面。在BookAction子控制器中使用链式编程简化代码，同时在js文件中设置field属性以避免错误。最后，参照EasyUI API文档完成分页和查询组件的绑定，实现关键字查询功能。

摘要由CSDN通过智能技术生成

在这里插入图片描述
目标：在上节课的基础上点击左边的树型菜单打开对应的的数据表格，并实现查询与分页功能（效果图如下）

一， datagrid

思路

1、给菜单添加点击事件，点击后跳转对应的界面
2、新建一个jsp文件夹，根据数据库创建一个uesemanage.jsp界面，和页面对应的book.js文件
3、到入MVC框架，写好对应的enetity、dao、web类
4、之后配置xml文件

根据数据库找到tree表的url数据，以人员信息维护为例建立uesemanage.jsp
在这里插入图片描述
ueseManage.jsp

%@ 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">
//导入js和css
<link rel="stylesheet" type="text/css" href="${ pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/default/easyui.css">   
<link rel="stylesheet" type="text/css" href="${ pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/icon.css">   
<script type="text/javascript" src="${ pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.min.js"></script>   
<script type="text/javascript" src="${ pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.easyui.min.js"></script> 
<script type="text/javascript" src="${ pageContext.request.contextPath }/static/js/book.js"></script> 
<title>存放书籍</title>
</head>
<body>
//隐藏域（给book.jsp全路径名）
<input type="hidden" id="ctx" value="${ pageContext.request.contextPath }">
 
<div id="tb">
    <input class="easyui-textbox" id="bname" name="bname" style="width:20%;padding-left: 10px" data-options="label:'书名:',required:true">
    <a id="btn-search" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">搜索</a>
</div>
 
<table id="dg"></table>  
 
</body>
</html>