淺談Bootstrap中如何直接輸入表格行資料（1）

這篇文章跟大家介紹一下在Bootstrap開發框架中使用dataTable直接錄入表格行資料的方法。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。

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

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 = &#39;<input type="text" class="form-control input-small" value="&#39; + aData[0] + &#39;" readonly>&#39;;
                    jqTds[1].innerHTML = &#39;<input type="text" class="form-control input-small" value="&#39; + aData[1] + &#39;">&#39;;
                    jqTds[2].innerHTML = &#39;<input type="date" class="form-control input-small" value="&#39; + aData[2] + &#39;">&#39;;
                    jqTds[3].innerHTML = &#39;<input type="number" class="form-control input-small" value="&#39; + aData[3] + &#39;">&#39;;
                    jqTds[4].innerHTML = &#39;<input type="text" class="form-control input-small" value="&#39; + aData[4] + &#39;">&#39;;
                    jqTds[5].innerHTML = &#39;<a class="edit" href="">保存</a>&#39;;
                    jqTds[6].innerHTML = &#39;<a class="cancel" href="">取消</a>&#39;;
                }

儲存資料後，透過把記錄更新到對應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(&#39;<a class="edit" href="">编辑</a>&#39;, nRow, 5, false);
                    oTable.fnUpdate(&#39;<a class="delete" href="">删除</a>&#39;, 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直接錄入表格行資料。 

更多程式相關知識，請造訪：程式設計影片！ ！

以上是淺談Bootstrap中如何直接輸入表格行資料（1）的詳細內容。更多資訊請關注PHP中文網其他相關文章！