http://www.pays06.com

                                                                  【大发游戏】bootstrap-table 表格行内编辑实现-Bootstrap教程

                                                                  这篇文章向大家介绍一下如何使用bootstrap table插件实现表格的行内编辑功能。

                                                                  推荐教程:Bootstrap图文教程

                                                                  先放一张效果图:

                                                                  bootstrap71.gif

                                                                  应用场景

                                                                  之前的项目也是采用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 = $('#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 saveDat,a(index, field, value) {        $table.bootstrapTable('updateCell', {            index: index,       //行索引            field: field,       //列名            value: value        //cell值        })    }});
                                                                                  

                                                                  郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。

                                                                  上一篇:苹果发布macOS Catalina开发者预览版Beta 6 - 苹果
                                                                  下一篇:没有了