概述

在一些场景里，某个大表单里常常嵌套着一个或若干个小逻辑块，比如以下表单里“设计预审”中包括了一个子模块表单“拟定款项”。

在这种情况下该怎么去设计实体类以及表单呢？

实体类的设计

在设计实体类时最好的方式是“主模块包括了自己的字段，而子模块只通过一个属性被引用过来”，如下（以下字段都省略了 getter 和 setter 方法）。

主模块：

public class DesignApplyForAuditUpdate extends BaseEntity {

    private String taskId;

    private String taskComment;

    private ProjectPaymentItem projectPaymentItem;

}

子模块：

public class ProjectPaymentItem extends BaseEntity {

    // 定金

    private BigDecimal earnestPromotionAmount;

    private BigDecimal earnestPromotionPercentage;

    // 首付工程款

    private BigDecimal paymentPercentageFirstPay;

    // 水电工程项

    private BigDecimal paymentPercentageShuiDian;

}

表单的设计

在子模块元素，可以考虑使用“.”(点)操作符。大概看看主表单和子表单的模样。

主表单：

<td colspan="3">

    <input class="easyui-textbox" type="text" name="taskComment" id="txtTaskComment_Edit"

           data-options=" multiline:true, validType:'length[1,2000]', novalidate:'novalidate', width:435, height:58 "/>

</td>

子表单（内嵌于主表单之中）：

<td colspan="3">

    <span>已交纳</span>

    <input type="text" class="easyui-numberbox" name="projectPaymentItem.earnestPromotionAmount"

           id="txtEarnestPromotionAmount_Edit"

           missingmessage="请确保是有效的数字"

           min="0" max="99000000" precision="2"

           data-options="width:150, required:true, novalidate:'novalidate' "/>

    <span>元，优惠百分比：</span>

    <input type="text" class="easyui-numberbox" name="projectPaymentItem.earnestPromotionPercentage"

           id="txtEarnestPromotionPercentage_Edit"

           missingmessage="请确保是有效的数字"

           min="100" max="10000" precision="0"

           data-options="width:150, required:true, novalidate:'novalidate' "/>

    <span>%</span>

    <div>

        <span>可抵消金额：</span>

        <span id="earnestPromotionResult">5000</span>

        <span>元</span>

    </div>

</td>

可以看到，子模块的 name 属性值前面需要通过点间隔符来补充一个前缀：“projectPaymentItem”

经过 Ajax 提交后，服务端会以主子结构完好的承接客户端的数据。

客户端的 Ajax 和 SpringMVC 控制器

对于表单数据的提交只需采用普通的 Ajax 配置来提交就可以，即使实体模型是嵌套层次。

• 客户收集数据以及 Ajax

// 表单值获取

var formData = $taskForm.form('r_serialize', false);

// 发起请求操作

$.ajax({

    data: formData,

    url: url,

    type: "POST",

    dataType: "json",

    success: function (result) {

        console.info("保存成功，返回的数据为：↓");

        console.info(result);

        if (result.success) {

            $.messager.show({

                title: '提示', // 头部面板上显示的标题文本。

                msg: result.message

            });

        }

    },

    error: function (result) {

    }

}); //end ajax

尽管要提交的数据存在嵌套，但这还不属性复杂模型，所以 Ajax 只需按普通数据来提交即可。

看一下提交的数据：

• SpringMVC 控制器接收数据

// 暂存

@RequestMapping(value = "/UpdateDesignApplyForAudit", method = RequestMethod.POST)

@ResponseBody

public TransactionResult UpdateDesignApplyForAudit(DesignApplyForAuditUpdate designApplyForAuditUpdate, @CookieValue(value = "base_cookieKey", required = false) CookieObject cookieObject) {

    designApplyForAuditUpdate.setCookieObject(cookieObject);

    TransactionResult result = null;

}

designApplyForAuditUpdate 的值如下：

最后提一下客户端针对子表单的赋值，尽管上述的取值很方便，但赋值仍需逐个进行：

// 拟定款项

projectPaymentItemPartialView.initialForm(result.data.projectPaymentItem);

initialForm: function (data) {

    // 定金

    $txtEarnestPromotionAmount_Edit.numberbox('setValue', data.earnestPromotionAmount);

    $txtEarnestPromotionPercentage_Edit.numberbox('setValue', data.earnestPromotionPercentage);

    // 工程款

    $txtPaymentPercentageFirstPay_Edit.numberbox('setValue', data.paymentPercentageFirstPay);

    $txtPaymentPercentageShuiDian_Edit.numberbox('setValue', data.paymentPercentageShuiDian);

    $txtPaymentPercentageWaGong_Edit.numberbox('setValue', data.paymentPercentageWaGong);

    $txtPaymentPercentageMuGong_Edit.numberbox('setValue', data.paymentPercentageMuGong);

    $txtPaymentPercentageYouQi_Edit.numberbox('setValue', data.paymentPercentageYouQi);

    $txtPaymentPercentageFinalPay_Edit.numberbox('setValue', data.paymentPercentageFinalPay);

    // 额外款项

    $txtExtraAmount_Edit.numberbox('setValue', data.extraAmount);

}