
目标:在上节课的基础上点击左边的树型菜单打开对应的的数据表格,并实现查询与分页功能(效果图如下)

一, 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>
book实体类
package com.zking.entity;
public class Book

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

被折叠的 条评论
为什么被折叠?



