一.在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所以直接能拿到了。