easyui订单form提交
来源：互联网 发布：灵魂之泪java 编辑：程序博客网 时间：2024/04/29 06:02
商品订单、采购订单、销售订单、库存订单、物流订单等等都有一个共同的特点，就是一个单据包含订单头和订单明细信息，订单头里面包含订单日期、地址、人等，而订单明细则包含了多条商品数据。
我的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; } 0 0
- easyui订单form提交
- easyui form 提交
- Easyui Form表单提交
- easyUI form 提交学习
- EasyUI Form表单提交
- easyui form提交 combobox多选值
- easyui之form表单提交
- easyui form表单提交问题
- EASYUI FORM表单提交post
- easyui-form表单提交combobox
- jQuery easyui form不能提交
- easyUI 通过ajax的方式提交Form
- easyui form 表单提交两种方式
- easyUI的form表单重复提交处理
- easyui form表单提交中文乱码
- jQuery EasyUI之Form表单提交
- form表单提交方式，js/jquey/easyui
- easyui的tab加载页面中的form重复提交
- Q47：不用加减乘除做加法
- 【数论】POJ_2635_The Embarrassed Cryptographer
- 设计模式：建造者模式（Builder）
- POJ 2115 C Looooops(exgcd—解一元线性同余方程)
- CentOS 系统启动流程
- easyui订单form提交
- pip是什么？
- 第五次编程作业
- 数据结构：杂
- 剑指Offer：删除链表中重复的结点
- sudo apt-get build-dep qemu报错
- 2016-08-19-java-关于线程的死锁的案例分析：生产者消费者问题
- 【NOIP2016提高A组模拟8.19】公约数
- 第四章 4.9 sizeof运算符
