Implementierung der Bootstrap-Table-Tabellen-Inline-Bearbeitung

In diesem Artikel wird erläutert, wie Sie mit dem Bootstrap-Tabellen-Plug-in die Inline-Bearbeitungsfunktion der Tabelle implementieren.

Empfohlenes Tutorial: Bootstrap-Framework

Erst ein Rendering einfügen:

Anwendungsszenario

Frühere Projekte verwendeten auch Bootstrap-Tabellen. Das Hinzufügen und Ändern von Daten wurde über modale Felder bearbeitet. Ja, später hatte ich das Ich muss auf Zeilen klicken, um sie zu bearbeiten und neue hinzuzufügen, also habe ich es versucht...

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>

Skript

$(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 {点击列的整行数据} 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值
        })
    }

});

Implementierungsprinzip

Bootstrap-Tabelle automatisch verwenden Mit dem Klicken Sie bei der onClickCell-Methode auf „td“, um das Attribut „contenteditable“ hinzuzufügen (ps: Machen Sie das Element bearbeitbar), sodass das td-Element ähnliche Fokus- und Unschärfeereignisse wie das Textfeld aufweist. Der Benutzer klickt auf „td“, um den Fokus zu erhalten. Die updateCell-Methode wird aufgerufen.

Einführung

 <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" }
]

Das obige ist der detaillierte Inhalt vonImplementierung der Bootstrap-Table-Tabellen-Inline-Bearbeitung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!