Maison > interface Web > Tutoriel d'amorçage > implémentation de l'édition en ligne de la table bootstrap-table

implémentation de l'édition en ligne de la table bootstrap-table

angryTom
Libérer: 2020-05-15 09:15:51
original
12273 Les gens l'ont consulté

implémentation de l'édition en ligne de la table bootstrap-table

Cet article explique comment utiliser le plug-in de table bootstrap pour implémenter la fonction d'édition en ligne de la table.

Tutoriel recommandé : Framework Bootstrap

Mettez d'abord un rendu :

implémentation de lédition en ligne de la table bootstrap-table

Scénario d'application

Les projets précédents utilisaient également une table bootstrap, l'ajout et la modification de données étaient modifiés via des boîtes modales Oui, plus tard, j'ai eu le je dois cliquer sur les lignes pour en modifier et en ajouter de nouvelles, alors j'ai essayé...

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>
Copier après la connexion

script

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

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

    $table.bootstrapTable({
        url: &#39;data2.json&#39;,
        toolbar: &#39;#toolbar&#39;,
        clickEdit: true,
        showToggle: true,
        pagination: true,       //显示分页条
        showColumns: true,
        showPaginationSwitch: true,     //显示切换分页按钮
        showRefresh: true,      //显示刷新按钮
        //clickToSelect: true,  //点击row选中radio或CheckBox
        columns: [{
            checkbox: true
        }, {
            field: &#39;id&#39;,
            title: &#39;Item ID&#39;
        }, {
            field: &#39;name&#39;,
            title: &#39;Item Name&#39;
        }, {
            field: &#39;price&#39;,
            title: &#39;Item Price&#39;
        }, ],
        /**
         * @param {点击列的 field 名称} field
         * @param {点击列的 value 值} value
         * @param {点击列的整行数据} row
         * @param {td 元素} $element
         */
        onClickCell: function(field, value, row, $element) {
            $element.attr(&#39;contenteditable&#39;, true);
            $element.blur(function() {
                let index = $element.parent().data(&#39;index&#39;);
                let tdValue = $element.html();

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

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

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

});
Copier après la connexion

Principe d'implémentation

Utiliser automatiquement la table bootstrap Avec le méthode onClickCell, cliquez sur td pour ajouter l'attribut contenteditable (ps : rendre l'élément modifiable), de sorte que l'élément td ait des événements de focus et de flou similaires à la zone de texte. L'utilisateur clique sur td pour obtenir le focus. la méthode updateCell est appelée. Mettre à jour les données de la cellule.

Introduction

 <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>
Copier après la connexion

json

[
    { "id": 1, "name": "Item 1", "price": "¥1" },
    { "id": 2, "name": "Item 2", "price": "¥2" },
    { "id": 3, "name": "Item 3", "price": "¥3" }
]
Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal