在Bootstrap開發框架中使用dataTable直接錄入表格行數據的方法

時間  2019-12-11
標籤 bootstrap 開發 框架 使用 datatable 直接 錄入 表格 數據 方法 欄目 Bootstarp 简体版
原文   原文鏈接

在Winform開發的時候，咱們不少時候能夠利用表格控件來直接錄入數據，不過在Web上較少看到，其實也能夠利用dataTable對象處理直接錄入表格行數據，這個能夠提升數據的錄入方便，特別是在一些簡單業務的明細數據的時候，看起來會比彈出窗口錄入方便一些，也高大上一點。本篇主要介紹在Bootstrap開發框架中使用dataTable直接錄入表格行數據。javascript

一、基於表格直接錄入數據和Winform的界面回顧html

前端精品教程：百度網盤下載前端

在開始Web界面直接錄入表格行數據前，咱們先來看看Winform界面的處理狀況，如我在流程管理裏面，對於具備主從明細的報銷業務表的數據處理，採用了下面的界面。java

這種明細表單能夠直接在表格控件Griview上進行新增、編輯處理。node

而對於Web界面，若是咱們要保持和這個佈局相似的話，採用dataTable直接錄入表格行數據也能夠達到。面試

前端精品教程：百度網盤下載算法

上面的界面處理明細數據的時候，能夠直接使用新增記錄，直接在錄入框中輸入數據，而後保存起來，保存後數據變爲只讀，若是須要修改，還能夠單擊編輯按鈕進行修改。數據庫

而這些明細的數據，也僅僅存在JS的對象裏面，尚未保存到後臺數據庫中，咱們能夠在最後保存（如上界面的肯定按鈕）處理中再獲取所有添加的數據進行提交便可。json

在這些數據提交以後，咱們在查看界面裏面能夠能夠Bootstrap Table插件來展現數據便可。小程序

前端精品教程：百度網盤下載

二、在Web上使用dataTable直接錄入表格行數據的實現

上面的界面展現了在Web上使用dataTable直接錄入表格行數據和數據展現，這裏開始介紹它們的界面和實現代碼。

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

界面視圖的HTML代碼以下所示。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
< 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:;" 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 的標記，這個就是承載明細信息的表格，咱們能夠定義咱們須要的表頭信息，而輸入框的內容，則能夠經過dataTable插件的對象進行動態添加。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
//定義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控件，讓用戶能夠錄入數據，以下代碼所示。

?
1
2
3
4
5
6
7
8
9
10
11
12
//編輯行
  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對象裏面，以下所示。

前端精品教程：百度網盤下載

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//費用類型 發生時間 費用金額 費用說明
   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();
   }

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
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代碼

前端精品教程：百度網盤下載

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//獲取表格的數據，並返回對象列表
      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#處理邏輯代碼以下所示。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
/// <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進行轉換，其餘部分就是如何保存主表和明細表的接口了。

 

 

從案例中學習SQL數據庫優化手把手帶你入坑H5與小程序直播開發傳智播客nodejs入門到精通（基礎就業）全套nodejs視頻教程HttpHelper萬能框架1.9.0.6源碼2018優才Web PHP全棧工程師高級教程-調優-高性能-億級架構泰牛2017年PHP基礎班+大牛班+高級課程全套PHP千萬級秒殺項目實戰附帶視頻講解+代碼演示+課程介紹+總結PHP攻城獅 - PHP從基礎語法到原生項目開發2018千鋒教育全套PHP視頻教程微專業Android安卓開發工程師從入門到精通全套高清視頻教程配套資料齊全微專業Java工程師聚焦Java開發工程師必知必會的知識技能全套高清視頻與配套資料Spring Cloud微服務實戰Vue2.5開發去哪兒網App 從零基礎入門到實戰項目Kotlin打造完整電商APP 模塊化+MVP+主流框架全新升級 Kotlin系統入門與進階全程MVP手把手 打造IM即時通信Android APPWebpack + React全棧工程架構項目實戰精講全面系統講解CSS 工做應用+面試一步搞定揭祕一線互聯網企業 前端JavaScript高級面試面試算法精講

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程