在前面隨筆《在Bootstrap開發框架中使用dataTable直接錄入表格行資料》中介紹了在Web頁面中使用Jquery DataTable外掛進行對資料直接錄入操作，這種處理能夠給使用者提供較好的資料錄入體驗，本篇繼續上篇的內容，繼續介紹這個直接錄入的處理操作，主要涉及到控制元件的初始化和資料來源的繫結等操作內容，隨著對這個處理的深入瞭解，我發現可以控制的內容也更加豐富，能夠更好的實現各種所需的效果。

1、直接錄入資料的介面分析

在之前介紹的資料直接錄入處理的時候，介面效果如下所示。

上面的介面處理明細資料的時候，可以直接使用新增記錄，直接在錄入框中輸入資料，然後儲存起來，儲存後資料變為只讀，如果需要修改，還可以單擊編輯按鈕進行修改。

而這些明細的資料，也僅僅存在JS的物件裡面，還沒有儲存到後臺資料庫中，我們可以在最後儲存（如上介面的確定按鈕）處理中再獲取全部新增的資料進行提交即可。

以上的明細資料錄入，只是提供了一些基本的輸入控制元件進行輸入，沒有進行過多的定製處理，而往往使用的時候，我們發現，有些資料是需要下拉列表的，有些是需要使用日期選擇的等等，那麼我們就需要考慮更深層次的控制元件顯示問題了。

如我們要實現更豐富的效果處理，甚至包括一些控制元件之間的聯動的處理，那麼我們應該如何操作呢？

下拉列表，動態資料介面展示

日期輸入框顯示

以上一些是我們常規的錄入方式，對於有一些比較多樣化的操作，我們儘可能為使用者提供方便，提供下拉控制元件給使用者選擇，畢竟選擇比錄入更加方便、規範化。

如可以在複雜介面中，使用彈出層進行查詢選擇

如部門和使用者之間的資料聯動效果如下所示。

以上種種效果，能夠滿足我們常規的資料選擇錄入的方便，從而方便客戶直接錄入資料處理。

2、直接錄入資料的控制元件初始化

我們從上文可以瞭解到，對於新增一套記錄，就是動態構建一些HTML的控制元件，然後進行初始化即可，如對於這個下拉列表的介面效果。

它的實現主要就是在編輯或者新增的時候，對HTML控制元件的處理，如下程式碼所示。

    //編輯行
    function editRow(oTable, nRow) {
        var aData = oTable.fnGetData(nRow);
        
 
var jqTds = $('>td', nRow);
        var i = 0;
        var feeType = aData[0];
        jqTds[i].innerHTML = '<select id="txtFeeType" class="form-control input-small" value="' + aData[0] + '"></select>';
        i++; jqTds[i].innerHTML = '<input id="txtOccurTime" class="form-control input-small" value="' + aData[1] + '">';
        i++; jqTds[i].innerHTML = '<input id="txtFeeAmount" type="number" class="form-control input-small" value="' + aData[2] + '">';
        i++; jqTds[i].innerHTML = '<input id="txtFeeDescription" type="text" class="form-control input-small" value="' + aData[3] + '">';                 
        i++; jqTds[i].innerHTML = '<a class="btn btn-xs green edit" href="" title="儲存">儲存</a>';
        i++; jqTds[i].innerHTML = '<a class="btn btn-xs red cancel" href="" title="取消"><span class="glyphicon glyphicon-share-alt "></span></a>';

        //繫結資料字典，並更新值
        BindDictItem("txtFeeType", "費用型別", function () {
            $("#txtFeeType").val(feeType).trigger("change");
        });
        //初始化日期控制元件
        $("#txtOccurTime").datepicker({
            language: 'zh-CN', //語言
            autoclose: true, //選擇後自動關閉
            clearBtn: true,//清除按鈕
            format: "yyyy-mm-dd"//日期格式
        });
    }

我們可以在下拉列表的時候，使用select2外掛，通過BindDictItem的通用JS函式，可以繫結資料庫的字典型別，並通過記錄對應列的值，可以給該控制元件進行賦值。

 $("#txtFeeType").val(feeType).trigger("change");

由於每個控制元件都有一個對應的ID，那麼我們使用它們的時候，就很方便，如初始化日期外掛，可以使用DateTime Picker外掛進行處理。

        //初始化日期控制元件
        $("#txtOccurTime").datepicker({
            language: 'zh-CN', //語言
            autoclose: true, //選擇後自動關閉
            clearBtn: true,//清除按鈕
            format: "yyyy-mm-dd"//日期格式
        });

最終達到了日期選擇效果。

使用彈出層進行查詢選擇的操作過程也很簡單。

                    jqTds[i].innerHTML = '<input id="txtAssetName" type="text" class="form-control input-small" onclick="SelectAssets(this)" value="' + aData[i] + '">';//資產名稱

也就是為這個控制元件增加onclick函式，在選擇單擊輸入的時候，彈出一個層進行處理即可。而這個獨立的通用層，則使用一個單獨的檢視，在頁面裡面引用即可，提高重用性。

@RenderPage("~/Views/Asset/SelectAsset.cshtml")

而通過在頁面裡面處理返回結果，則可以實現主介面內容控制元件的更新。

//選擇結果
function SelectResult() {
    var dict = {};
    addAssetKeyList.forEach(function (key, index, array) {
        var display = addAssetDisplayList[index];
        dict[key] = display;
    });

    //轉換選擇為JSON字串
    var json = JSON.stringify(dict);
    $("#selectAsset").modal("hide");

    //留給呼叫的介面實現這個函式，實現資料的返回出來
    ProcAssetJson = json;
    OnSelectAsset(json);
}

而選擇後，可以對控制元件內容以及關聯的資料進行動態更新。

        //選擇資產後呼叫
        function OnSelectAsset(json) {
            ProcAssetJson = json;//儲存到ProcAssetJson，方便下次開啟介面初始化資料
            if (json != '') {
                var dict = JSON.parse(json);
                if (dict != null) {
                    for (var key in dict) {
                        var display = dict[key];
                        assetInput.val(display);

                        //更新資料
                        $.getJSON("/Asset/FindByCode?code=" + key, function (info) {
                            if (info != null) {
                                $("#txtAssetCode").val(info.Code);
                                //$("#txtKeepAddr").val(info.KeepAddr);
                                $("#txtUnit").val(info.Unit);
                                $("#txtPrice").val(info.Price);
                                $("#txtTotalQty").val(info.Qty);
                                $("#txtTotalAmount").val(info.OriginValue);
                            }
                        });
                    };
                }
            }
        }

下面就是彈出介面層，並提供使用者選擇內容的介面

對於部門和使用者之間的資料聯動的處理，也是通過Select2控制元件的聯動更新處理實現的。以下是Select2聯動處理指令碼，可以實現多個控制元件之間的聯動操作

//部門編號後，使用者列表編號
$("#txtLyDept").on("change", function (e) {
    var deptNameId = $("#txtLyDept").val();
    if (deptNameId != null) {
        var id = deptNameId.substring(deptNameId.lastIndexOf("|") + 1);
        BindSelect("txtUsePerson", "/User/GetUserDictJson2?deptId=" + id, '', function () {
            $("#txtUsePerson").val(userid).trigger("change");
        });

        //儲存位置
        BindSelect("txtKeepAddr", "/StoreAddress/GetDictJson?deptId=" + id, '', function () {
            $("#txtKeepAddr").val(keepAddr).trigger("change");
        });
    }
});

介面效果如下所示。

由於我們在控制元件的ID上約定了以txt開頭，那麼我們通過這個約定規則動態獲取控制元件的值也是很方便的，這樣為我們儲存控制元件的資料提供很好的便捷處理。

//儲存行資料，切換到普通模式
var inputLength = 10;//輸入的欄位數
function saveRow(oTable, nRow) {
    //var jqInputs = $('input', nRow);
    var jqInputs = $("[id^='txt']", nRow);//id以txt開始([id^='txt']), id以txt結束([id$='txt'])

    //更新行中每個input的值
    for (var i = 0; i < inputLength; i++) {
        oTable.fnUpdate(jqInputs[i].value, nRow, i, false);
        iLen = i;
    }

    oTable.fnUpdate('<a class="btn btn-xs green edit" href="" title="編輯"><span class="glyphicon glyphicon-edit"></span></a>', nRow, inputLength, false);
    oTable.fnUpdate('<a class="btn btn-xs red delete" href="" title="刪除"><span class="glyphicon glyphicon-remove"></span></a>', nRow, inputLength + 1, false);
    oTable.fnDraw();
}

我們如果需要儲存資料到資料庫裡面，那麼就需要先構建好對應的JS資料物件，然後呼叫ajax進行資料的提交處理。構建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 = {
                        AssetName: data[0],
                        AssetCode: data[1],
                        LyDept: data[2],
                        UsePerson: data[3],
                        KeepAddr: data[4],
                        Unit: data[5],
                        Price: data[6],
                        TotalQty: data[7], 
                        TotalAmount: data[8],
                        Note: data[9]
                    };
                    list.push(obj);
                }
                return list;
            };