在Bootstrap開發(fā)框架中使用dataTable直接錄入表格行數(shù)據(jù)的方法
在Winform開發(fā)的時(shí)候,我們很多時(shí)候可以利用表格控件來直接錄入數(shù)據(jù),不過在Web上較少看到,其實(shí)也可以利用dataTable對(duì)象處理直接錄入表格行數(shù)據(jù),這個(gè)可以提高數(shù)據(jù)的錄入方便,特別是在一些簡(jiǎn)單業(yè)務(wù)的明細(xì)數(shù)據(jù)的時(shí)候,看起來會(huì)比彈出窗口錄入方便一些,也高大上一點(diǎn)。本篇主要介紹在Bootstrap開發(fā)框架中使用dataTable直接錄入表格行數(shù)據(jù)。
1、基于表格直接錄入數(shù)據(jù)和Winform的界面回顧
在開始Web界面直接錄入表格行數(shù)據(jù)前,我們先來看看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ù),然后保存起來,保存后數(shù)據(jù)變?yōu)橹蛔x,如果需要修改,還可以單擊編輯按鈕進(jìn)行修改。
而這些明細(xì)的數(shù)據(jù),也僅僅存在JS的對(duì)象里面,還沒有保存到后臺(tái)數(shù)據(jù)庫中,我們可以在最后保存(如上界面的確定按鈕)處理中再獲取全部添加的數(shù)據(jù)進(jìn)行提交即可。
在這些數(shù)據(jù)提交之后,我們?cè)诓榭唇缑胬锩婵梢钥梢訠ootstrap Table插件來展示數(shù)據(jù)即可。
2、在Web上使用dataTable直接錄入表格行數(shù)據(jù)的實(shí)現(xiàn)
上面的界面展示了在Web上使用dataTable直接錄入表格行數(shù)據(jù)和數(shù)據(jù)展示,這里開始介紹它們的界面和實(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)用說明 </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)容,則可以通過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"] // 改變每頁的行數(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ù)后,通過把記錄更新到對(duì)應(yīng)TD對(duì)象里面,如下所示。
//費(fèi)用類型 發(fā)生時(shí)間 費(fèi)用金額 費(fèi)用說明 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è)出來動(dòng)作按鈕,如新增、編輯、保存、刪除等按鈕處理事件如下所示。
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("您確認(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)接口來處理了,下面是業(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ì)于提交上來的數(shù)據(jù),對(duì)象信息用JObject進(jìn)行轉(zhuǎn)換,而對(duì)于明細(xì)列表則使用JArray.FromObject進(jìn)行轉(zhuǎn)換,其他部分就是如何保存主表和明細(xì)表的接口了。
上面的處理邏輯和代碼就是處理明細(xì)表的前臺(tái)獲取,提交處理,以及后臺(tái)的接口處理,整個(gè)過程主要用來介紹在Bootstrap開發(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)文章
JavaScript asp.net 獲取當(dāng)前超鏈接中的文本
今天用到,不會(huì)。網(wǎng)上找到一個(gè)方法,趕快記下來。可以獲取超鏈接的鏈接文本。2009-04-04JavaScript WebAPI、DOM、事件和操作元素實(shí)例詳解
這篇文章主要給大家介紹了關(guān)于JavaScript WebAPI、DOM、事件和操作元素的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用js具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2021-06-06Webpack設(shè)置環(huán)境變量的一些誤區(qū)詳解
這篇文章主要給大家介紹了關(guān)于Webpack設(shè)置環(huán)境變量的一些誤區(qū),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用Webpack具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12不刷新網(wǎng)頁就能鏈接新的js文件方法總結(jié)
在本篇文章里小編給大家整理的是關(guān)于不刷新網(wǎng)頁就能鏈接新的js文件方法總結(jié),需要的朋友們參考下。2020-03-03簡(jiǎn)體中文轉(zhuǎn)換繁體中文(實(shí)現(xiàn)代碼)
本篇文章主要是對(duì)簡(jiǎn)體中文轉(zhuǎn)換繁體中文的實(shí)現(xiàn)代碼進(jìn)行了介紹,需要的朋友可以過來參考下,希望對(duì)大家有所幫助2013-12-12