前言:EasyUI有七个重要的控件:layout、tree、tabs、datagrid、form、messeger、combobox。之前讲了三个控件,今天要分享的是datagrid控件。
一、明确目标:
实现效果:当点击左边菜单栏时,要用datagrid(数据表格)控件将数据展现在右边界面上,
已经要用到查询。
二、具体思路以及代码实现:
一、利用dategrid进行数据展示以及结果集的封装:
1、思路:
1、将左边菜单添加点击事件,点击后要弹出对应的界面
2、点击左侧菜单栏要跳转到相应界面中
3、新建一个jsp文件夹,创建一个uesemanagejsp界面,同时要写一个book.js
4、之后就是将MVC框架导进去,写好对应的enetity、dao、web类
5、之后配置xml文件
2、代码实现:
usermanage界面代码:
<%@ 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="${ 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>
<input type="hidden" id="ctx" value="${ pageContext.request.contextPath }">
<div id="tb">
<input class="easyui-textbox" id="bname" name="name" >
<a id="btn-search" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true">搜索</a>
<!-- <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help',plain:true"/a>
--></div>
<table id="dg"></table>
</body>
</html>
其中将人员数据维护与数据联系起来的是以下代码:
<script type="text/javascript"
src="${ pageContext.request.contextPath }/static/js/book.js"></script>
book.js代码:
$(function() {
$('#dg').datagrid({
url:$('#ctx').val()+'/book.action?methodName=datagrid',
pagination:true,
toolbar:'#tb',
columns:[[
{field:'bid',title:'id',width:100},
{field:'bname',title:'名称',width:100},
{field:'price',title:'价格',width:100,align:'right'}
]]
});
BookAction代码:
public class BookAction extends ActionSupport implements ModelDriver<Book> {
private Book book = new Book();
BookDao bd = new BookDao();
public Book getModel() {
return book;
}
public String datagrid(HttpServletRequest req, HttpServletResponse resp) throws Exception {
PageBean pageBean = new PageBean();
pageBean.setRequest(req);
List<Book> list = bd.list(book, pageBean);
ObjectMapper om = new ObjectMapper();
// Map<String, Object> map = new HashMap<String, Object>();
// map.put("total", pageBean.getTotal());
// map.put("rows", list);
ResponseUtil.writeJson(resp,new R().data("total", pageBean.getTotal()).data("rows", list));
return null;
}
将整个项目运行之后可以得到运行效果:
二、利用dategrid属性进行查询:
1、思路:
1、首先要写好控件的位置,写在对应的usermanage.jsp界面上(其中用到了load以及toolbar属性)
2、在book.js中要写好点击方法,当点击查询按钮时要出现对应效果,
2、具体代码实现:
usermanage界面代码:
<div id="tb">
<input class="easyui-textbox" id="bname" name="name" >
<a id="btn-search" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true">搜索</a>
<!-- <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help',plain:true"/a>
--></div>
book.js代码:
$("#btn-search").click(function(){
$('#dg').datagrid('load',{
bname: $("#bname").val()
});
})
运行效果:
三、关于结果集的封装:新建一个实体类,然后将共同结果集写到一个方法里面,最后只要调用这个方法即可:即可简便代码。
新建一个R类:
BookAction:
四、思维导图:
总结:今天分享datagrid知识就到这里了,希望能够帮助到大家。祝大家生活愉快!