Bootstrap中直接錄入表格行數(shù)據(jù)的方法

這篇文章給大家分享的是有關(guān)Bootstrap中直接錄入表格行數(shù)據(jù)的方法的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

網(wǎng)站建設(shè)哪家好，找成都創(chuàng)新互聯(lián)公司！專注于網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、微信小程序開發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了和布克賽爾蒙古免費建站歡迎大家使用！

具體內(nèi)容如下：

1、直接錄入數(shù)據(jù)的界面分析

在之前介紹的數(shù)據(jù)直接錄入處理的時候，界面效果如下所示。

上面的界面處理明細(xì)數(shù)據(jù)的時候，可以直接使用新增記錄，直接在錄入框中輸入數(shù)據(jù)，然后保存起來，保存后數(shù)據(jù)變?yōu)橹蛔x，如果需要修改，還可以單擊編輯按鈕進(jìn)行修改。

而這些明細(xì)的數(shù)據(jù)，也僅僅存在JS的對象里面，還沒有保存到后臺數(shù)據(jù)庫中，我們可以在最后保存（如上界面的確定按鈕）處理中再獲取全部添加的數(shù)據(jù)進(jìn)行提交即可。

以上的明細(xì)數(shù)據(jù)錄入，只是提供了一些基本的輸入控件進(jìn)行輸入，沒有進(jìn)行過多的定制處理，而往往使用的時候，我們發(fā)現(xiàn)，有些數(shù)據(jù)是需要下拉列表的，有些是需要使用日期選擇的等等，那么我們就需要考慮更深層次的控件顯示問題了。

如我們要實現(xiàn)更豐富的效果處理，甚至包括一些控件之間的聯(lián)動的處理，那么我們應(yīng)該如何操作呢？

下拉列表，動態(tài)數(shù)據(jù)界面展示

日期輸入框顯示

以上一些是我們常規(guī)的錄入方式，對于有一些比較多樣化的操作，我們盡可能為用戶提供方便，提供下拉控件給用戶選擇，畢竟選擇比錄入更加方便、規(guī)范化。

如可以在復(fù)雜界面中，使用彈出層進(jìn)行查詢選擇

如部門和用戶之間的數(shù)據(jù)聯(lián)動效果如下所示。

以上種種效果，能夠滿足我們常規(guī)的數(shù)據(jù)選擇錄入的方便，從而方便客戶直接錄入數(shù)據(jù)處理。

2、直接錄入數(shù)據(jù)的控件初始化

我們從上文可以了解到，對于新增一套記錄，就是動態(tài)構(gòu)建一些HTML的控件，然后進(jìn)行初始化即可，如對于這個下拉列表的界面效果。

它的實現(xiàn)主要就是在編輯或者新增的時候，對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>';

        //綁定數(shù)據(jù)字典，并更新值
        BindDictItem("txtFeeType", "費用類型", function () {
            $("#txtFeeType").val(feeType).trigger("change");
        });
        //初始化日期控件
        $("#txtOccurTime").datepicker({
            language: 'zh-CN', //語言
            autoclose: true, //選擇后自動關(guān)閉
            clearBtn: true,//清除按鈕
            format: "yyyy-mm-dd"//日期格式
        });
    }

我們可以在下拉列表的時候，使用select2插件，通過BindDictItem的通用JS函數(shù)，可以綁定數(shù)據(jù)庫的字典類型，并通過記錄對應(yīng)列的值，可以給該控件進(jìn)行賦值。

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

由于每個控件都有一個對應(yīng)的ID，那么我們使用它們的時候，就很方便，如初始化日期插件，可以使用DateTime Picker插件進(jìn)行處理。

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

最終達(dá)到了日期選擇效果。

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

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

也就是為這個控件增加onclick函數(shù)，在選擇單擊輸入的時候，彈出一個層進(jìn)行處理即可。而這個獨立的通用層，則使用一個單獨的視圖，在頁面里面引用即可，提高重用性。

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

而通過在頁面里面處理返回結(jié)果，則可以實現(xiàn)主界面內(nèi)容控件的更新。

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

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

    //留給調(diào)用的界面實現(xiàn)這個函數(shù)，實現(xiàn)數(shù)據(jù)的返回出來
    ProcAssetJson = json;
    OnSelectAsset(json);
}

而選擇后，可以對控件內(nèi)容以及關(guān)聯(lián)的數(shù)據(jù)進(jìn)行動態(tài)更新。

//選擇資產(chǎn)后調(diào)用
        function OnSelectAsset(json) {
            ProcAssetJson = json;//存儲到ProcAssetJson，方便下次打開界面初始化數(shù)據(jù)
            if (json != '') {
                var dict = JSON.parse(json);
                if (dict != null) {
                    for (var key in dict) {
                        var display = dict[key];
                        assetInput.val(display);

                        //更新數(shù)據(jù)
                        $.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);
                            }
                        });
                    };
                }
            }
        }

下面就是彈出界面層，并提供用戶選擇內(nèi)容的界面

對于部門和用戶之間的數(shù)據(jù)聯(lián)動的處理，也是通過Select2控件的聯(lián)動更新處理實現(xiàn)的。以下是Select2聯(lián)動處理腳本，可以實現(xiàn)多個控件之間的聯(lián)動操作

//部門編號后，用戶列表編號
$("#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開頭，那么我們通過這個約定規(guī)則動態(tài)獲取控件的值也是很方便的，這樣為我們保存控件的數(shù)據(jù)提供很好的便捷處理。

//保存行數(shù)據(jù)，切換到普通模式
var inputLength = 10;//輸入的字段數(shù)
function saveRow(oTable, nRow) {
    //var jqInputs = $('input', nRow);
    var jqInputs = $("[id^='txt']", nRow);//id以txt開始([id^='txt']), id以txt結(jié)束([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();
}

我們?nèi)绻枰４鏀?shù)據(jù)到數(shù)據(jù)庫里面，那么就需要先構(gòu)建好對應(yīng)的JS數(shù)據(jù)對象，然后調(diào)用ajax進(jìn)行數(shù)據(jù)的提交處理。構(gòu)建JS數(shù)據(jù)對象如下代碼所示（根據(jù)自己所需定制數(shù)據(jù)內(nèi)容）。

//獲取表格的數(shù)據(jù)，并返回對象列表
            function GetData() {
                var list = [];
                var trs = table.fnGetNodes();
                for (var i = 0; i < trs.length; i++) {
                    var data = table.fnGetData(trs[i]);//獲取指定行的數(shù)據(jù)

                    //構(gòu)建對象
                    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;
            };

感謝各位的閱讀！關(guān)于“Bootstrap中直接錄入表格行數(shù)據(jù)的方法”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

當(dāng)前題目：Bootstrap中直接錄入表格行數(shù)據(jù)的方法
分享網(wǎng)址：http://bm7419.com/article20/ipdsco.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信小程序、網(wǎng)頁設(shè)計公司、網(wǎng)站制作、全網(wǎng)營銷推廣、建站公司、網(wǎng)站營銷

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)