第1.2章 easyui订单form提交

最新推荐文章于 2021-08-05 18:12:06 发布

warrah

最新推荐文章于 2021-08-05 18:12:06 发布

阅读量2.3k

点赞数

分类专栏：岁月会计云——前端开发文章标签： easyui gson json

本文链接：https://blog.csdn.net/warrah/article/details/52254480

版权

岁月会计云——前端开发专栏收录该内容

73 篇文章 0 订阅

订阅专栏

商品订单、采购订单、销售订单、库存订单、物流订单等等都有一个共同的特点，就是一个单据包含订单头和订单明细信息，订单头里面包含订单日期、地址、人等，而订单明细则包含了多条商品数据。
我的easyui代码是基于jquery-extensions，首先感谢枫桥流云给我们带来的贡献。
1. 示例效果
这个例子就是类似订单的例子，上部分是方案头部信息，下部分是方案明细信息。

2. hioShareProfitForm.jsp
下面的代码中是form的jsp页面内容，里面用到了shiro权限框架shiro:hasPermission标签，在这里不做展开。
这里使用easyui-tabs，而不是直接使用datagrid的标题栏，是因为我使用我自己开发的代码生成框架，以后如果扩展一个订单有多重类型的明细就方便了，所以不要觉得奇怪。
hioShareProfitItemForm是方案明细的table。

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title></title>
<%@ include file="/WEB-INF/views/include/meta.jsp"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<%@ include file="/WEB-INF/views/include/easyui.jsp"%>
</head>
<body >
	<div class="easyui-layout" style="width:730px; height:520px;">
	<div data-options="region:'north',border:false" style="height:200px;">
	<form id="mainform" action="${ctx}/hioShareProfit/${action}"
		method="post" enctype="multipart/form-data">
		<table class="formTable" width="100%" border="0" cellspacing="0"
			cellpadding="5">
			<tr>
				<td><input type="hidden" name="id" value="${hioShareProfit.id}" />
				<input type="hidden" id="shareItemDatas" name="shareItemDatas" value="${shareItemDatas}" />
				<input type="hidden" id="action" value="${action}" 
				</td>
			</tr>
			<tr>
				<td width="15%" style="text-align: right">方案名称：</td>
				<td width="35%"><input id="name" name="name" style="width: 90%"
					class=" easyui-textbox "
					data-options="required:true ,validType:'length[1,30]'"
					value="${hioShareProfit.name}"></td>
				<td width="15%" style="text-align: right">方案类型：</td>
				<td width="35%"><input id="orderType" name="orderType"
					style="width: 90%" 
					data-options="required:true "
					value="${hioShareProfit.orderType}"></td>
			</tr>
			<tr>
				<td width="15%" style="text-align: right">生效日期：</td>
				<td width="35%"><input id="effectiveDate" name="effectiveDate"
					style="width: 90%" class="easyui-datebox" data-options=""
					value="${hioShareProfit.effectiveDate}"></td>
				<td width="15%" style="text-align: right">失效日期：</td>
				<td width="35%"><input id="expiryDate" name="expiryDate"
					style="width: 90%" class="easyui-datebox" data-options=""
					value="${hioShareProfit.expiryDate}"></td>
			</tr>
			<tr>
				<td width="15%" style="text-align: right">方案描述：</td>
				<td width="85%" colspan="3"><textarea id="description" name="description"
						style="width: 90%; height: 100px;">${hioShareProfit.description}</textarea>
				</td>
			</tr>
		</table>
	</form>
	</div>
	<div data-options="region:'center',border:false">
		<div class="easyui-tabs" data-options="fit:true,border:false,plain:true">
			<div title="方案明细" style="padding:5px;">
				<div id="hioShareProfitItemForm_tb" style="padding:5px;height:auto">
					<table cellpadding="0" cellspacing="0">
					<shiro:hasPermission name="hioShareProfit:add">
						<td>
						<a href="javascript:void(0)" class="easyui-linkbutton addItem" iconCls="icon-add" plain="true">新增</a>
						</td>
						<td>
			 			<span class="toolbar-item dialog-tool-separator"></span>
			 			</td>
			 		</shiro:hasPermission>
			 		<shiro:hasPermission name="hioShareProfit:remove">
						<td>
						<a href="javascript:void(0)" class="easyui-linkbutton removeItem" iconCls="icon-remove" plain="true">删除</a>
						</td>
						<td>
			 			<span class="toolbar-item dialog-tool-separator"></span>
			 			</td>
			 		</shiro:hasPermission>
			 		</table>
				</div>
				<table id="hioShareProfitItemForm" ></table>
			</div>
 		</div>
 	</div>
 	<
	<script src="${ctxResources}/pages/modules/base/hioShareProfitForm.js"></script>
</body>
</html>

3. hioShareProfitForm.js
DataDictionary是我封装的获取基础数据字典的对象，这里不做展开。
这里主要看onClickCell、endEditing控制方案明细的编辑，而addItem、removeItem是对方案明细的新增和删除。
有一个问题需要解决的是编辑的时候，如果将赋予到表格里面去呢，那么loadHioShareProfiltItems就是做个事情的。

/**
 * Copyright (C), dzmsoft Co., Ltd
 */
/**
 * 变量区
 */
var hioShareProfiltItemGrid; // 列表
var shareProfitItemArray = new DataDictionary(DICTIONARY_FIELD.SHARE_PROFIT_ITEM);
var sharePartyArray = new DataDictionary(DICTIONARY_FIELD.SHARE_PARTY);
var editIndex=undefined;
/**
 * 初始加载
 */
$(function(){
	initActions();
	initHioShareProfiltItemGrid();
	loadHioShareProfiltItems();
	getSchemeTypes();
});
function getSchemeTypes(){
	var schemeTypesArray = new DataDictionary(DICTIONARY_FIELD.SOLUTION_TYPE);
	schemeTypesArray.getFields();
	schemeTypesArray.initCombobox($('#orderType'));
}
/**
 * 初始化绑定事件
 */
function initActions(){
	$('.addItem').linkbutton({'onClick':function(){addItem();}});
	$('.removeItem').linkbutton({'onClick':function(){removeItem();}});
	shareProfitItemArray.getFields();
	sharePartyArray.getFields();
}
/**
 * 初始化方案明细
 */
function initHioShareProfiltItemGrid(){
	hioShareProfiltItemGrid=$('#hioShareProfitItemForm').datagrid({    
		idField : 'id',singleSelect:true,
	    fit:true, fitColumns : true,border : false,striped:true,
		pagination:true,rownumbers:true,pageNumber:1,pageSize : 20,pageList : [ 20, 30, 50 ],
	    columns:[[    
			{field:'id',title:'ID',hidden:true}
			,{field:'shareItem',title:'计费项',sortable:false,width:100,align:'left',halign:'center',formatter:fmtShareProfitItem,editor:{type:'combobox',options:{required:true,valueField:'valueField',textField:'textField',data:shareProfitItemArray.getDatas()}} }
			,{field:'shareParty',title:'计费方',sortable:false,width:100,align:'left',halign:'center',formatter:fmtShareParty,editor:{type:'combobox',options:{required:true,valueField:'valueField',textField:'textField',data:sharePartyArray.getDatas()}} }
			,{field:'percent',title:'比例(%)',sortable:false,width:100,align:'left',halign:'center',editor:{type:'numberbox',options:{required:true,precision:1}} }
			,{field:'description',title:'分润描述',sortable:false,width:100,align:'left',halign:'center',editor:'textbox' }
	    ]],
	    toolbar:'#hioShareProfitItemForm_tb',
	    enableHeaderClickMenu: false,
	    enableHeaderContextMenu: false,
	    autoEditing:true,
	    extEditing:true,
	    onClickCell:onClickCell
		});
}
function loadHioShareProfiltItems(){
	var action = $('#action').val();
	if (action == 'edit'){
		var shareItemDatas = $('#shareItemDatas').val();
		if (!$.string.isNullOrEmpty(shareItemDatas)){
			var shareItemDatasJson = $.parseJSON(shareItemDatas);
			hioShareProfiltItemGrid.datagrid('loadData',shareItemDatasJson);
		}
	}
}
function fmtShareParty(val){
	return sharePartyArray.showDisplay(val);
}
function fmtShareProfitItem(val){
	return shareProfitItemArray.showDisplay(val);
}
/**
 * 选择单元格
 * @param index
 * @param field
 */
function onClickCell(index, field){
    if (editIndex != index){
        if (endEditing()){
        	hioShareProfiltItemGrid.datagrid('selectRow', index)
                    .datagrid('beginEdit', index);
            var ed = hioShareProfiltItemGrid.datagrid('getEditor', {index:index,field:field});
            if (ed){
                ($(ed.target).data('textbox') ? $(ed.target).textbox('textbox') : $(ed.target)).focus();
            }
            editIndex = index;
        } else {
            setTimeout(function(){
            	hioShareProfiltItemGrid.datagrid('selectRow', editIndex);
            },0);
        }
    }
}
/**
 * 结束编辑
 * @returns {Boolean}
 */
function endEditing(){
	if (editIndex == undefined){return true}
    if (hioShareProfiltItemGrid.datagrid('validateRow', editIndex)){
    	hioShareProfiltItemGrid.datagrid('endEdit', editIndex);
        editIndex = undefined;
        return true;
    } else {
        return false;
    }
}
/**
 * 新增
 */
function addItem(){
	if (endEditing()){
		hioShareProfiltItemGrid.datagrid('appendRow',{id:Math.guid()});
        editIndex = hioShareProfiltItemGrid.datagrid('getRows').length-1;
        hioShareProfiltItemGrid.datagrid('selectRow', editIndex)
                .datagrid('beginEdit', editIndex);
	}
	
}
/**
 * 删除
 */
function removeItem(){
	if (editIndex == undefined){return}
	hioShareProfiltItemGrid.datagrid('cancelEdit', editIndex)
    	.datagrid('deleteRow', editIndex);
	editIndex = undefined;
	}

4. hioShareProfitList.js
表单提交在list页面，因为管理系统一般设计是现有列表页面，然后才打开form页面。这里只复制出表单提交的代码
因为form明细数据有多条，所以将订单头、订单明细作为一个整体的form提交需要做处理，下方代码将表格中数据存放到form条件的隐藏域中，然后随着form的提交而提交。

var itemDatasJson = JSON.stringify(itemDatas.rows)
$('#shareItemDatas').val(itemDatasJson);

function submit(){
	$('#mainform').form('submit',{
		onSubmit:function(){
			var isValid = $(this).form('enableValidation').form('validate');
			var itemDatas = $('#hioShareProfitItemForm').datagrid('getData');
			if (isValid){
				$.messager.progress();
//				debugger;
				var itemDatasJson = JSON.stringify(itemDatas.rows)
				$('#shareItemDatas').val(itemDatasJson);
			}
			return isValid;	// 返回false终止表单提交
		},
		success:function(result){
			$.messager.progress('close');
			//
			var data = $.parseJSON(result);
			if (data.success){
				$.messager.alert('系统提示',data.msg,'info',function(){
					dForm.panel('close');
					find();
				});
			} else{
				$.messager.alert('系统提示',data.msg,'error');
			}
		}
	});
}

5.HioShareProfitController.java
下方的代码是新增的时候form提交，shareItemDatas就是方案明细传递的数据，
因为form表单是通过name标识的，所以spring可以转成hioShareProfit对象，而方案明细数据我们要单据处理，所以这里的入参就是用shareItemDatas来接收了。
StringUtil.unescapeHtml这段其实是对org.apache.commons.lang3.StringEscapeUtils做了简单的封装，因为json格式字符串在页面上的格式，传到controller会被转义，所以这里需要再转回来。
至于使用gson将字符串转成list对象，就很普通的写法了，其余比较简单，不做赘述。

@RequiresPermissions("hioShareProfit:add")
	@RequestMapping(value = "add", method = RequestMethod.POST)
	@ResponseBody
	public BaseResponse add(HioShareProfit hioShareProfit, String shareItemDatas){
	    Gson gson = new Gson();
	    shareItemDatas = StringUtil.unescapeHtml(shareItemDatas);
	    List<HioShareProfitItem> shioShareProfitItems =  gson.fromJson(shareItemDatas, new TypeToken<List<HioShareProfitItem>>(){}.getType());
		int flag = hioShareProfitService.insertHioShareProfit(hioShareProfit, shioShareProfitItems);
		BaseResponse baseResponse = flag>0?new BaseResponse(true,"新增成功"):new BaseResponse(false, "新增失败");
		return baseResponse;
	}