在Bootstrap開(kāi)發(fā)框架中使用dataTable直接錄入表格行數(shù)據(jù)的方法
在Winform開(kāi)發(fā)的時(shí)候，我們很多時(shí)候可以利用表格控件來(lái)直接錄入數(shù)據(jù)，不過(guò)在Web上較少看到，其實(shí)也可以利用dataTable對(duì)象處理直接錄入表格行數(shù)據(jù)，這個(gè)可以提高數(shù)據(jù)的錄入方便，特別是在一些簡(jiǎn)單業(yè)務(wù)的明細(xì)數(shù)據(jù)的時(shí)候，看起來(lái)會(huì)比彈出窗口錄入方便一些，也高大上一點(diǎn)。本篇主要介紹在Bootstrap開(kāi)發(fā)框架中使用dataTable直接錄入表格行數(shù)據(jù)。
1、基于表格直接錄入數(shù)據(jù)和Winform的界面回顧
在開(kāi)始Web界面直接錄入表格行數(shù)據(jù)前，我們先來(lái)看看Winform界面的處理情況，如我在流程管理里面，對(duì)于具有主從明細(xì)的報(bào)銷業(yè)務(wù)表的數(shù)據(jù)處理，采用了下面的界面。
這種明細(xì)表單可以直接在表格控件Griview上進(jìn)行新增、編輯處理。
而對(duì)于Web界面，如果我們要保持和這個(gè)布局類似的話，采用dataTable直接錄入表格行數(shù)據(jù)也可以達(dá)到。
上面的界面處理明細(xì)數(shù)據(jù)的時(shí)候，可以直接使用新增記錄，直接在錄入框中輸入數(shù)據(jù)，然后保存起來(lái)，保存后數(shù)據(jù)變?yōu)橹蛔x，如果需要修改，還可以單擊編輯按鈕進(jìn)行修改。
而這些明細(xì)的數(shù)據(jù)，也僅僅存在JS的對(duì)象里面，還沒(méi)有保存到后臺(tái)數(shù)據(jù)庫(kù)中，我們可以在最后保存（如上界面的確定按鈕）處理中再獲取全部添加的數(shù)據(jù)進(jìn)行提交即可。
在這些數(shù)據(jù)提交之后，我們?cè)诓榭唇缑胬锩婵梢钥梢訠ootstrap Table插件來(lái)展示數(shù)據(jù)即可。
2、在Web上使用dataTable直接錄入表格行數(shù)據(jù)的實(shí)現(xiàn)
上面的界面展示了在Web上使用dataTable直接錄入表格行數(shù)據(jù)和數(shù)據(jù)展示，這里開(kāi)始介紹它們的界面和實(shí)現(xiàn)代碼。
界面部分主要是這個(gè)明細(xì)的處理。
界面視圖的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">明細(xì)清單</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>序號(hào)</th>
<th> 費(fèi)用類型 </th>
<th> 發(fā)生時(shí)間 </th>
<th> 費(fèi)用金額(元) </th>
<th> 費(fèi)用說(shuō)明 </th>
<th> 編輯 </th>
<th> 刪除 </th>
</tr>
</thead>
<tbody>
@*<tr>
<td> 1 </td>
<td> 交通費(fèi) </td>
<td> 2018-10-01 </td>
<td> 2000 </td>
<td> 備注信息 </td>
<td>
<a class="edit" href="javascript:;" rel="external nofollow" rel="external nofollow" > 編輯 </a>
</td>
<td>
<a class="delete" href="javascript:;" rel="external nofollow" rel="external nofollow" > 刪除 </a>
</td>
</tr>*@
</tbody>
</table>
</div>
</div>
其中主要是ID為 detail_editable_1 的標(biāo)記，這個(gè)就是承載明細(xì)信息的表格，我們可以定義我們需要的表頭信息，而輸入框的內(nèi)容，則可以通過(guò)dataTable插件的對(duì)象進(jìn)行動(dòng)態(tài)添加。
//定義dataTable對(duì)象
var table = $('#detail_editable_1');
var oTable = table.dataTable({
"lengthMenu": [
[5, 15, 20, -1],
[5, 15, 20, "All"] // 改變每頁(yè)的行數(shù)
],
// 使用漢化
"language": {
url: '//cdn.datatables.net/plug-ins/3cfcc339e89/i18n/Chinese.json'
},
//初始化
"pageLength": 5,
"columnDefs": [{ // 設(shè)置默認(rèn)列設(shè)置
'orderable': true,
'targets': [0]
}, {
"searchable": true,
"targets": [0]
}],
"order": [
[0, "asc"]
] // 將第一列設(shè)置為asc的默認(rèn)排序
});
編輯行記錄，就是動(dòng)態(tài)增加一些Input控件，讓用戶可以錄入數(shù)據(jù)，如下代碼所示。
//編輯行
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>';
}
保存數(shù)據(jù)后，通過(guò)把記錄更新到對(duì)應(yīng)TD對(duì)象里面，如下所示。
//費(fèi)用類型 發(fā)生時(shí)間 費(fèi)用金額 費(fèi)用說(shuō)明
var objList = [];
//保存行數(shù)據(jù)，切換到普通模式
function saveRow(oTable, nRow) {
var jqInputs = $('input', nRow);
//更新行中每個(gè)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();
}
在界面上的幾個(gè)出來(lái)動(dòng)作按鈕，如新增、編輯、保存、刪除等按鈕處理事件如下所示。
var addRow = 1;
$('#detail_editable_1_new').click(function (e) {
e.preventDefault();
if (nNew && nEditing) {
if (confirm("前面記錄沒(méi)有保存，您是否需要保存?")) {
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("您確認(rèn)要?jiǎng)h除該行記錄嗎?") == false) {
return;
}
//獲取上一級(jí)tr行的數(shù)據(jù)
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;
/*獲取所擊連接的行對(duì)象*/
var nRow = $(this).parents('tr')[0];
if (nEditing !== null && nEditing != nRow) {
/* 當(dāng)前正在編輯 - 但不是此行 - 在繼續(xù)編輯模式之前恢復(fù)舊版 */
restoreRow(oTable, nEditing);
editRow(oTable, nRow);
nEditing = nRow;
} else if (nEditing == nRow && this.innerHTML == "保存") {
/* 編輯該行，并準(zhǔn)備保存記錄 */
saveRow(oTable, nEditing);
nEditing = null;
} else {
/* No edit in progress - let's start one */
editRow(oTable, nRow);
nEditing = nRow;
}
});
}
我們?cè)谧詈笠徊剑峤粩?shù)據(jù)的時(shí)候，就是遍歷整個(gè)表格，獲取每行的數(shù)據(jù)，并把它們放到JSON對(duì)象列表里面，在提交到后臺(tái)錄入即可，如下是獲取列表數(shù)據(jù)的JS代碼
//獲取表格的數(shù)據(jù)，并返回對(duì)象列表
function GetData() {
var list = [];
var trs = table.fnGetNodes();
for (var i = 0; i < trs.length; i++) {
var data = table.fnGetData(trs[i]);//獲取指定行的數(shù)據(jù)
var obj = {};
//obj["seq"] = data[0];//序號(hào)
obj["FeeType"] = data[1];
obj["OccurTime"] = data[2];
obj["FeeAmount"] = data[3];
obj["FeeDescription"] = data[4];
list.push(obj);
}
return list;
};
獲取到表格明細(xì)的數(shù)據(jù)后，我們就是確定如何提交到MVC后臺(tái)接口來(lái)處理了，下面是業(yè)務(wù)里面關(guān)于明細(xì)數(shù)據(jù)提交MVC后臺(tái)的JS代碼。
后臺(tái)MVC控制器的C#處理邏輯代碼如下所示。
/// <summary>
/// 保存申請(qǐng)單主從表數(shù)據(jù)
/// </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>();
//轉(zhuǎn)換為明細(xì)信息
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)
{
//設(shè)置關(guān)鍵信息
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("傳遞參數(shù)錯(cuò)誤");
}
}
其中對(duì)于提交上來(lái)的數(shù)據(jù)，對(duì)象信息用JObject進(jìn)行轉(zhuǎn)換，而對(duì)于明細(xì)列表則使用JArray.FromObject進(jìn)行轉(zhuǎn)換，其他部分就是如何保存主表和明細(xì)表的接口了。
上面的處理邏輯和代碼就是處理明細(xì)表的前臺(tái)獲取，提交處理，以及后臺(tái)的接口處理，整個(gè)過(guò)程主要用來(lái)介紹在Bootstrap開(kāi)發(fā)框架中使用dataTable直接錄入表格行數(shù)據(jù)。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- Bootstrap table表格初始化表格數(shù)據(jù)的方法
- BootStrap Fileinput插件和Bootstrap table表格插件相結(jié)合實(shí)現(xiàn)文件上傳、預(yù)覽、提交的導(dǎo)入Excel數(shù)據(jù)操作步驟
- Angualrjs和bootstrap相結(jié)合實(shí)現(xiàn)數(shù)據(jù)表格table
- bootstrap table 數(shù)據(jù)表格行內(nèi)修改的實(shí)現(xiàn)代碼
- bootstrap jquery dataTable 異步ajax刷新表格數(shù)據(jù)的實(shí)現(xiàn)方法
- Bootstrap Table表格一直加載(load)不了數(shù)據(jù)的快速解決方法
- bootstrap-table獲取表格數(shù)據(jù)的多種方式
相關(guān)文章
Generator 函數(shù)是 ES6 提供的一種異步編程解決方案，語(yǔ)法行為與傳統(tǒng)函數(shù)完全不同。這篇文章給大家介紹Es6 Generator函數(shù)的相關(guān)知識(shí)，感興趣的朋友一起看看吧2018-02-02
微信小程序頁(yè)面跳轉(zhuǎn)功能之從列表的item項(xiàng)跳轉(zhuǎn)到下一個(gè)頁(yè)面的方法
這篇文章主要介紹了微信小程序頁(yè)面跳轉(zhuǎn)功能之從列表的item項(xiàng)跳轉(zhuǎn)到下一個(gè)頁(yè)面的方法,結(jié)合具體實(shí)例形式總結(jié)分析了微信小程序頁(yè)面跳轉(zhuǎn)及列表item項(xiàng)跳轉(zhuǎn)頁(yè)面的相關(guān)操作技巧,需要的朋友可以參考下2017-11-11
UniApp使用vue.config.js進(jìn)行配置的詳細(xì)教程
這篇文章主要給大家介紹了關(guān)于UniApp使用vue.config.js進(jìn)行配置的詳細(xì)教程,uniapp是一套基于Vue語(yǔ)法的框架,同樣也支持Vue.config.js配置,一般常用的莫過(guò)于路徑的名稱,需要的朋友可以參考下2023-10-10
原生JS實(shí)現(xiàn)的自動(dòng)輪播圖功能詳解
這篇文章主要介紹了原生JS實(shí)現(xiàn)的自動(dòng)輪播圖功能,結(jié)合實(shí)例形式詳細(xì)分析了基于原生js實(shí)現(xiàn)輪播圖的原理、操作步驟及操作注意事項(xiàng),需要的朋友可以參考下2018-12-12
JS 組件系列之Bootstrap Table 凍結(jié)列功能IE瀏覽器兼容性問(wèn)題解決方案
這篇文章主要介紹了JS 組件系列之Bootstrap Table 凍結(jié)列功能IE瀏覽器兼容性問(wèn)題解決方案,需要的朋友可以參考下2017-06-06
uniapp實(shí)現(xiàn)微信小程序的電子簽名效果(附demo)
本文主要介紹了uniapp實(shí)現(xiàn)微信小程序的電子簽名效果，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05
layer.open關(guān)閉父窗口 以及調(diào)用父頁(yè)面的方法
今天小編就為大家分享一篇layer.open關(guān)閉父窗口 以及調(diào)用父頁(yè)面的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
這篇文章主要幫助大家輕松掌握J(rèn)avaScript狀態(tài)模式,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09
Javascript實(shí)現(xiàn)找不同色塊的游戲
先給大家說(shuō)下游戲規(guī)則：在變化數(shù)量的顏色塊里找出一個(gè)不同顏色的塊點(diǎn)擊。下面通過(guò)js代碼給大家分享找不同色塊的游戲?qū)崿F(xiàn)方法，需要的朋友參考下吧2017-07-07
這篇文章主要介紹了ES6字符串的擴(kuò)展實(shí)例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12