bootstrap-table 表格行內編輯實現

angryTom
發布: 2020-05-15 09:15:51
原創
12259 人瀏覽過

bootstrap-table 表格行內編輯實現

這篇文章要跟大家介紹如何使用bootstrap table外掛實作表格的行內編輯功能。

推薦教學:Bootstrap框架

#先放一張效果圖:

bootstrap-table 表格行內編輯實現

應用情境 

#之前的專案也是採用bootstrap table,新增和修改資料都是透過模態方塊編輯的,後來有了點選行來編輯和新增的需求,所以乎試試… 

#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 = $(&#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值
        })
    }

});
登入後複製

#實作原理 

透過bootstrap table自帶的onClickCell 方法,點擊td 新增contenteditable 屬性(ps: 讓元素可編輯),於是td 元素具有了類似於文字方塊的focus 和blur 事件,使用者點擊td 取得焦點,編輯完內容失去焦點後,呼叫updateCell方法更新單元格資料。

引入

 <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

##############json################# #
[
    { "id": 1, "name": "Item 1", "price": "¥1" },
    { "id": 2, "name": "Item 2", "price": "¥2" },
    { "id": 3, "name": "Item 3", "price": "¥3" }
]
登入後複製

以上是bootstrap-table 表格行內編輯實現的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板