datagrid初用

落日飞行

于 2021-09-13 23:25:45 发布

阅读量954

点赞数

分类专栏：前端-EasyUI 文章标签： easyui 前端框架

本文链接：https://blog.csdn.net/m0_53151031/article/details/120277509

版权

前端-EasyUI 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

前言：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知识就到这里了，希望能够帮助到大家。祝大家生活愉快！

落日飞行

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
datagrid初用

前言：EasyUI有七个重要的控件：layout、tree、tabs、datagrid、form、messeger、combobox。之前讲了三个控件，今天要分享的是datagrid控件。一、明确目标：实现效果：当点击左边菜单栏时，要用datagrid（数据表格）控件将数据展现在右边界面上，已经要用到查询。二、具体思路以及代码实现：一、利用dategrid进行数据展示以及结果集的封装：1、思路： 1、将左边菜单添加点击事件，点击后要弹出对应的界...
复制链接

扫一扫