serializeObject 的應用

    function sendForm() {
        var invOrderModelWrapper = {};
//          頭
        var objHeader = $('#invOrderForm').serializeObject();
        invOrderModelWrapper.invOrderModel = objHeader;
//      明細
        var objDetail = {
            id: "",
            invId: "",
            skuId: "",        // sku
            skuCode: "",
            factoryId: "",
            price: "",        //
            stockNum: "", //庫存數量
            stockAmount: "", // 總成本
            lossNum: "",//報損量
            lossAmount: "", //報
            invNum: "", //盤點量
            invAmount: "", //盤點
            invLossNum: "", //盤點報
            invLossAmount: "", //
            remarks: ""     //備注
        }
        var objArrDetail = constructObjectFromTable(objDetail, $('#invOrderDetailForm .table-row-cell'));

        if (objArrDetail.length == 0) {
            $.alert({
                title: '提示',
                content: "盤點明細不能為空！",
                buttons: {"好的": {btnClass: 'btn-blue'}}
            });
            return false;
        }

        invOrderModelWrapper.invOrderDetailModels = objArrDetail;

        $.ajax({
            type: "POST",
            dataType: "json",
            cache: false,
            contentType: "application/json; charset=utf-8",
            url: "/storage/invOrder/saveInvOrderModel",
            data: JSON.stringify(invOrderModelWrapper),
            success: function (data) {
                if (data.code) {
                    $.alert({
                        title: '提示',
                        content: "操作成功！",
                        buttons: {
                            "好的": {
                                btnClass: 'btn-blue',
                                action: function () {
                                    var invIdTemp = $('#invId').val();
                                    var invTypeTemp = $('#invType').val();
                                    window.location.href = "/storage/invOrder/viewInvOrder?id=" + invIdTemp + "&invType=" + invTypeTemp + "&viewTypeTo=view&modelType=guanli";
                                }
                            }
                        }
                    });


                    return;
                } else {
                    $.alert({
                        title: '提示',
                        content: "操作失敗！",
                        buttons: {"好的": {btnClass: 'btn-blue'}}
                    });

                }
            }

        })

    }
function save() {

    sendForm("");
<section class="content">

 

 <div class="row box box-primary" id="viewDiv">
        <div class="col-md-16">
            <div class="box-body">
                <input type="hidden" id="info" value="${info!}">
                <form id="invOrderForm" class="form-horizontal"
                      data-validator-option="{theme:'bootstrap', timely:2, stopOnError:true}" method="post">
                    <div class="form-inline">
                        <input type="hidden" id="invId" name="id" value="${invOrderModel.id}"/>
                        <input type="hidden" id="invType" name="invType"
                               value="${invOrderModel.invType}"
                               placeholder="標記是基礎盤點還是庫存盤點"/>
                        <input type="hidden" id="creator" name="creator" value="${invOrderModel.creator}"
                               placeholder="登陸人">
                        <input type="hidden" id="auditState" name="auditState" value="${invOrderModel.auditState}"
                               placeholder="審核狀態 0:待提交 1:待審核 2:已審核 3：已駁回">

                        <label for="invCode">盤點單編碼:</label>
                        <input type="text" id="invCode" name="invCode" class="form-control"
                               value="${(invOrderModel.invCode)!}" readonly="true">

                        <label for="storageName">盤點倉庫:</label>
                        <input type="hidden" id="storageId" name="storageId" class="form-control"
                               value="${(invOrderModel.storageId)!}" readonly="true">
                        <input type="text" id="storageName" name="storageName" class="form-control"
                               value="${(invOrderModel.storageName)!}" readonly="true">
                        <!--添加SKU-->
                        <a class="btn btn-primary pull-right" href="javascript:addSKU();"><i
                                class="fa fa-plus"></i> 添加SKU
                        </a>
                    </div>
                </form>
                <div class="form-group">
                    <div class="box-body table-responsive no-padding col-sm-16">
                        <form id="invOrderDetailForm" class="form-horizontal"
                              data-validator-option="{theme:'bootstrap', timely:2, stopOnError:true}" method="post">
                            <table class="table table-hover tdnowrap">
                                <thead>
                                <tr>
                                    <th>系列</th>
                                    <th>產品型號</th>
                                    <th>尺寸</th>
                                    <th>材質</th>
                                    <th>顏色</th>
                                    <th>結構</th>
                                    <th>配套件1</th>
                                    <th>配套件2</th>

                                    <th>sku碼</th>
                                    <th>生產部</th>
                                    <th>單價</th>
                                    <th>庫存量</th>
                                    <th>總成本(元)</th>
                                    <th>報損量</th>
                                    <th>總報損(元)</th>
                                    <th>盤點量</th>
                                    <th>盤點額(元)</th>
                                    <th>盤點報損量</th>
                                    <th>盤點報損額(元)</th>
                                    <th>備注</th>
                                    <th>刪除</th>
                                </tr>
                                </thead>
                                <tbody>
                                <#list invOrderDetailForm as detail>
                                    <tr id="tr_${(detail.skuId)!}" class="table-row-cell">
//　　　　　　　　　　　　　　　　　　　　　　<td><input id="gvDataList_CheckAll" type="checkbox" name="gvData"/></td>　　　
                                        <td>${detail.seriesName}</td>
                                        <td>${detail.productModel}</td>
                                        <td>${detail.size}</td>
                                        <td>${detail.material}</td>
                                        <td>${detail.color}</td>
                                        <td>${detail.structure}</td>
                                        <td>${detail.suite1}</td>
                                        <td>${detail.suite2}</td>
                                        <td>
                                            <input type="hidden" name="id" value="${(detail.id)!}"/>
                                            <input type="hidden" id="skuId" name="skuId" value="${(detail.skuId)!}"/>
                                            <input type="hidden" name="invId"
                                                   value="${invOrderModel.id}"/>
                                            <input type="text" id="skuCode" name="skuCode" readonly
                                                   value="${(detail.skuCode)!}"/>

                                        </td>
                                        <td>
                                            <input type="hidden" id="factoryId" name="factoryId"
                                                   value="${(detail.factoryId)!}"/>
                                            <input type="text" id="factoryName" name="factoryName" readonly
                                                   value="${(detail.factoryName)!}"/>
                                        </td>
                                        <td>
                                            <input type="text" id="price_${(detail.skuId)}" name="price" readonly
                                                   value="${(detail.price)!}"/>

                                        </td>
                                        <td>
                                            <input type="text" id="stockNum" name="stockNum" readonly
                                                   value="${(detail.stockNum)!}" placeholder="庫存量"/>
                                        </td>
                                        <td>
                                            <input type="text" id="stockAmount" name="stockAmount" readonly
                                                   value="${(detail.stockAmount)!}" placeholder="總成本(元)"/>
                                        </td>
                                        <td>
                                            <input type="text" id="lossNum" name="lossNum" readonly
                                                   value="${(detail.lossNum)!}" placeholder="報損量"/>
                                        </td>
                                        <td>
                                            <input type="text" id="lossAmount" name="lossAmount" readonly
                                                   value="${(detail.lossAmount)!}" placeholder="總報損(元)"/>
                                        </td>
                                        <td>
                                            <input type="text" id="invNum" name="invNum" class="form-control"
                                                   value="${(detail.invNum)!}" placeholder="盤點量"
                                                   onblur="numChange(this.value,'${(detail.skuId)}','#invAmount_${(detail.skuId)}_${(detail.factoryId)}')"/>
                                        </td>
                                        <td>
                                            <input type="text" id="invAmount_${(detail.skuId)}_${(detail.factoryId)}"
                                                   style="width: 100px;"
                                                   name="invAmount"
                                                   readonly
                                                   value="${(detail.invAmount)}"/>
                                        </td>
                                        <td>
                                            <input type="text" id="invLossNum"
                                                   name="invLossNum"
                                                   value="${(detail.invLossNum)}" class="form-control"
                                                   placeholder="盤點報損量"
                                                   onblur="numChange(this.value,'${(detail.skuId)}','#invLossAmount_${(detail.skuId)}_${(detail.factoryId)}')"/>

                                        </td>
                                        <td>
                                            <input type="text"
                                                   id="invLossAmount_${(detail.skuId)}_${(detail.factoryId)}"
                                                   name="invLossAmount" readonly style="width: 100px;"
                                                   value="${(detail.invLossAmount)}"
                                                   placeholder="盤點報損量金額">

                                        </td>
                                        <td>
                                            <input type="text" id="remarks" class="form-control" style="width:200px;"
                                                   name="remarks"
                                                   placeholder="備注" value="${(detail.remarks)}">
                                        </td>
                                        <td><input type="button" onclick="$('#tr_${(detail.skuId)}').remove()"
                                                   value="刪除"></td>
                                    </tr>
                                </#list>
                                </tbody>
                                <tbody id="invOrderDetailList">

                                </tbody>
                            </table>
                        </form>
                    </div><!-- /.box-body -->
                </div>

                <div class="form-group">
                    <label class="col-sm-4 control-label"> </label>
                    <div class="col-sm-6">
                        <input type="button" id="save_btn" onclick="save()" class="btn btn-primary" value="保存">
                        <input type="button" id="submitAudit_btn" onclick="submitAudit()" class="btn btn-primary"
                               value="提交審核">
                        <a class="btn btn-danger" href="/storage/invOrder/list/1"> 返回</a>
                    </div>
                </div>
            </div>
        </div><!--/.col (left) -->
    </div>
</section><!-- /.content -->
//表單封裝json
function constructObjectFromTable(object, $object) {
    var javaObjArray = [];

    $object.each(function(i) {
        // var $ck = $(this).find('input[name^=gvdata]');
        // if($ck.length != 0){
        //     if(!$ck.attr('checked')){
        //         return true;
        //     }
        // }
var javaObj = {};

        for (var p in object) {
            var $val = $(this).find('input[name="'+p+'"]');
            if ($val.length === 0) {
                javaObj[p] = $(this).find('select[name="'+p+'"]').val();
            } else {
                javaObj[p] = $val.val();
            }
        }

        javaObjArray.push(javaObj);
    });

    return javaObjArray;
}
/**
 * 保存/提交審核
*
 * @param invOrderModelWrapper
* @return
*/
@RequestMapping(value = "/saveInvOrderModel")
@ResponseBody
public Map saveInvOrderModel(@RequestBody InvOrderModelWrapper invOrderModelWrapper) {

    boolean code = invOrderDetailModelService.saveInvOrderModelWrapper(invOrderModelWrapper);
    Map returnMap = new HashMap();
    returnMap.put("code", code);
    return returnMap;
}
/**
     * 保存頭和明細/提交審核
*
     * @param invOrderModelWrapper
*/
@Override
public boolean saveInvOrderModelWrapper(InvOrderModelWrapper invOrderModelWrapper) {
        boolean retflag = false;
//        頭信息
InvOrderModel invOrderModel = invOrderModelWrapper.getInvOrderModel();
        Integer counts = invOrderModelMapper.searchCountInvOrder(invOrderModel.getId());
        if (counts > 0) { // 表中已經存在，說明是 編輯
retflag = this.doEdit(invOrderModelWrapper);
        } else { // 表中不存在，是新增
retflag = this.doSave(invOrderModelWrapper);
        }
        return retflag;
    }


importorg.codehaus.jackson.annotate.JsonIgnoreProperties;

import java.util.List;
@JsonIgnoreProperties(ignoreUnknown = true)
public class InvOrderModelWrapper {
    private InvOrderModel invOrderModel;
    private List<InvOrderDetailModel> invOrderDetailModels;

    public InvOrderModel getInvOrderModel() {
        return invOrderModel;
    }

    public void setInvOrderModel(InvOrderModel invOrderModel) {
        this.invOrderModel = invOrderModel;
    }

    public List<InvOrderDetailModel> getInvOrderDetailModels() {
        return invOrderDetailModels;
    }

    public void setInvOrderDetailModels(List<InvOrderDetailModel> invOrderDetailModels) {
        this.invOrderDetailModels = invOrderDetailModels;
    }
}

 

 

 

<script src="/plugins/jQuery/serializeObject.js"></script>

/*
* .serializeObject (c) Dan Heberden
* danheberden.com
*
* Gives you a pretty object for your form elements
*/
(function ($) {
    $.fn.serializeObject = function () {
        if (!this.length) {
            return false;
        }

        var $el = this,
            data = {},
            lookup = data; //current reference of data

        $el.find(':input[type!="checkbox"][type!="radio"], input:checked').each(function () {
            // data[a][b] becomes [ data, a, b ]
            var named = this.name.replace(/([^]+)?\]/g, ',$1').split(','),
                cap = named.length - 1,
                i = 0;

            for (; i < cap; i++) {
                // move down the tree - create objects or array if necessary
                lookup = lookup[named[i]] = lookup[named[i]] ||
                    ( named[i + 1] == "" ? [] : {} );
            }

            // at the end, psuh or assign the value
            if (lookup.length != undefined) {
                lookup.push($(this).val());
            } else {
                lookup[named[cap]] = $(this).val();
            }

            // assign the reference back to root
            lookup = data;
        });

        return data;
    };
})(jQuery);