本篇文章給大家分享的是有關(guān)bootstrap-table 表格行內(nèi)編輯實現(xiàn)方法，小編覺得挺實用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

創(chuàng)新互聯(lián)建站 - 光華機房服務(wù)器托管，四川服務(wù)器租用，成都服務(wù)器租用，四川網(wǎng)通托管,綿陽服務(wù)器托管，德陽服務(wù)器托管，遂寧服務(wù)器托管，綿陽服務(wù)器托管，四川云主機，成都云主機，西南云主機，光華機房服務(wù)器托管，西南服務(wù)器托管，四川/成都大帶寬，大帶寬服務(wù)器，四川老牌ＩＤＣ服務(wù)商

這篇文章向大家介紹一下如何使用bootstrap table插件實現(xiàn)表格的行內(nèi)編輯功能。

先放一張效果圖：

應(yīng)用場景

之前的項目也是采用bootstrap table，添加和修改數(shù)據(jù)都是通過模態(tài)框來編輯的，后來有了點擊行來編輯和新增的需求，于是乎試試……

html

    

        insertRow
        getTableData
    
    

script

$(function() {
    let $table = $('#table');
    let $button = $('#button');
    let $getTableData = $('#getTableData');

    $button.click(function() {
        $table.bootstrapTable('insertRow', {
            index: 0,
            row: {
                id: '',
                name: '',
                price: ''
            }
        });
    });

    $table.bootstrapTable({
        url: 'data2.json',
        toolbar: '#toolbar',
        clickEdit: true,
        showToggle: true,
        pagination: true,       //顯示分頁條
        showColumns: true,
        showPaginationSwitch: true,     //顯示切換分頁按鈕
        showRefresh: true,      //顯示刷新按鈕
        //clickToSelect: true,  //點擊row選中radio或CheckBox
        columns: [{
            checkbox: true
        }, {
            field: 'id',
            title: 'Item ID'
        }, {
            field: 'name',
            title: 'Item Name'
        }, {
            field: 'price',
            title: 'Item Price'
        }, ],
        /**
         * @param {點擊列的 field 名稱} field
         * @param {點擊列的 value 值} value
         * @param {點擊列的整行數(shù)據(jù)} row
         * @param {td 元素} $element
         */
        onClickCell: function(field, value, row, $element) {
            $element.attr('contenteditable', true);
            $element.blur(function() {
                let index = $element.parent().data('index');
                let tdValue = $element.html();

                saveData(index, field, tdValue);
            })
        }
    });

    $getTableData.click(function() {
        alert(JSON.stringify($table.bootstrapTable('getData')));
    });

    function saveData(index, field, value) {
        $table.bootstrapTable('updateCell', {
            index: index,       //行索引
            field: field,       //列名
            value: value        //cell值
        })
    }

});

實現(xiàn)原理

通過bootstrap table自帶的 onClickCell 方法，點擊 td 添加 contenteditable 屬性(ps: 使元素可編輯),于是 td 元素具有了類似于文本框的 focus 和 blur 事件，用戶點擊 td 獲取焦點，編輯完內(nèi)容失去焦點后，調(diào)用 updateCell方法更新單元格數(shù)據(jù)。

引入

json

[
    { "id": 1, "name": "Item 1", "price": "￥1" },
    { "id": 2, "name": "Item 2", "price": "￥2" },
    { "id": 3, "name": "Item 3", "price": "￥3" }
]

以上就是bootstrap-table 表格行內(nèi)編輯實現(xiàn)方法，小編相信有部分知識點可能是我們?nèi)粘９ぷ鲿姷交蛴玫降?。希望你能通過這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。