SSH综合项目实战（快递） -- day03 EasyUI之datagrid、收派标准管理、收派员管理

于 2017-09-04 09:14:03 发布
阅读量695 收藏 1
点赞数
分类专栏： ssh项目实战
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wingzhezhe/article/details/77833103
版权

一、JqueryEasyUI datagrid 的使用方式

1、将静态HTML渲染为datagrid样式

（1）、html代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<!-- 引入easyui资源文件 -->
	<link rel="stylesheet" type="text/css" href="../js/easyui/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../js/easyui/themes/icon.css">
	<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
	<script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="../js/easyui/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
	<table class="easyui-datagrid">
		<thead>
			<tr>
				<th data-options="field:'id'">编号</th>
				<th data-options="field:'name'">姓名</th>
				<th data-options="field:'age'">年龄</th>
				<th data-options="field:'address'">地址</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>001</td>
				<td>张三</td>
				<td>18</td>
				<td>北京</td>
			</tr>
			<tr>
				<td>001</td>
				<td>张三</td>
				<td>18</td>
				<td>北京</td>
			</tr>
			<tr>
				<td>001</td>
				<td>张三</td>
				<td>18</td>
				<td>北京</td>
			</tr>
		</tbody>
	</table>
</body>
</html>

（2）、页面展示效果


2、发送ajax请求获取动态json数据构建datagrid

（1）、html代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<!-- 引入easyui资源文件 -->
	<link rel="stylesheet" type="text/css" href="../js/easyui/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../js/easyui/themes/icon.css">
	<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
	<script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="../js/easyui/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
	<!-- 使用datagrid，是需要提供一个URL地址，表格对象会自动发送ajax请求，加载json数据，
		但是要求json数据中的key和下面datagrid-optons中的field属性的value对应 -->
	<table class="easyui-datagrid" data-options="url:'../data/datagrid.json'">
		<thead>
			<tr>
				<th data-options="field:'id'">编号</th>
				<th data-options="field:'name'">姓名</th>
				<th data-options="field:'age'">年龄</th>
				<th data-options="field:'address'">地址</th>
			</tr>
		</thead>
</body>
</html>

（2）、json数据

[
	{"id":"1","name":"1","age":"1","address":"123"},
	{"id":"1","name":"1","age":"1","address":"123"},
	{"id":"1","name":"1","age":"1","address":"123"},
	{"id":"1","name":"1","age":"1","address":"123"},
	{"id":"1","name":"1","age":"1","address":"123"}
]

（3）、页面展示效果


3、使用easyui提供的API动态创建datagrid表格

（1）、html代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<!-- 引入easyui资源文件 -->
	<link rel="stylesheet" type="text/css" href="../js/easyui/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../js/easyui/themes/icon.css">
	<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
	<script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="../js/easyui/locale/easyui-lang-zh_CN.js"></script>
	
	<!-- 使用js动态创建表格 -->
	<script type="text/javascript">
		$(function(){
			//调用easyui提供的API在页面动态创建一个datagrid
			$("#mytables").datagrid({
				//定义表格表头上的所有列
				columns:[[
				          {id:'id',title:'编号',field:'id',checkbox:true},//每个json对应一列
				          {id:'name',title:'姓名',field:'name'},
				          {id:'age',title:'年龄',field:'age'},
				          {id:'address',title:'地址',field:'address'}
				          ]],
				url:'../data/datagrid.json',//数据的地址
				rownumbers:true,//显示行号
				singleSelect:true,//是否可以单行选中
				//定义表格的工具栏
				toolbar:[
				         	{text:'添加',iconCls:'icon-add'},//每个json表示一个按钮
				         	{text:'删除',iconCls:'icon-remove'},
				         	{text:'查询',iconCls:'icon-search',handler:function(){ //handler：给按钮绑定点击事件
				         		alert("执行查询操作");
				         	}}
				         ],
				pagination:true //显示分页条
			});
		});
	</script>
</head>
<body>
	<table id="mytables"></table>
</body>
</html>

（2）、json数据


（3）、注意：加入分页条件之后，请求中带有两个参数


二、收派标准管理

1、基于datagrid和spring data JPA实现收派标准的分页查询

（1）、修改收派标准页面中数据url地址


（2）、编写Action类中的代码

package com.itheima.bos.web.action.base;

import java.io.IOException;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.servlet.http.HttpServletResponse;

import org.apache.struts2.ServletActionContext;
import org.apache.struts2.convention.annotation.Action;
import org.apache.struts2.convention.annotation.Namespace;
import org.apache.struts2.convention.annotation.ParentPackage;
import org.apache.struts2.convention.annotation.Result;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Scope;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.PageRequest;
import org.springframework.data.domain.Pageable;
import org.springframework.stereotype.Controller;

import com.itheima.bos.domain.base.Standard;
import com.itheima.bos.service.base.StandardService;
import com.opensymphony.xwork2.ActionSupport;
import com.opensymphony.xwork2.ModelDriven;

import net.sf.json.JSONObject;

/**
 * 收派标准的动作类
 * @author Administrator
 *
 */
@Namespace("/")
@ParentPackage("struts-default")
@Controller
@Scope("prototype")
public class StandardAction extends ActionSupport implements ModelDriven<Standard> {

	private Standard model = new Standard();
	
	@Override
	public Standard getModel() {
		return model;
	}
	
	@Autowired
	private StandardService standardService;
	
	/*
	 * 保存收派标准
	 */
	@Action(value="standardAction_save",results={
			@Result(name="success",location="/pages/base/standard.html")
	})
	public String save(){
		standardService.save(model);
		return "success";
	}
	
	//使用属性驱动，封装页面传递的分页参数
	private int page;//当前页码
	private int rows;//每页显示条数

	public void setPage(int page) {
		this.page = page;
	}
	public void setRows(int rows) {
		this.rows = rows;
	}
	
	/*
	 * 收派标准分页查询
	 */
	@Action(value="standardAction_pageQuery")
	public String pageQuery() throws Exception{
		//创建一个pageable对象，封装分页参数，pageable对象是spring data JPA提供的一个对象，用来做分页的
		Pageable pageable = new PageRequest(page - 1, rows);//注意：pageable中当前页是从0开始的，所以要 - 1
		Page<Standard> page = standardService.pageQuery(pageable);
		//获取总条数
		long total = page.getTotalElements();
		//获取数据集合
		List<Standard> rows = page.getContent();
		//定义map，封装总条数和数据集合
		Map<String, Object> map = new HashMap<String, Object>();
		map.put("total", total);
		map.put("rows", rows);
		//JSONObject 是将单个对象或者Map对象转换为json
		//JSONArray 是将数组、集合对象转换为json
		String data = JSONObject.fromObject(map).toString();
		//使用输出流将数据写回客户端浏览器
		HttpServletResponse response = ServletActionContext.getResponse();
		//设置相应数据的格式和编码
		response.setContentType("text/json;charset=UTF-8");
		response.getWriter().print(data);
		
		return NONE;
	}

}

（3）、Service层代码


（4）、页面展示效果


2、修改收派标准

（1）、编写html中修改按钮绑定的事件


				id : 'button-edit',
				text : '修改',
				iconCls : 'icon-edit',
				//为修改按钮绑定点击事件
				handler : function(){
					//获取当前数据表格所有选中的行
					var rows = $("#grid").datagrid("getSelections");
					if(rows.length != 1){
						//所选中的行数不是1，弹出提示框
						$.messager.alert("提示信息","请选择的一行","warning");
					}else{
						//当前选中了一行，打开修改窗口
						$("#standardWindow").window("open");
						var row = rows[0];//row就是一个json对象
						//使用load方式进行数据回显
						$("#standardForm").form("load",row);
					}
				}

三、快递员管理

1、使用Combobox实现下拉框

（1）、组织json数据


（2）、编写html代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<!-- 引入easyui资源文件 -->
	<link rel="stylesheet" type="text/css" href="../js/easyui/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../js/easyui/themes/icon.css">
	<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
	<script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="../js/easyui/locale/easyui-lang-zh_CN.js"></script>
	
</head>
<body>
	<!-- 第一种静态数据 -->
	<select class="easyui-combobox">
		<option value="1">北京</option>
		<option value="2">河北</option>
		<option value="3">天津</option>
	</select>
	
	<hr>
	
	<!-- 第二种：动态加载下拉列表数据，此种方式比较常用 -->
	<input class="easyui-combobox" data-options="url:'../data/combobox.json',
			textField:'province',valueField:'id'">
</body>
</html>

（3）、页面展示效果


2、快递员添加功能，使用combobox展示收派标准数据

（1）、修改快递员添加中combobox


	<input type="text" name="standard.id" 
			class="easyui-combobox" 
			data-options="required:true,valueField:'id',textField:'name',
				url:'../../standardAction_findAll.action'"/>

（2）、编写收派标准Action中查询所有的代码

	/**
	 * 获取所有收派标准
	 * @throws Exception 
	 */
	@Action(value="standardAction_findAll")
	public String findAll() throws Exception{
		List<Standard> sList = standardService.findAll();
		String data = JSONArray.fromObject(sList).toString();
		HttpServletResponse response = ServletActionContext.getResponse();
		response.setContentType("text/json;charset=UTF-8");
		response.getWriter().print(data);
		return NONE;
	}

（3）、编写收派标准Service代码

	/**
	 * 获取所有收派标准
	 */
	public List<Standard> findAll() {
		return standardDao.findAll();
	}

（4）、页面展示效果


（5）、为提交按钮绑定事件

	<script type="text/javascript">
		$(function(){
			$("#save").click(function(){
				//先进行表单校验,如果校验通过，就提交表单
				if($("#courierForm").form("validate")){
					$("#courierForm").submit();
				}
			});
		});
	</script>


（6）、编写添加收件员Action代码

package com.itheima.bos.web.action.base;

import org.apache.struts2.convention.annotation.Action;
import org.apache.struts2.convention.annotation.Namespace;
import org.apache.struts2.convention.annotation.ParentPackage;
import org.apache.struts2.convention.annotation.Result;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Scope;
import org.springframework.stereotype.Controller;

import com.itheima.bos.domain.base.Courier;
import com.itheima.bos.service.base.CourierService;
import com.opensymphony.xwork2.ActionSupport;
import com.opensymphony.xwork2.ModelDriven;


@Controller
@Namespace("/")
@ParentPackage("struts-default")
@Scope("prototype")
public class CourierAction extends ActionSupport implements ModelDriven<Courier> {

	private Courier model = new Courier();
	
	public Courier getModel() {
		return model;
	}
	
	@Autowired
	private CourierService serivce;
	
	@Action(value="courierAction_save",
			results={
					@Result(name="success", location="/pages/base/courier.html")
			})
	public String save(){
		serivce.save(model);
		return SUCCESS;
	}

}

（7）、编写收件员Service层代码

package com.itheima.bos.service.base.impl;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

import com.itheima.bos.dao.base.CourierDao;
import com.itheima.bos.domain.base.Courier;
import com.itheima.bos.service.base.CourierService;

@Service
@Transactional
public class CourierServiceImpl implements CourierService {

	@Autowired
	private CourierDao dao;
	
	/**
	 * 添加收件员的方法
	 */
	public void save(Courier model) {
		dao.save(model);
	}

}

（8）、编写收件员Dao层代码

package com.itheima.bos.dao.base;

import org.springframework.data.jpa.repository.JpaRepository;

import com.itheima.bos.domain.base.Courier;

public interface CourierDao extends JpaRepository<Courier, Integer> {

}

2、快递员无条件分页查询

（1）、修改html中组建表格数据的url


（2）、编写CourierAction中分页查询方法

package com.itheima.bos.web.action.base;

import java.io.IOException;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.servlet.http.HttpServletResponse;

import org.apache.struts2.ServletActionContext;
import org.apache.struts2.convention.annotation.Action;
import org.apache.struts2.convention.annotation.Namespace;
import org.apache.struts2.convention.annotation.ParentPackage;
import org.apache.struts2.convention.annotation.Result;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Scope;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.PageRequest;
import org.springframework.data.domain.Pageable;
import org.springframework.stereotype.Controller;

import com.itheima.bos.domain.base.Courier;
import com.itheima.bos.service.base.CourierService;
import com.opensymphony.xwork2.ActionSupport;
import com.opensymphony.xwork2.ModelDriven;

import net.sf.json.JSONObject;
import net.sf.json.JsonConfig;

@Controller
@Namespace("/")
@ParentPackage("struts-default")
@Scope("prototype")
public class CourierAction extends ActionSupport implements ModelDriven<Courier> {

	private Courier model = new Courier();

	public Courier getModel() {
		return model;
	}

	@Autowired
	private CourierService serivce;

	@Action(value = "courierAction_save", results = {
			@Result(name = "success", location = "/pages/base/courier.html") })
	public String save() {
		serivce.save(model);
		return SUCCESS;
	}

	// 使用属性驱动，封装页面传递的分页参数
	private int page;
	private int rows;

	public void setPage(int page) {
		this.page = page;
	}

	public void setRows(int rows) {
		this.rows = rows;
	}
	
	/**
	 * 分页查询方法
	 * @throws Exception 
	 */
	@Action(value="courierAction_pageQuery")
	public String pageQuery() throws Exception{
		//创建一个pageable对象，封装分页参数
		Pageable pageable = new PageRequest(page - 1, rows);
		//调用方法查询分页对象
		Page<Courier> page = serivce.pageQuery(pageable);
		//获取总条数
		long total = page.getTotalElements();
		//获取数据集合
		List<Courier> rows = page.getContent();
		//定义map，封装数据
		Map<String, Object> map = new HashMap<String, Object>();
		map.put("total", total);
		map.put("rows", rows);
		//转换json，使用jsonConfig排除对象中不需要转换的属性
		JsonConfig jsonConfig = new JsonConfig();
		jsonConfig.setExcludes(new String[]{"fixedAreas","takeTime"});//fixedAreas是Courier类中的一个属性
		String data = JSONObject.fromObject(map,jsonConfig).toString();
		//使用输出流将数据写回到浏览器
		HttpServletResponse response = ServletActionContext.getResponse();
		response.getWriter().print(data);
		return NONE;
	}

}

（3）、编写CourierService方法

	/**
	 * 分页查询所有快递员信息
	 */
	public Page<Courier> pageQuery(Pageable pageable) {
		return dao.findAll(pageable);
	}

3、快递员批量删除

注意：当前所有的删除都使用逻辑删除，即数据库中保留数据，修改状态字段

（1）、修改快递员页面中删除操作的按钮的js事件

			function doDelete(){
				//获取所有选中的快递员
				var rows = $("#grid").datagrid("getSelections");
				if(rows.length == 0){
					//没有选择，弹出提示
					$.messager.alert("提示信息","请选择需要删除的快递员信息","info");
				}else{
					//已经选择了，弹出确认提示框
					$.messager.confirm("提示信息","确认要删除选中的快递员吗？",function(r){
						if(r){
							//确认删除
							var array = new Array();
							for(var i = 0; i < rows.length; i++){
								var id = rows[i].id;//获取快递员id
								array.push(id);
							}
							var ids = array.join(",");//join方法的作用是将数组中的所有元素使用,号进行拼接
							window.location.href="../../courierAction_deleteBatch.action?ids=" + ids;
						}
					});
					
				}
			}


（2）、编写后台Action代码

	/**
	 * 批量删除的方法
	 */
	@Action(value="courierAction_deleteBatch",results={
			@Result(name="success",type="redirect",location="/pages/base/courier.html")
	})
	public String deleteBatch(){
		serivce.deleteBatch(ids);
		return SUCCESS;
	}

（3）、编写后台Service代码

	/**
	 * 批量删除快递员
	 * @param ids
	 */
	public void deleteBatch(String ids){
		if(StringUtils.isNotBlank(ids)){
			//分割字符串
			String[] courierIds = ids.split(",");
			for (String id : courierIds) {
				int courierId = Integer.parseInt(id);
				//执行方法进行更新操作
				dao.deleteCourier(courierId);
			}
		}
	}

（4）、编写后台Dao层代码

package com.itheima.bos.dao.base;

import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.data.jpa.repository.Modifying;
import org.springframework.data.jpa.repository.Query;

import com.itheima.bos.domain.base.Courier;

public interface CourierDao extends JpaRepository<Courier, Integer> {

	/**
	 * 批量删除收派员 -- 逻辑删除
	 * @param courierId
	 */
	@Query("update Courier set deltag = '1' where id = ?")
	@Modifying
	public void deleteCourier(int courierId);

}

DJTUDaker
关注
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值