這篇文章跟大家介紹一下在Bootstrap開發框架中使用dataTable直接錄入表格行資料的方法。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。
在Winform開發的時候，我們很多時候可以利用表格控制項來直接輸入數據，不過在Web上較少看到，其實也可以利用dataTable物件處理直接錄入表格行數據，這個可以提高數據的輸入方便，特別是在一些簡單業務的明細數據的時候，看起來會比彈出窗口錄入方便一些，也高大上一點。本篇主要介紹在Bootstrap開發框架中使用dataTable直接錄入表格行資料。 【相關推薦：《bootstrap教學》】
在開始Web介面直接錄入表格行資料前，我們先來看看Winform介面的處理情況，如我在流程管理裡面，對於具有主從明細的報銷業務表的資料處理，採用了下面的介面。
這種明細表單可以直接在表格控制項Griview上進行新增、編輯處理。
而對於Web介面，如果我們要保持和這個佈局類似的話，採用dataTable直接錄入表格行資料也可以達到。
上面的介面處理明細資料的時候，可以直接使用新增記錄，直接在輸入框中輸入數據，然後儲存起來，儲存後資料變成唯讀，如果需要修改，也可以點選編輯按鈕進行修改。
而這些明細的數據，也僅僅存在JS的物件裡面，還沒有保存到後台資料庫中，我們可以在最後保存（如上界面的確定按鈕）處理中再獲取全部添加的數據進行提交即可。
在這些資料提交之後，我們在查看介面裡面可以可以Bootstrap Table插件來展示資料即可。
上面的介面展示了在Web上使用dataTable直接輸入表格行資料和資料展示，這裡開始介紹它們的介面和實作程式碼。
介面部分主要是這個明細的處理。
介面視圖的HTML程式碼如下所示。
其中主要是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 = ''; jqTds[1].innerHTML = ''; jqTds[2].innerHTML = ''; jqTds[3].innerHTML = ''; jqTds[4].innerHTML = ''; jqTds[5].innerHTML = '保存'; jqTds[6].innerHTML = '取消'; }
儲存資料後，透過把記錄更新到對應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('编辑', nRow, 5, false); oTable.fnUpdate('删除', 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#處理邏輯程式碼如下。
