电商平台后台管理系统---＞系统详细设计(订单管理模块)
5.3 订单管理
订单管理包括创建订单、查询订单、删除订单和查看订单明细等功能
5.3.1 订单列表显示
1.前端页面
（1）效果图
图5.11 订单列表显示页面
（2）前面页面主要技术介绍及主要功能
主要组成：
- datagrid控件：通过javascript对id为orderDg的datagrid控件进行初始化，其中通过提交请求orderinfo/list获取数据源
- 工具栏：查看明细（调用editOrder()函数，提交请求orderinfo/getOrderInfo）和删除订单（调用removeOrder();函数，提交请求orderinfo/deleteOrder）按钮（类型为easyui-linkbutton）
- 查询表单：
- 订单编号（类型easyui-textbox），
- 客户名称（input,类型easyui-combobox，其中列表内容通过提交userinfo/getValidUser请求获得），
- 订单状态（select，类型easyui-combobox，内容通过添加），
- 订单起止时间（input，类型easyui-databox）
- 查找按钮（调用searchOrderInfo()函数，通过添加参数重新加载datagrid表格）
- 查看订单
（3）主要代码
- searchorder.jsp
$(function() {
$('#orderDg').datagrid({
singleSelect : false,
url : 'orderinfo/list', //为datagrid设置数据源
queryParams : {}, //查询条件
pagination : true, //启用分页
pageSize : 5, //设置初始每页记录数（页大小）
pageList : [ 5, 10, 15 ], //设置可供选择的页大小
rownumbers : true, //显示行号
fit : true, //设置自适应
toolbar : '#orderTb', //为datagrid添加工具栏
header : '#searchOrderTb', //为datagrid标头添加搜索栏
columns : [ [ { //编辑datagrid的列
title : '序号',
field : 'id',
align : 'center',
checkbox : true
}, {
field : 'ui',
title : '订单客户',
formatter : function(value, row, index) {
if (row.ui) {
return row.ui.userName;
} else {
return value;
}
},
width : 100
}, {
field : 'status',
title : '订单状态',
width : 80
}, {
field : 'ordertime',
title : '订单时间',
width : 100
}, {
field : 'orderprice',
title : '订单金额',
width : 100
} ] ]
});
});
2.数据库Dao接口
（1）主要代码
- OrderInfoDao
//分页获取订单信息
@Results({
@Result(column = "uid",property = "ui",
one = @One(select = "com.hcz.dao.UserInfoDao.getUserInfoById",fetchType = FetchType.EAGER))
})
@SelectProvider(type = OrderInfoDynaSqlProvider.class,method = "selectWithParam")
List<OrderInfo> selectByPage(Map<String, Object> params);
//根据条件查询订单总数
@SelectProvider(type = OrderInfoDynaSqlProvider.class,method = "count")
int count(Map<String, Object> params);
- UserInfoDao
//根据用户id号获取客户对象
@Select("select * from user_info where id = #{id}")
public UserInfo getUserInfoById(int id);
- OrderInfoDynaSqlProvider
/**
* 基于动态SQL的注解类
*/
public class OrderInfoDynaSqlProvider {
//分页动态查询
public String selectWithParam(final Map<String,Object> params){
String sql = new SQL(){
{
SELECT("*");
FROM("order_info");
if (params.get("orderInfo") != null){
OrderInfo orderInfo = (OrderInfo)params.get("orderInfo");
if (orderInfo.getId() != null && orderInfo.getId() > 0) {
WHERE(" id = #{orderInfo.id} ");
} else {
if (orderInfo.getStatus() != null && !"请选择".equals(orderInfo.getStatus())) {
WHERE(" status = #{orderInfo.status} ");
}
if (orderInfo.getOrderTimeFrom() != null && !"".equals(orderInfo.getOrderTimeFrom())) {
WHERE(" ordertime >= #{orderInfo.orderTimeFrom} ");
}
if (orderInfo.getOrderTimeTo() != null && !"".equals(orderInfo.getOrderTimeTo())) {
WHERE(" ordertime < #{orderInfo.orderTimeTo} ");
}
if (orderInfo.getUid() > 0) {
WHERE(" uid = #{orderInfo.uid} ");
}
}
}
}
}.toString();
if (params.get("pager") != null) {
sql += " limit #{pager.firstLimitParam} , #{pager.perPageRows} ";
}
return sql;
}
// 根据条件动态查询订单总记录数
public String count(final Map<String, Object> params) {
return new SQL() {
{
SELECT("count(*)");
FROM("order_info");
if (params.get("orderInfo") != null) {
OrderInfo orderInfo = (OrderInfo) params.get("orderInfo");
if (orderInfo.getId() != null && orderInfo.getId() > 0) {
WHERE(" id = #{orderInfo.id} ");
} else {
if (orderInfo.getStatus() != null && !"请选择".equals(orderInfo.getStatus())) {
WHERE(" status = #{orderInfo.status} ");
}
if (orderInfo.getOrderTimeFrom() != null && !"".equals(orderInfo.getOrderTimeFrom())) {
WHERE(" ordertime >= #{orderInfo.orderTimeFrom} ");
}
if (orderInfo.getOrderTimeTo() != null && !"".equals(orderInfo.getOrderTimeTo())) {
WHERE(" ordertime < #{orderInfo.orderTimeTo} ");
}
if (orderInfo.getUid() > 0) {
WHERE(" uid = #{orderInfo.uid} ");
}
}
}
}
}.toString();
}
}
3.业务逻辑接口及其实现类
（1）主要代码
- OrderInfoService
//订单总数
int count(Map<String, Object> params);
//分页显示订单
List<OrderInfo> findOrderInfo(OrderInfo orderInfo, Pager pager);
- OrderInfoServiceImpl
@Autowired
private OrderInfoDao orderInfoDao;
@Override
public List<OrderInfo> findOrderInfo(OrderInfo orderInfo, Pager pager) {
Map<String,Object> params = new HashMap<>();
params.put("orderInfo",orderInfo);
int recordCount = orderInfoDao.count(params);
pager.setRowCount(recordCount);
if (recordCount > 0){
params.put("pager",pager);
}
return orderInfoDao.selectByPage(params);
}
@Override
public int count(Map<String, Object> params) {
return orderInfoDao.count(params);
}
4.控制器类
（1）主要代码
- OrderInfoController
/**
* 订单信息控制器类
*/
@Controller
@RequestMapping(value = "/orderinfo")
public class OrderInfoController {
@Autowired
private OrderInfoService orderInfoService;
@Autowired
private UserInfoService userInfoService;
@Autowired
private ProductInfoService productInfoService;
//分页显示，响应orderinfo/list请求
@RequestMapping(value = "/list")
@ResponseBody
public Map<String ,Object> list(Integer page, Integer rows, OrderInfo orderInfo){
//初始化一个分页类对象pager
Pager pager = new Pager();
pager.setCurPage(page);
pager.setPerPageRows(rows);
//创建对象params，用于封装查询条件
Map<String,Object> params = new HashMap<>();
params.put("orderInfo",orderInfo);
//获取满足条件的订单总数
int totalCount = orderInfoService.count(params);
//获取满足条件的订单列表
List<OrderInfo> orderInfos = orderInfoService.findOrderInfo(orderInfo,pager);
//创建result对象，用来保存查询结果
Map<String,Object> result = new HashMap<>();
result.put("total",totalCount);
result.put("rows",orderInfos);
return result;
}
5.3.2查询订单
1.前端页面
（1）效果图
图5.12 订单查询页面
（2）前面页面主要技术介绍及主要功能
查询表单：
（3）主要代码
- searchorder.jsp
<div id="searchOrderTb" style="padding:2px 5px;"> <form id="searchOrderForm"> <div style="padding:3px"> 订单编号 <input class="easyui-textbox" name="search_oid" id="search_oid" style="width:110px" /> div> <div style="padding:3px"> 客户名称 <input style="width:115px;" id="search_uid" class="easyui-combobox" value="0" name="search_uid" data-options="valueField:'id',textField:'userName',url:'userinfo/getValidUser'"> 订单状态 <select id="search_status" class="easyui-combobox" name="search_status" style="width:115px;"> <option value="请选择" selected>请选择option> <option value="未付款">未付款option> <option value="已付款">已付款option> <option value="待发货">待发货option> <option value="已发货">已发货option> <option value="已完成">已完成option> select> 订单时间 <input class="easyui-datebox" name="orderTimeFrom" id="orderTimeFrom" style="width:115px;" /> ~ <input class="easyui-datebox" name="orderTimeTo" id="orderTimeTo" style="width:115px;" /> <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-search" plain="true" onclick="searchOrderInfo();">查找a> div> form> div>// 查询订单 function searchOrderInfo() { var oid = $('#search_oid').val(); var status = $('#search_status').combobox("getValue"); var uid = $('#search_uid').combobox("getValue"); var orderTimeFrom = $("#orderTimeFrom").datebox("getValue"); var orderTimeTo = $("#orderTimeTo").datebox("getValue"); $('#orderDg').datagrid('load', { id : oid, status : status, uid : uid, orderTimeFrom : orderTimeFrom, orderTimeTo : orderTimeTo }); }2.数据库Dao接口
（1）主要代码
- UserInfoDao
//获取合法客户，即数据表user_info中status字段为1的用户列表 @Select("select * from user_info where status =1") List<UserInfo> getValidUser();3.业务逻辑接口及其实现类
（1）主要代码
- UserInfoService
List<UserInfo> getValidUser();
- UserInfoServiceImpl
//获取合法用户 @Override public List<UserInfo> getValidUser() { return userInfoDao.getValidUser(); }4.控制器类
（1）主要代码
- UserInfoController
//获取客户名单 @RequestMapping("/getValidUser") @ResponseBody public List<UserInfo> getValidUser(){ List<UserInfo> uiList = userInfoService.getValidUser(); UserInfo ui = new UserInfo(); ui.setId(0); ui.setUserName("请选择..."); uiList.add(0,ui); return uiList; }5.3.3查看订单明细
1.前端页面
（1）效果图
图5.13 查看订单明细页面（2）前面页面主要技术介绍及主要功能
流程：选择订单＝＞单击“查看明细＝＞调用函数editOrder()＝＞提交申请orderinfo/getOrderInfo?oid=’ + row.id＝＞控制器(调用：业务逻辑接口＝＞业务逻辑接口实现类＝＞订单信息dao）＝＞返回orderdetail.jsp=>发出orderinfo/getOrderDetails }请求
（3）主要代码
- searchorder.jsp
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editOrder();">查看明细a>// 查看明细 function editOrder() { var rows = $("#orderDg").datagrid('getSelections'); if (rows.length > 0) { var row = $("#orderDg").datagrid("getSelected"); if ($('#tabs').tabs('exists', '订单明细')) { $('#tabs').tabs('close', '订单明细'); } $('#tabs').tabs('add', { title : "订单明细", href : 'orderinfo/getOrderInfo?oid=' + row.id, closable : true }); }else { $.messager.alert('提示', '请选择要修改的订单', 'info'); } }
- orderdetail.jsp
<body> <table id="editodbox">table> <div id="editordertb" style="padding: 2px 5px;"> <div id="editdivOrderInfo"> <div style="padding: 3px"> 客户名称 <input style="width: 115px;" id="edit_uid" class="easyui-textbox" name="edit_uid" readonly="readonly" value="${requestScope.oi.ui.userName }"> 订单金额 <input type="text" name="edit_orderprice" id="edit_orderprice" value="${requestScope.oi.orderprice }" class="easyui-textbox" readonly="readonly" style="width: 115px" /> div> <div style="padding: 3px"> 订单日期 <input type="text" name="edit_ordertime" readonly="readonly" id="edit_ordertime" value="${requestScope.oi.ordertime }" class="easyui-datebox" style="width: 115px" /> 订单状态 <input id="edit_status" class="easyui-textbox" name="edit_status" style="width: 115px;" readonly="readonly" value="${requestScope.oi.status }"> div> div> div> <script type="text/javascript"> var $editodbox = $('#editodbox'); $(function() { $editodbox.datagrid({ url : 'orderinfo/getOrderDetails?oid=${requestScope.oi.id }', rownumbers : true, singleSelect : false, fit : true, toolbar : '#editordertb', columns : [ [ { field : 'pid', title : '商品名称', width : 300, formatter : function(value, row, index) { if (row.pi) { return row.pi.name; } else { return value; } } }, { field : 'price', title : '单价', width : 80 }, { field : 'num', title : '数量', width : 50 }, { field : 'totalprice', title : '小计', width : 100 } ] ] }); }); script> body>2.数据库Dao接口
（1）主要代码
- OrderInfoDao
//根据订单标号获取订单对象 @Results({ @Result(column = "uid",property = "ui", one = @One(select = "com.hcz.dao.UserInfoDao.getUserInfoById",fetchType = FetchType.EAGER)) }) @Select("select * from order_info where id = #{id}") OrderInfo getOrderInfoById(int id); //获取单编号获取订单明细信息 @Results({ @Result(column = "pid",property = "pi", one = @One(select = "com.hcz.dao.ProductInfoDao.getProductInfoById",fetchType = FetchType.EAGER)) }) @Select("select * from order_detail where oid=#{oid}") List<OrderDetail> getOrderDetailByOid(int oid);
- UserInfoDao
//根据用户id号获取客户对象 @Select("select * from user_info where id = #{id}") public UserInfo getUserInfoById(int id);
- ProductInfoDao
//获取订单编号获取订单明细信息 @Select("select * from product_info where id=#{id}") ProductInfo getProductInfoById(int id);3.业务逻辑接口及其实现类
（1）主要代码
- OrderInfoService
//根据订单编号获取订单信息 OrderInfo getOrderInfoById(int parseInt); //获取单编号获取订单明细信息 List<OrderDetail> getOrderDetailByOid(int parseInt);
- OrderInfoServiceImpl
@Override public OrderInfo getOrderInfoById(int id) { return orderInfoDao.getOrderInfoById(id); } @Override public List<OrderDetail> getOrderDetailByOid(int oid) { return orderInfoDao.getOrderDetailByOid(oid); }4.控制器类
（1）主要技术及主要功能
OrderInfoController：
在getOrderInfo方法中，调用接口的getOrderInfoById方法，获取指定编号的订单对象，再将订单对象oi添加到Model对象中，执行介绍后跳转到订单明细页orderdetail.jsp中。
在getOrderDetail方法中，调用接口的getOrderDetailByOid方法，根据订单编号获取订单明细信息列表。然后对这个列表遍历，将关联的商品编号、价格和小计等信息保存到每一个订单明细对象中，再通过JSON格式发送到前端页面作为数据源。（2）主要代码
- OrderInfoController
//根据订单id号获取要查看的订单对象，再返回订单明细页 @RequestMapping("/getOrderInfo") //@ResponseBody public String getOrderInfo(String oid, Model model){ OrderInfo oi = orderInfoService.getOrderInfoById(Integer.parseInt(oid)); model.addAttribute("oi",oi); return "orderdetail";//返回orderdetail.jsp页面 } //根据订单id号获取订单明细表 @RequestMapping("/getOrderDetails") @ResponseBody public List<OrderDetail> getOrderDetails(String oid){ List<OrderDetail> ods = orderInfoService.getOrderDetailByOid(Integer.parseInt(oid)); for (OrderDetail od : ods){ od.setPrice(od.getPi().getPrice());//商品单价 od.setTotalprice(od.getPi().getPrice() * od.getNum());//小计金额 } return ods; }5.3.4删除订单
1.前端页面
（1）效果图
图5.14 删除订单页面
图5.15 删除成功页面（2）前面页面主要技术介绍及主要功能
在查询页searchorder.jsp中，选中Datagrid控件中的某条记录，再单击工具栏中删除按钮，即可将订单和关联的明细信息删除。当点击删除按钮时，会执行JavaScript函数removeOrder，其会获取Datagrid控件中选中的订单记录，然后用逗号将这个订单编号隔开，保存到变量ids中，再通过POST方式发送orderinfo/deleteOrder请求，将其映射到对应的控制器类的方法上
（3）主要代码
- searchorder.jsp
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" onclick="removeOrder();" plain="true">删除订单a>// 删除订单 function removeOrder() { // 获取选中的订单记录行 var rows = $("#orderDg").datagrid('getSelections'); if (rows.length > 0) { $.messager.confirm('Confirm', '确认要删除么?', function(r) { if (r) { var ids = ""; // 获取选中订单记录的订单id, 保存到ids中 for (var i = 0; i < rows.length; i++) { ids += rows[i].id + ","; } // 发送请求 $.post('orderinfo/deleteOrder', { oids : ids }, function(result) { if (result.success == 'true') { $("#orderDg").datagrid('reload'); $.messager.show({ title : '提示信息', msg : result.message }); } else { $.messager.show({ title : '提示信息', msg : result.message }); } }, 'json'); } }); } else { $.messager.alert('提示', '请选择要删除的行', 'info'); } }2.数据库Dao接口
（1）主要代码
- OrderInfoDao:
//删除订单主表记录 @Delete("delete from order_info where id = #{id}") int deleteOrderInfo(int id); //根据订单编号，删除订单明细记录 @Delete("delete from order_detail where oid = #{id}") int deleteOrderDetail(int id);3.业务逻辑接口及其实现类
（1）主要代码
- OrderInfoService
//删除订单 int deleteOrder(int parseInt);
- OrderInfoServiceImpl
@Override public int deleteOrder(int id) { int result = 1; try { orderInfoDao.deleteOrderDetail(id); orderInfoDao.deleteOrderInfo(id); }catch (Exception e){ result = 0; } return result; }4.控制器类
（1）主要代码
- OrderInfoController
//删除订单 @RequestMapping("/deleteOrder") @ResponseBody public String deleteOrder(String oids){ String str = ""; try { oids = oids.substring(0,oids.length()-1);//这里获取要删除的所有订单号放入数组中 String[] ids = oids.split(",");//对要删除的订单编号进行拆分 for (String id:ids){ orderInfoService.deleteOrder(Integer.parseInt(id)); } str = "{\"success\":\"true\",\"message\":\"删除成功！\"}"; } catch (Exception e) { str = "{\"success\":\"false\",\"message\":\"删除失败！\"}"; } return str; }5.3.5创建订单
1.前端页面
（1）效果图
图5.16 商品名称下拉框效果
图5.17 选择商品之后显示单价和小计
图5.18 创建订单页面（2）前面页面主要技术介绍及主要功能
初始化datagrid时要将商品名称添加到商品名称组合框中，选择商品名称后要更新单价，重新计算小计，修改商品数量后要重新计算计。
添加订单明细通过提交“orderinfo/getOrderDetails”请求获取
客户名称通过提交“userinfo/getValidUser”请求获得(查询订单中已经获取)
商品名称通过提交“productinfo/getOnSaleProduct”请求获得
选择商品后通过提交“productinfo/getPriceById”请求获取商品信息
保存订单通过提交“orderinfo/commitOrder”请求获取（3）主要代码
- createorder.jsp
<body> <table id="odbox">table> <div id="ordertb" style="padding: 2px 5px;"> <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="addOrderDetail();">添加订单明细a><a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="saveorder();">保存订单a><a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="removeOrderDetail();">删除订单明细a> div> <div id="divOrderInfo"> <div style="padding: 3px"> 客户名称 <input style="width: 115px;" id="create_uid" class="easyui-combobox" name="create_uid" value="0" data-options="valueField:'id',textField:'userName',url:'userinfo/getValidUser'"> 订单金额 <input type="text" name="create_orderprice" id="create_orderprice" class="easyui-textbox" readonly="readonly" style="width: 115px" /> div> <div style="padding: 3px"> 订单日期 <input type="text" name="create_ordertime" id="create_ordertime" class="easyui-datebox" style="width: 115px" value="<%=new Date().toLocaleString()%>" /> 订单状态 <select id="create_status" class="easyui-combobox" name="create_status" style="width: 115px;"> <option value="未付款" selected>未付款option> <option value="已付款">已付款option> <option value="待发货">待发货option> <option value="已发货">已发货option> <option value="已完成">已完成option> select> div> div> <script type="text/javascript"> var $odbox = $('#odbox'); $(function() { $odbox.datagrid({ rownumbers : true, singleSelect : false, fit : true, toolbar : '#ordertb', header : '#divOrderInfo', columns : [ [ { title : '序号', field : '', align : 'center', checkbox : true }, { field : 'pid', title : '商品名称', width : 300, editor : { type : 'combobox', options : { valueField : 'id', textField : 'name', url : 'productinfo/getOnSaleProduct', onChange: function (newValue, oldValue) { var rows = $odbox.datagrid('getRows'); var orderprice=0; for (var i = 0; i < rows.length; i++) { var pidEd = $('#odbox').datagrid('getEditor', { index: i, field: 'pid' }); var priceEd = $('#odbox').datagrid('getEditor', { index: i, field: 'price' }); var totalpriceEd = $('#odbox').datagrid('getEditor', { index: i, field: 'totalprice' }); var numEd = $('#odbox').datagrid('getEditor', { index: i, field: 'num' }); if (pidEd != null){ var pid=$(pidEd.target).combobox('getValue'); $.ajax({ type: 'POST', url: 'productinfo/getPriceById', data: {pid : pid}, success: function(result) { $(priceEd.target).numberbox('setValue',result); $(totalpriceEd.target).numberbox('setValue',result * $(numEd.target).numberbox('getValue')); orderprice=Number(orderprice)+Number($(totalpriceEd.target).numberbox('getValue')); }, dataType: 'json', async : false }); } } $("#create_orderprice").textbox("setValue",orderprice); } } } }, { field : 'price', title : '单价', width : 80, editor: { type : "numberbox", options: { editable : false } } } , { field : 'num', title : '数量', width : 50, editor : { type : 'numberbox', options :{ onChange: function (newValue, oldValue) { var rows = $odbox.datagrid('getRows'); var orderprice=0; for (var i = 0; i < rows.length; i++) { var priceEd = $('#odbox').datagrid('getEditor', { index: i, field: 'price' }); var totalpriceEd = $('#odbox').datagrid('getEditor', { index: i, field: 'totalprice' }); var numEd = $('#odbox').datagrid('getEditor', { index: i, field: 'num' }); $(totalpriceEd.target).numberbox('setValue',$(priceEd.target).numberbox('getValue') * $(numEd.target).numberbox('getValue')); orderprice=Number(orderprice)+Number($(totalpriceEd.target).numberbox('getValue')); } $("#create_orderprice").textbox("setValue",orderprice); } } } }, { field : 'totalprice', title : '小计', width : 100, editor: { type : "numberbox", options: { editable : false } } } ] ] }); }); // datagrid中添加记录行 function addOrderDetail() { $odbox.datagrid('appendRow', { num : '1', price : '0', totalprice : '0' }); var rows = $odbox.datagrid('getRows'); // 让添加的行处于可编辑状态 $odbox.datagrid('beginEdit', rows.length - 1); } // datagrid中删除记录行 function removeOrderDetail() { // 获取所选择的行记录 var rows = $odbox.datagrid('getSelections'); if (rows.length > 0) { // 获取“订单金额”文本域的值 var create_orderprice = $("#create_orderprice").textbox("getValue"); // 遍历选中的行记录，以更新订单金额 for (var i = 0; i < rows.length; i++) { var index = $odbox.datagrid('getRowIndex', rows[i]); var totalpriceEd = $('#odbox').datagrid('getEditor', { index: index, field: 'totalprice' }); create_orderprice = create_orderprice - Number($(totalpriceEd.target).numberbox('getValue')); $odbox.datagrid('deleteRow', index); } $("#create_orderprice").textbox("setValue",create_orderprice); } else { $.messager.alert('提示', '请选择要删除的行', 'info'); } } // 保存订单 function saveorder() { // 获取订单客户 var uid = $("#create_uid").combobox("getValue"); if(uid==0){ $.messager.alert('提示', '请选择客户名称', 'info'); } else { // 取消datagrid控件的行编辑状态 create_endEdit(); // 定义orderinfo存放订单主表数据 var orderinfo = []; // 获取订单时间 var ordertime = $("#create_ordertime").datebox("getValue"); // 获取订单状态 var status = $("#create_status").combobox("getValue"); // 获取订单金额 var orderprice = $("#create_orderprice").textbox("getValue"); orderinfo.push({ ordertime : ordertime, uid : uid, status : status, orderprice : orderprice }); // 获取订单明细（即datagrid控件中的记录） if ($odbox.datagrid('getChanges').length) { // 获取datagrid控件中插入的记录行 var inserted = $odbox.datagrid('getChanges', "inserted"); // 获取datagrid控件中删除的记录行 var deleted = $odbox.datagrid('getChanges', "deleted"); // 获取datagrid控件中更新的记录行 var updated = $odbox.datagrid('getChanges', "updated"); // 定义effectRow,保存inserted和orderinfo var effectRow = new Object(); if (inserted.length) { effectRow["inserted"] = JSON.stringify(inserted); } effectRow["orderinfo"] = JSON.stringify(orderinfo); // 提交请求 $.post( "orderinfo/commitOrder", effectRow, function(data) { if (data == 'success') { $.messager.alert("提示", "创建成功！"); $odbox.datagrid('acceptChanges'); if ($('#tabs').tabs('exists', '创建订单')) { $('#tabs').tabs('close', '创建订单'); } $("#orderDg").datagrid('reload'); } else { $.messager.alert("提示", "创建失败！"); } }); } } } // 取消datagrid控件的行编辑状态 function create_endEdit() { var rows = $odbox.datagrid('getRows'); for (var i = 0; i < rows.length; i++) { $odbox.datagrid('endEdit', i); } } script> body>2.数据库Dao接口
（1）主要代码
- ProductInfoDao
// 获取在售商品列表 @Select("select * from product_info where status=1") List<ProductInfo> getOnSaleProduct(); //获取订单编号获取订单明细信息 @Select("select * from product_info where id=#{id}") ProductInfo getProductInfoById(int id);
- OrderInfoDao：
//保存订单主表 @Insert("insert into order_info(uid,status,ordertime,orderprice) " + "values(#{uid},#{status},#{ordertime},#{orderprice})") @Options(useGeneratedKeys = true, keyProperty = "id") int saveOrderInfo(OrderInfo oi); //保存订单明细 @Insert("insert into order_detail(oid,pid,num) values(#{oid},#{pid},#{num})") @Options(useGeneratedKeys = true, keyProperty = "id") int saveOrderDetail(OrderDetail od);3.业务逻辑接口及其实现类
（1）主要代码
- ProductInfoService
// 获取在售商品列表 List<ProductInfo> getOnSaleProduct(); //根据商品id获取商品对象 ProductInfo getProductInfoById(int parseInt);
- ProductInfoServiceImpl
// 获取在售商品列表 @Override public List<ProductInfo> getOnSaleProduct() { return productInfoDao.getOnSaleProduct(); } //根据产品id获取产品对象 @Override public ProductInfo getProductInfoById(int id) { return productInfoDao.getProductInfoById(id); }
- OrderInfoService
// 添加订单主表 int addOrderInfo(OrderInfo oi); // 添加订单明细 int addOrderDetail(OrderDetail od);
- OrderInfoServiceImpl
@Override public int addOrderInfo(OrderInfo oi) { return orderInfoDao.saveOrderInfo(oi); } @Override public int addOrderDetail(OrderDetail od) { return orderInfoDao.saveOrderDetail(od); }4.控制器类
（1）主要技术及主要功能
- 在客户名称组合框中能看到客户名, 在客户名称中选择客户名后单击添加订单明细按钮,此时商品名称组合框中显示了可供选择的商品名称；选择商品名称后显示单价和小计。
- 在getOnSaleProduct方法中调用接口方法获取在售商品列表，并通过JSON格式发送到前端页面。此外，在商品名称组合框控件中，还添加了onChange事件，实现根据所选的商品，显示商品价格列数据，并更新小计列数据和订单金额文本域值，根据商品id获取商品单价是通过AJAX向后台服务器发送请求获取的，请求地址为productinfo/getPriceById。
- 在commitOrder方法中，首先创建ObjectMapper对象，用于实现JavaBean和JSON对象的转换，并设置输入时忽略在JSON字符串中存在但Java对象中没有的属性。然后将JSON字符串orderinfo转换为OrderInfo对象oi(对应订单信息)，并调用接口方法将信息保存到数据表order_info中。
- 将JSON字符串inserted转换为List< OrderDetail>集合对象odList(对应订单信息)，并对集合odList遍历。每次遍历时，先将当前订单明细对象设置关联的订单id号，再调用接口方法将明细信息保存到数据表order_detail中。
（2）主要代码
- ProductInfoController
//获取在售商品列表：用于创建订单中订单明细 @RequestMapping("/getOnSaleProduct") @ResponseBody public List<ProductInfo> getOnSaleProduct(){ List<ProductInfo> piList = productInfoService.getOnSaleProduct(); return piList; } // 根据商品id获取商品对象 @RequestMapping("/getPriceById") @ResponseBody public String getPriceById(@RequestParam(value = "pid") String pid){ if (pid != null && !"".equals(pid)){ //根据商品id返回该商品 ProductInfo pi = productInfoService.getProductInfoById(Integer.parseInt(pid)); return pi.getPrice()+"";//返回该商品价格到前端页面 }else{ return ""; } }
- OrderInfoController
//保存添加的订单明细 @RequestMapping(value = "/commitOrder") @ResponseBody public String commitOrder(String inserted,String orderinfo) throws IOException { try { //创建ObjectMapper对象，实现JavaBean和JSON的转换 ObjectMapper mapper = new ObjectMapper();//这步需要导包 //设置输入时忽略在JSON字符串中存在但Java对象实际没有的属性 mapper.disable(DeserializationFeature.FAIL_ON_UNKNOWN_PROPERTIES); mapper.configure(SerializationFeature.FAIL_ON_EMPTY_BEANS, false); // 将json字符串orderinfo转换成JavaBean对象（订单信息） OrderInfo oi = mapper.readValue(orderinfo, OrderInfo[].class)[0]; // 保存订单信息 orderInfoService.addOrderInfo(oi); // 将json字符串转换成List集合（订单明细信息） List<OrderDetail> odList = mapper.readValue(inserted, new TypeReference<ArrayList<OrderDetail>>() { }); //给订单明细对象的其它属性赋值 for (OrderDetail od : odList){ od.setOid(oi.getId()); //保存订单明细 orderInfoService.addOrderDetail(od); } return "success"; }catch (Exception e){ return "failure"; } }
