# 多檔(MD)

### Controller
**需要繼承IApiController.==MD==**

和M檔差不多，需要多一個明細檔的相關設定，來連接明細檔的Table，需要多設定**外來鍵(linkKey)**

public DetailClass[] getDetails()
{
    String l_SQL_D1 = @" select D.* from DEMOTI D where 1=1 and  ID = @ID order by DID ";
    return new DetailClass[1]
    {
	    new DetailClass()
        {
            tableName = "DEMOTI",
            sQL = l_SQL_D1.ToString(),
            keyField = new string[2] { "ID", "DID"},
            linkKey_M = new string[1] {"ID" },
            linkKey = new string[1] { "ID" },
            notNullField = new string[0] {},//不可空白欄位
	    noEditButInsertField = new string[0] {},//不可編輯,但可新增欄位
	    noEditField = new string[0] { },//不可編輯欄位
	    noCopyField = new string[0] { },//不可複製欄位
	    rptNa = "明細",
        }
    };
}

* linkKey_M 主檔的外來鍵
* linkKey 自己本身外來鍵

[System.Web.Http.HttpPost]
public IHttpActionResult Detail(DeltaMD a_dr)
{
    return doGetDetailResult(a_dr);
}

* 顯示明細檔

### cshtml
和M檔一樣，只需要再Master From多新增明細檔存的位置

<div id="panelGridDetail0">
    <div class="gridDetailToolbar">
        <div class="btn-group btn-group-sm">
            <button type="button" id="btnIns_D1" class="btn btn-secondary" ng-click="doInsDetailRow(0)"><i class="glyphicon glyphicon-plus"></i>新增</button>
            <button type="button" id="btnDel_D1" class="btn btn-secondary" ng-click="doDelMutiDetailRow(0)"><i class=" glyphicon glyphicon-minus"></i>刪除</button>
        </div>
    </div>
    <div class="gridDetailPanel">
        <div class="gridDetailStyle" ng-grid="gridDetails[0]" style="height:500px;">
        </div>
    </div>
</div>

### JS

新增明細檔的欄位
//--以下為Detail init---------------------
//新增明細1
var l_gridDetail = $scope.addDetail(true, true, true);
//定義明細Grid欄位內容(放在後面init)
l_gridDetail.columnDefs.push({ field: "DID", displayName: "序號", width: '100px', pinnable: false, cellClass: 'cellToolTip', cellTemplate: getCellTemplate_Number("DID", "序號", 10) });
l_gridDetail.columnDefs.push({ field: "CONTENT", displayName: "內容", width: '200px', pinnable: false, cellClass: 'cellToolTip', cellTemplate: getCellTemplate2("CONTENT", "內容", 50) });

* getCellTemplate_Number("DID", "序號", 10) **數值**
* getCellTemplate2("CONTENT", "內容", 50) **文字**
* getCellTemplate_Select2("DID", "序號", "opData.MEB_ID") **下拉式選單**
* getCellTemplate_Qubtn("CONTENT", "內容", 20, "btn_CONTENT") **子視窗**

### JS 子視窗範例

l_gridDetail.columnDefs.push({ field: "CONTENT", displayName: "內容", width: '200px', pinnable: false, cellClass: 'cellToolTip', cellTemplate: getCellTemplate_Qubtn("CONTENT", "內容", 20, "btn_CONTENT")});

$scope.quModals.push({ sender: 'btn_CONTENT', url: '/Demo/TEXT', isMultiSelect: false, isAutoSearch: false });

$scope.$on("quModaling", function (e, a_arg, a_gridRow) {
    //設定查詢子視窗屬性及預設參數
    if (a_arg.sender == 'btn_CONTENT'.toUpperCase()) {
        $scope.temp = a_gridRow;
    }
})
//--QuModal查詢子視窗回傳資料事件 quModalCallbacked 
$scope.$on("quModalCallbacked", function (e, a_arg) {          
    if ((a_arg.sender == "TEXT".toUpperCase()) && (a_arg.dst == "btn_CONTENT".toUpperCase())) {
        $scope.temp.CONTENT = a_arg.oldRow['NAME'];
        }
})

* 用$scope.temp存放子視窗的欄位值

###### tags: `實習筆記`