Easyui---后台实现

最新推荐文章于 2022-08-22 09:47:32 发布

无感_K

最新推荐文章于 2022-08-22 09:47:32 发布

阅读量361

点赞数

分类专栏：笔记文章标签： easyui jquery html

本文链接：https://blog.csdn.net/weixin_55966394/article/details/120298491

版权

笔记专栏收录该内容

54 篇文章 0 订阅

订阅专栏

一.在tabs中实现数据交互之查询（datagrid）

1.效果展示

今日目标，右侧内容框要显示数据

结果展示

数据来自后端，并且分页功能可以使用。

2.前端实现

在上一次的基础上，我们只需要新增一个userManage.jsp页面即可，

而按照Easyui的API介绍，只需要在页面中增加

<table id="dg"></table>

就行，

userManage.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">
<title>Insert title here</title>
<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>
</head>
<body>
<input id="myWeb" type="hidden" value="${pageContext.request.contextPath }">
<table id="dg"></table>
</body>
<script>
$('#dg').datagrid({    
    url:$('#myWeb').val()+"/book.action?methodName=datagrid", 
    pagination:true,//是否分页
    columns:[[    
        {field:'bid',title:'编号',width:100},    
        {field:'bname',title:'名称',width:500},    
        {field:'price',title:'价格',width:100,align:'right'}    
    ]]   
});  
</script>
</html>

可以更改url使用API中的本地数据，而后台数据，也只需要做成那个样子就可以了

注：分页条只需要加pagination:true,代码就好框架会自动向后台发送请求，请求参数框架间各不相同，Easyui:page,rows;Bootstarp:page,offset;Layui:page,limit;在使用不同框架时，后台pageBean工具类需要进行修改。

1.先使用固定数据测试：

将url改为文件名即可

<script>
$('#dg').datagrid({    
    url:'datagrid_data1.json', 
    pagination:true,
    columns:[[    
        {field:'productid',title:'编号',width:100},    
        {field:'productname',title:'名称',width:500},    
        {field:'listprice',title:'价格',width:100,align:'right'}    
    ]]   
});  
</script>

效果：

数据是死的，分页只能看；

2.更改url向后台请求：

<script>
$('#dg').datagrid({    
    url:$('#myWeb').val()+"/book.action?methodName=datagrid", 
    pagination:true,
    columns:[[    
        {field:'bid',title:'编号',width:100},    
        {field:'bname',title:'名称',width:500},    
        {field:'price',title:'价格',width:100,align:'right'}    
    ]]   
});  
</script>

效果：

OK，前端效果做完了，来看后端实现

3.后台数据实现

1.目标

只需要创造出像文件中格式的json数据，给前台就可以。

用Book做实体类对象，查询那一套就省了。

直接放BookAction类

package com.csf.web;

import java.util.List;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.csf.dao.BookDao;
import com.csf.entity.Book;
import com.zking.framework.ActionSupport;
import com.zking.framework.ModelDriver;
import com.zking.util.PageBean;
import com.zking.util.R;
import com.zking.util.ResponseUtil;

public class BookAction extends ActionSupport implements ModelDriver<Book> {
  private Book book=new Book();
  private BookDao bookDao=new BookDao();
  
  
  
	public String datagrid(HttpServletRequest req, HttpServletResponse resp) {
		PageBean pageBean=new PageBean();
		pageBean.setRequest(req);
		try {
			List<Book> list = bookDao.list(book, pageBean);//得到数据
			//链式编程
			ResponseUtil.writeJson(resp, new R()
					.data("total", pageBean.getTotal())
					.data("rows", list));
		} catch (Exception e) {
			e.printStackTrace();
		}
		return null;
	}
	
	public Book getModel() {
		return book;
	}
	
}

因为是ajax所以直接能拿到了。

无感_K

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Easyui---后台实现

一.在tabs中实现数据交互之查询（datagrid）1.效果展示今日目标，右侧内容框要显示数据结果展示数据来自后端，并且分页功能可以使用。2.前端实现在上一次的基础上，我们只需要新增一个userManage.jsp页面即可，而按照Easyui的API介绍，只需要在页面中增加<table id="dg"></table>就行，userManage.jsp页面：<%@ page language="java" contentT.
复制链接

扫一扫