前言: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的小学生
欢迎大佬指点