在Bootstrap開發框架中使用dataTable直接錄入表格行資料

摘要： 在Winform開發的時候，我們很多時候可以利用表格控制元件來直接錄入資料，不過在Web上較少看到，其實也可以利用dataTable物件處理直接錄入表格行資料，這個可以提高資料的錄入方便，特別是在一些簡單業務的明細資料的時候，看起來會比彈出視窗錄入方便一些，也高大上一點。本篇主要介紹在Boot...

在Winform開發的時候，我們很多時候可以利用表格控制元件來直接錄入資料，不過在Web上較少看到，其實也可以利用dataTable物件處理直接錄入表格行資料，這個可以提高資料的錄入方便，特別是在一些簡單業務的明細資料的時候，看起來會比彈出視窗錄入方便一些，也高大上一點。本篇主要介紹在Bootstrap開發框架中使用dataTable直接錄入表格行資料。

1、基於表格直接錄入資料和Winform的介面回顧

在開始Web介面直接錄入表格行資料前，我們先來看看Winform介面的處理情況，如我在流程管理裡面，對於具有主從明細的報銷業務表的資料處理，採用了下面的介面。

這種明細表單可以直接在表格控制元件Griview上進行新增、編輯處理。

而對於Web介面，如果我們要保持和這個佈局類似的話，採用dataTable直接錄入表格行資料也可以達到。

上面的介面處理明細資料的時候，可以直接使用新增記錄，直接在錄入框中輸入資料，然後儲存起來，儲存後資料變為只讀，如果需要修改，還可以單擊編輯按鈕進行修改。

而這些明細的資料，也僅僅存在JS的物件裡面，還沒有儲存到後臺資料庫中，我們可以在最後儲存（如上介面的確定按鈕）處理中再獲取全部新增的資料進行提交即可。

在這些資料提交之後，我們在檢視介面裡面可以可以Bootstrap Table外掛來展示資料即可。

2、在Web上使用dataTable直接錄入表格行資料的實現

上面的介面展示了在Web上使用dataTable直接錄入表格行資料和資料展示，這裡開始介紹它們的介面和實現程式碼。

介面部分主要是這個明細的處理。

介面檢視的HTML程式碼如下所示。

<div class="portlet light portlet-fit ">
<div class="portlet-title">
<div class="caption">
<i class="icon-settings font-red"></i>
<span class="caption-subject font-red sbold uppercase">明細清單</span>
</div>
</div>
<div class="portlet-body">
<div class="table-toolbar">
<div class="row">
<div class="col-md-6">
<div class="btn-group">
<button id="detail_editable_1_new" class="btn green">
新增記錄
<i class="fa fa-plus"></i>
</button>
</div>
</div>
</div>
</div>
<table class="table table-striped table-hover table-bordered" id="detail_editable_1">
<thead>
<tr>
<th>序號</th>
<th> 費用型別 </th>
<th> 發生時間 </th>
<th> 費用金額(元) </th>
<th> 費用說明 </th>
<th> 編輯 </th>
<th> 刪除 </th>
</tr>
</thead>
<tbody>
@*<tr>
<td> 1 </td>
<td> 交通費 </td>
<td> 2018-10-01 </td>
<td> 2000 </td>
<td> 備註資訊 </td>
<td>
<a class="edit" href="javascript:;"> 編輯 </a>
</td>
<td>
<a class="delete" href="javascript:;"> 刪除 </a>
</td>
</tr>*@
</tbody>
</table>
</div>
</div>

其中主要是ID為 detail_editable_1 的標記，這個就是承載明細資訊的表格，我們可以定義我們需要的表頭資訊，而輸入框的內容，則可以通過dataTable外掛的物件進行動態新增。

//定義dataTable物件
var table = $('#detail_editable_1');
var oTable = table.dataTable({
"lengthMenu": [
[5, 15, 20, -1],
[5, 15, 20, "All"] // 改變每頁的行數
],

// 使用漢化
"language": {
url: '//cdn.datatables.net/plug-ins/3cfcc339e89/i18n/Chinese.json'
},

//初始化
"pageLength": 5,
"columnDefs": [{ // 設定預設列設定
'orderable': true,
'targets': [0]
}, {
"searchable": true,
"targets": [0]
}],
"order": [
[0, "asc"]
] // 將第一列設定為asc的預設排序
});

編輯行記錄，就是動態增加一些Input控制元件，讓使用者可以錄入資料，如下程式碼所示。

//編輯行
function editRow(oTable, nRow) {
var aData = oTable.fnGetData(nRow);
var jqTds = $('>td', nRow);
jqTds[0].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[0] + '" readonly>';
jqTds[1].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[1] + '">';
jqTds[2].innerHTML = '<input type="date" class="form-control input-small" value="' + aData[2] + '">';
jqTds[3].innerHTML = '<input type="number" class="form-control input-small" value="' + aData[3] + '">';
jqTds[4].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[4] + '">';
jqTds[5].innerHTML = '<a class="edit" href="">儲存</a>';
jqTds[6].innerHTML = '<a class="cancel" href="">取消</a>';
}

儲存資料後，通過把記錄更新到對應TD物件裡面，如下所示。

//費用型別 發生時間 費用金額 費用說明
var objList = [];
//儲存行資料，切換到普通模式
function saveRow(oTable, nRow) {
var jqInputs = $('input', nRow);
//更新行中每個input的值
oTable.fnUpdate(jqInputs[0].value, nRow, 0, false);
oTable.fnUpdate(jqInputs[1].value, nRow, 1, false);
oTable.fnUpdate(jqInputs[2].value, nRow, 2, false);
oTable.fnUpdate(jqInputs[3].value, nRow, 3, false);
oTable.fnUpdate(jqInputs[4].value, nRow, 4, false);
oTable.fnUpdate('<a class="edit" href="">編輯</a>', nRow, 5, false);
oTable.fnUpdate('<a class="delete" href="">刪除</a>', nRow, 6, false);
oTable.fnDraw();
}

在介面上的幾個出來動作按鈕，如新增、編輯、儲存、刪除等按鈕處理事件如下所示。

var addRow = 1;
$('#detail_editable_1_new').click(function (e) {
e.preventDefault();

if (nNew && nEditing) {
if (confirm("前面記錄沒有儲存，您是否需要儲存?")) {
saveRow(oTable, nEditing);
//$(nEditing).find("td:first").html("未儲存");
nEditing = null;
nNew = false;
} else {
oTable.fnDeleteRow(nEditing); // cancel
nEditing = null;
nNew = false;
return;
}
}

//新增一條新的記錄
var aiNew = oTable.fnAddData([addRow++, '', '', '', '', '', '']);
var nRow = oTable.fnGetNodes(aiNew[0]);
editRow(oTable, nRow);
nEditing = nRow;
nNew = true;
});
//刪除操作
table.on('click', '.delete', function (e) {
e.preventDefault();
if (confirm("您確認要刪除該行記錄嗎?") == false) {
return;
}
//獲取上一級tr行的資料
var nRow = $(this).parents('tr')[0];
var aData = oTable.fnGetData(nRow);

var found = false;
$.each(objList, function (i, item) {
if (item["seq"] == aData[0]) {
found = true;
objList.splice(i, 1);
}
});
oTable.fnDeleteRow(nRow);
});
//取消操作
table.on('click', '.cancel', function (e) {
e.preventDefault();
if (nNew) {
oTable.fnDeleteRow(nEditing);
nEditing = null;
nNew = false;
} else {
restoreRow(oTable, nEditing);
nEditing = null;
}
});
//編輯操作
table.on('click', '.edit', function (e) {
e.preventDefault();
nNew = false;

/*獲取所擊連線的行物件*/
var nRow = $(this).parents('tr')[0];

if (nEditing !== null && nEditing != nRow) {
/* 當前正在編輯 - 但不是此行 - 在繼續編輯模式之前恢復舊版 */
restoreRow(oTable, nEditing);
editRow(oTable, nRow);
nEditing = nRow;
} else if (nEditing == nRow && this.innerHTML == "儲存") {
/* 編輯該行，並準備儲存記錄 */
saveRow(oTable, nEditing);
nEditing = null;

} else {
/* No edit in progress - let's start one */
editRow(oTable, nRow);
nEditing = nRow;
}
});
}

我們在最後一步，提交資料的時候，就是遍歷整個表格，獲取每行的資料，並把它們放到JSON物件列表裡面，在提交到後臺錄入即可，如下是獲取列表資料的JS程式碼

//獲取表格的資料，並返回物件列表
function GetData() {
var list = [];
var trs = table.fnGetNodes();
for (var i = 0; i < trs.length; i++) {
var data = table.fnGetData(trs[i]);//獲取指定行的資料

var obj = {};
//obj["seq"] = data[0];//序號
obj["FeeType"] = data[1];
obj["OccurTime"] = data[2];
obj["FeeAmount"] = data[3];
obj["FeeDescription"] = data[4];
list.push(obj);
}
return list;
};

獲取到表格明細的資料後，我們就是確定如何提交到MVC後臺介面來處理了，下面是業務裡面關於明細資料提交MVC後臺的JS程式碼。

後臺MVC控制器的C#處理邏輯程式碼如下所示。

/// <summary>
/// 儲存申請單主從表資料
/// </summary>
/// <returns></returns>
[HttpPost]
public ActionResult SaveApply(JObject param)
{
dynamic obj = param;
if (obj != null)
{
var result = new CommonResult();

if (obj.info != null)
{
//獲取主資訊
var info = (JObject.FromObject(obj.info)).ToObject<ReimbursementInfo>();

//轉換為明細資訊
List<ReimbursementDetailInfo> details = null;
if (obj.details != null)
{
details = (JArray.FromObject(obj.details)).ToObject<List<ReimbursementDetailInfo>>();
}

if (info != null)
{
//修改部分資訊
OnBeforeInsert(info);
bool succeed = BLLFactory<Reimbursement>.Instance.Insert(info);
if (succeed)
{
if (details != null)
{
foreach (var detailInfo in details)
{
//設定關鍵資訊
detailInfo.Apply_ID = info.Apply_ID;
detailInfo.Header_ID = info.ID;
BLLFactory<ReimbursementDetail>.Instance.InsertUpdate(detailInfo, detailInfo.ID);
}
}
result.Success = succeed;
}
}
}
return ToJsonContent(result);
}
else
{
throw new MyApiException("傳遞引數錯誤");
}
}

其中對於提交上來的資料，物件資訊用JObject進行轉換，而對於明細列表則使用JArray.FromObject進行轉換，其他部分就是如何儲存主表和明細表的介面了。

上面的處理邏輯和程式碼就是處理明細表的前臺獲取，提交處理，以及後臺的介面處理，整個過程主要用來介紹在Bootstrap開發框架中使用dataTable直接錄入表格行資料。