bootstrap-table 中怎么實現(xiàn)表格行內(nèi)編輯

這篇文章給大家介紹bootstrap-table 中怎么實現(xiàn)表格行內(nèi)編輯，內(nèi)容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

html

<div class="table-box" style="margin: 20px;">    <div id="toolbar">        <button id="button" class="btn btn-default">insertRow</button>        <button id="getTableData" class="btn btn-default">getTableData</button>    </div>    <table id="table"></table></div>

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ù)。

引入

 <link rel="stylesheet" type="text/css" href="js/bootstrap/bootstrap-3.3.7-dist/css/bootstrap.min.css" />    <link rel="stylesheet" type="text/css" href="js/bootstrap-table/1.12.1/bootstrap-table.min.css" />    <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>    <script src="js/bootstrap/bootstrap-3.3.7-dist/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>    <script src="js/bootstrap-table/1.12.1/bootstrap-table.min.js" type="text/javascript" charset="utf-8"></script>    <script src="js/bootstrap-table/1.12.1/locale/bootstrap-table-zh-CN.min.js" type="text/javascript" charset="utf-8"></script>

json

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

關(guān)于bootstrap-table 中怎么實現(xiàn)表格行內(nèi)編輯就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。