前言：EasyUI有七个重要的控件：layout、tree、tabs、datagrid、form、messeger、combobox。之前讲了三个控件，今天要分享的是datagrid控件
码字不易，点个关注
转载请说明！
开发工具:eclipse
思维导图
目录
一、明确目标
实现效果：当点击左边菜单栏时，要用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"%>
<!-- common.jsp -->
<!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/black/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="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>
<!-- <a id="btn-search" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">新增</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,
columns : [ [ {
field : 'bid',
title : 'id',
width : 100
}, {
field : 'bname',
title : '名字',
width : 300
}, {
field : 'price',
title : '价格',
width : 100,
}
] ]
});
$("#btn-search").click(function() {
$('#dg').datagrid('load', {
bname : $("#bname").val()
});
});
})
BookAction代码：
public class BookAction extends ActionSupport implements ModelDriver<Book> {
Book book= new Book();
BookDao dao = new BookDao();
public Book getModel() {
return book;
}
public String datagrid(HttpServletRequest req, HttpServletResponse resp) {
PageBean pageBean = new PageBean();
pageBean.setRequest(req);
try {
List<Book> list = dao.list(book,pageBean);
ObjectMapper om = new ObjectMapper();
//json数组
// 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));
} catch (Exception e) {
e.printStackTrace();
}
return null;
}
}
链式编程:链式编程可以使得代码可读性高，链式编程的原理就是返回一个this对象，就是返回本身，达到链式效果
package com.hpw.util;
import java.util.HashMap;
public class R extends HashMap{
public R data(String key,Object value) {
this.put(key, value);
return this;
}
}
二、利用dategrid属性进行查询
1、思路
1、首先要写好控件的位置，写在对应的usermanage.jsp界面上（其中用到了load以及toolbar属性）
2、在book.js中要写好点击方法，当点击查询按钮时要出现对应效果，
2、具体代码实现
usermanage界面代码：
<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>book.js代码：
$("#btn-search").click(function() {
$('#dg').datagrid('load', {
bname : $("#bname").val()
});
});运行结果如下：
到这里就结束了，我依旧是那个学IT的小学生
欢迎大佬指点