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" colspan="3">
                        <textarea id="T_Remark" name="T_Remark" class="easyui-textbox " data-options="prompt:'用途/技術要求等'" style="width:100%;height: 80px;"></textarea>
                    </td>
                </tr>

            </table>
        </form>
    </div>
    <div data-options="region:'center'">
        <div id="toolbar" style="padding:2px 5px;">
            <div class="dcui-btn-area">
                <a href="javascript:void()" id="NF-add" authorize="yes" οnclick="append()" class="dcui-btn dcui-btn-green"><i class="fa fa-plus"></i>新增</a>
                <a href="javascript:void()" id="NF-removeit" authorize="yes" οnclick="removeit()" class="dcui-btn dcui-btn-red"><i class="fa fa-trash"></i>刪除</a>
                <a href="javascript:void()" id="NF-save" authorize="yes" οnclick="accept()" class="dcui-btn dcui-btn-blue"><i class="fa fa-save"></i>確認</a>
            </div>
            <script>$('#tb2').authorizeButton()</script>
        </div>
        <table id="dg_detail" title="訂單明細" class="easyui-datagrid" style="width:100%;min-height:300px; padding:5px;">
            <thead>
                <tr>
                    <th data-options="field:'T_ItemName',width:140,align:'right',editor:'textbox'">物料名稱</th>
                    <th data-options="field:'T_Mode',width:140,align:'right',editor:'textbox'">規格型號</th>
                    <th data-options="field:'T_TechParam',width:120,align:'right',editor:'textbox'">技術參數</th>
                    <th data-options="field:'T_Manufacturer',width:120,align:'right',editor:'textbox'">廠家</th>
                    <th data-options="field:'T_Quantity',width:60,align:'right',editor:{type:'numberbox',options:{precision:1}}">數量</th>
                    <th data-options="field:'T_Price',width:60,align:'right',editor:{type:'numberbox',options:{precision:1}}">價格</th>
                    <th data-options="field:'T_IsStock',width:60,align:'center',editor:{type:'checkbox',options:{on:'有',off:'無'}}">庫存</th>
                    <th data-options="field:'T_DeliveryDate',width:100,align:'center',editor:{type:'datebox'}">交貨日期</th>
                    <th data-options="field:'T_ItemCode',width:100,align:'right',editor:'textbox'">存貨編號</th>
                    <th data-options="field:'T_Remark',width:140,align:'right',editor:'textbox'">備註</th>
                </tr>
            </thead>
        </table>
        <div class="form-button" id="wizard-actions">
            <a id="btn_save" class="btn btn-default btn-prev" οnclick="submitForm()">保存</a>
            <a id="btn_sure" class="btn btn-primary btn-prev" οnclick="submitConfirm()">保存併發布</a>
            <a id="btn_close" class="btn btn-warning" οnclick="submitClose()">關閉</a>
        </div>
    </div>
</div>

2、前端JS實現將DataGrid中的明細數據打包提交

這裏面有三個注意的：一個是對Datagrid編輯的操作和驗證。一個是獲取所有行的數據。另一個數form表單提交的時候附加明細；

 var keyValue = $.request("keyValue");
    $(function () {
        initControl();
        if (!!keyValue) {
            $.ajax({
                url: "/ProjectManage/InterPurchase/GetFormJson",
                data: { keyValue: keyValue },
                dataType: "json",
                async: false,
                success: function (data) {
                    $('#form1').form('load', data.main);
                }
            });
            var queryJson = {
                keyValue: keyValue
            }
            $('#dg_detail').datagrid('load', queryJson);
        }
    });
    //初始化
    function initControl() {
        $.ajax({
            url: "/BizData/GetSysUserJson",
            type: "get",
            dataType: "json",
            async: false,
            success: function (data) {
                $("#T_ApproverId").combogrid({
                    data: data,
                    multiple: true,
                    panelWidth: 220,
                    idField: 'F_Id',
                    textField: 'F_RealName',
                    columns: [[
                        { field: 'F_RealName', title: '名字', width: 100 },
                        { field: 'F_DepartmentId', title: '部門', width: 100 }
                    ]],
                    filter: function (q, row) {
                        var opts = $(this).combogrid('options');
                        return row[opts.textField].indexOf(q) >= 0;
                    }
                });

                $("#T_ReceiverId").combogrid({
                    data: data,
                    multiple: true,
                    panelWidth: 220,
                    idField: 'F_Id',
                    textField: 'F_RealName',
                    value: '172461185220895901',
                    columns: [[
                        { field: 'F_RealName', title: '名字', width: 100 },
                        { field: 'F_DepartmentId', title: '部門', width: 100 }
                    ]],
                    filter: function (q, row) {
                        var opts = $(this).combogrid('options');
                        return row[opts.textField].indexOf(q) >= 0;
                    }
                });

            }
        });
        $('#dg_detail').datagrid({
            url: "/ProjectManage/InterPurchase/GetDetailGridJson",
            toolbar: '#toolbar',
            hideColumn: "T_Id",
            method: 'get',
            autoRowHeight: false,
            nowrap: true,
            singleSelect: true,
            queryParams: {
                keyword: "",
                keyValue: keyValue
            },
            onClickRow: onClickRow

        });
    }
    //審覈表單
    function submitConfirm() {
        $.modalConfirm("注：是否確認同意審覈採購申請？", function (r) {
            if (r) {
                if (endEditing()) {
                    $('#dg_detail').datagrid('acceptChanges');
                } else {
                    $.modalMsg("請檢查訂單明細", "warning");
                    return;
                }
                $.submitEasyUIForm({
                    form: "form1",
                    url: "/ProjectManage/InterPurchase/SubmitForm?isConfirm=true&keyValue=" + keyValue,
                    param: { details: getrows() },
                    success: function () {
                        $.currentWindow().$('#dg_detail').datagrid('load');
                    }
                })
            }
        });
    }

    //提交Form表單
    function submitForm() {
        // 先驗證明細是否完成編輯
        if (endEditing()) {
            $('#dg_detail').datagrid('acceptChanges');
        } else {
            $.modalMsg("請檢查訂單明細", "warning");
            return;
        }
        $.submitEasyUIForm({
            form: "form1",
            url: "/ProjectManage/InterPurchase/SubmitForm?isConfirm=false&keyValue=" + keyValue,
            param: { details: getrows() },//將fdatagrid數據打包提交
            success: function () {
                $.currentWindow().$('#dg_detail').datagrid('load');
            }
        })
    }
    //定義當前可編輯行的index
    var editIndex = undefined;
    // 結束當前編輯行的編輯操作
    function endEditing() {
        if (editIndex == undefined) { return true }
        if ($('#dg_detail').datagrid('validateRow', editIndex)) {
            $('#dg_detail').datagrid('endEdit', editIndex);
            editIndex = undefined;
            return true;
        } else {
            return false;
        }
    }
    // 單擊行實現其他行取消編輯，當前行開始編輯
    function onClickRow(index) {
        if (editIndex != index) {
            if (endEditing()) {
                $('#dg_detail').datagrid('selectRow', index)
                        .datagrid('beginEdit', index);
                editIndex = index;
            } else {
                $('#dg_detail').datagrid('selectRow', editIndex);
            }
        }
    }
    // 添加新的一行，並且設置庫存數據初始值爲1
    function append() {
        if (endEditing()) {
            $('#dg_detail').datagrid('appendRow', { T_Quantity: 1 });
            editIndex = $('#dg_detail').datagrid('getRows').length - 1;
            $('#dg_detail').datagrid('selectRow', editIndex).datagrid('beginEdit', editIndex);
        }
    }
    // 移除行（移除前先取消編輯）
    function removeit() {
        if (editIndex == undefined) { return }
        $('#dg_detail').datagrid('cancelEdit', editIndex)
                .datagrid('deleteRow', editIndex);
        editIndex = undefined;
    }
    // 結束編輯並將datagrid設置爲接收數據變化，這樣才能正確獲取到行的數據
    function accept() {
        if (endEditing()) {
            $('#dg_detail').datagrid('acceptChanges');
        }
    }
    //獲取datagrid的所有行數據，並轉爲json字符串格式
    function getrows() {
        var rows = $('#dg_detail').datagrid('getRows');
        var entities = '';
        for(i = 0;i < rows.length;i++)
        {
            entities = entities  + JSON.stringify(rows[i]);
        }
        return JSON.stringify(rows);
    }

3、後臺接收提交數據的代碼

我們常規的Form表單提交方法SubmitForm方法的參數主要是主鍵和Mode實體。如果有明細數據，那麼需要添加一個參數，我命名爲string類型的details。然後新建一個明細表實體的數組。通過.ToList()方法即可將json字符串轉爲實體數組。然後提交

        [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult SubmitForm(PurchaseMainEntity uEntity,string details, string keyValue,bool isConfirm)
        {
            try
            {
                List<PurchaseDetailsEntity> detail=new List<PurchaseDetailsEntity>();
                detail = details.ToList<PurchaseDetailsEntity>();
                app.SubmitForm(uEntity, detail, keyValue, isConfirm);
                return Success("操作成功。");
            }
            catch(Exception ex)
            {
                return Error(ex.Message);
            }
          
        }

4、Application業務中的保存方法

先保存主表，然後循環保存明細表；我這裏沒有做保存失敗的回滾。建議大家做好這個驗證；

/// <summary>
        /// 保存
        /// </summary>
        /// <param name="mEntity"></param>
        /// <param name="details"></param>
        /// <param name="keyValue"></param>
        /// <param name="isConfirm">是否確認</param>
        public void SubmitForm(PurchaseMainEntity mEntity, List<PurchaseDetailsEntity> details, string keyValue, bool isConfirm)
        {
           
            if(details==null || details.Count == 0)
            {
                throw new Exception("請添加明細");
            }
            mEntity.T_Approver = CommonApp.GetUserName(mEntity.T_ApproverId);
            mEntity.T_Receiver = CommonApp.GetUserName(mEntity.T_ReceiverId);
            if (!string.IsNullOrEmpty(keyValue))
            {
                mEntity.Modify(keyValue);
                mEntity.T_Originator = CommonApp.GetUserName(mEntity.T_CreatorUserId);
                service.Update(mEntity);
            }
            else
            {
                mEntity.Create();
                mEntity.T_OriginatorId = mEntity.T_CreatorUserId;
                mEntity.T_Originator = CommonApp.GetUserName(mEntity.T_CreatorUserId);
                mEntity.T_OrderNo = Utils.GetOrderNumber();
                service.Insert(mEntity);
            }
            if (!string.IsNullOrEmpty(mEntity.T_Id))
            {
                detailservice.Delete(t => t.T_PurchaseId == mEntity.T_Id);
            }
           
            // 明細處理
            foreach (PurchaseDetailsEntity detail in details)
            {
               
                detail.T_Id = CommonUtils.GuId();
                detail.T_PurchaseId = mEntity.T_Id;
                detail.T_OrderNo = mEntity.T_OrderNo;
                detailservice.Insert(detail);
            }
            if (isConfirm)
            {
                InterPurchaseWorkMsg.OrderNoticeiMsgtoApprover(mEntity);
            }
        }