# 多檔(MD)
### Controller
**需要繼承IApiController.==MD==**
和M檔差不多,需要多一個明細檔的相關設定,來連接明細檔的Table,需要多設定**外來鍵(linkKey)**
```csharp=
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 自己本身外來鍵
```csharp=
[System.Web.Http.HttpPost]
public IHttpActionResult Detail(DeltaMD a_dr)
{
return doGetDetailResult(a_dr);
}
```
* 顯示明細檔
### cshtml
和M檔一樣,只需要再Master From多新增明細檔存的位置
```htmlmixed=
<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
```javascript=
新增明細檔的欄位
//--以下為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 子視窗範例
```javascript=
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: `實習筆記`