DaleCloud（原NFine）介绍：使用easyui实现主从表提交（单据业务）

目录

1、Form页面的Html代码

2、前端JS实现将DataGrid中的明细数据打包提交

3、后台接收提交数据的代码

4、Application业务中的保存方法

---

前言

很多使用DaleCloud（原NFine）框架的同学一直在问，如何实现一对多的主从表业务数据提交。起始这是大部分做业务系统人的常见问题。比如我们的采购订单，入库单，出库单，等常见业务单据都存在主表+明细表的业务逻辑。

那么如何实现一个页面完成主表和明细表的增删改查呢？

给大家举个例子：

前端样式

使用这套框架的都知道Form页面的表单如何提交，其实就是在Form页增加一个easyUI的datagrid组件，然后通过datagrid的editor功能实现明细数据的增删改功能。然后再提交的时候把datagrid里的数据打包和Form表单一起提交到后台，后台取出数据转换成明细表的实体数组即可。

 

1、Form页面的Html代码

form页面使用easyUI的easyui-layout 将页面分为上下两部分。上部分north为主表Form表单。下部分center为明细表的Datagrid；

关于Datagrid的创建以及实现列可编辑的方法见http://www.jeasyui.net/plugins/183.html

<div class="easyui-layout" data-options="fit:true">
    <div data-options="region:'north',collapsible:false" style="height:35%;padding-top:5px;">
        <form id="form1" method="post">
            <table class="form">
                <tr>
                    <th class="formTitle">项目名称</th>
                    <td class="formValue" colspan="3">
                        <input id="T_ProjectName" name="T_ProjectName" type="text" class="easyui-textbox " data-options="required:true,prompt:'必填，无项目请填客户名称或用途'" style="width:100%" />
                    </td>
                </tr>
                <tr>
                    <th class="formTitle">项目编号</th>
                    <td class="formValue">
                        <input id="T_ProjectNo" name="T_ProjectNo" type="text" class="easyui-textbox " data-options="required:true,prompt:'必填，无项目请填当前日期，如：20190101'" style="width:100%" />
                    </td>
                    <th class="formTitle">单据类别</th>
                    <td class="formValue">
                        <select id="T_Level" name="T_Level" class="easyui-combobox" style="width:100%">
                            <option value="常规件" selected>常规件</option>
                            <option value="急件">急件</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <th class="formTitle">项目审批人</th>
                    <td class="formValue">
                        <input id="T_ApproverId" name="T_ApproverId" type="text" class="easyui-textbox " data-options="required:true,prompt:'如项目组长，部门领导，总经理等'" style="width:100%" />
                    </td>
                    <th class="formTitle">采购确认人</th>
                    <td class="formValue">
                        <input id="T_ReceiverId" name="T_ReceiverId" type="text" class="easyui-textbox " data-options="prompt:'默认请选择刘召英'" style="width:100%" />
                    </td>
                </tr>
                <tr>
                    <th class="formTitle" valign="top" style="padding-top: 5px;">
                        备注说明
                    </th>
                    <td class="formValue" cols