Bootstrap Table批量添加，删除行

原创于 2021-08-29 21:02:44 发布 · 1.8k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap #javascript #html

笔记专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了如何在Bootstrap Table中实现批量添加和删除行的功能，通过JavaScript和HTML的结合，实现高效且用户友好的数据操作体验。

Bootstrap Table批量添加，删除行

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css">
    <link rel="stylesheet"href="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.css">

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

    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.js"></script>

js部分

$(function() {`在这里插入代码片`
    let $table = $('#table');
    let $button = $('#add');
    let $remove = $('#remove');
    let $getTableData = $('#getTableData');
    //第N个的idx是N
    $button.click(function() {
        add()
    });

function add(){
    //获取选中的data
    //JSON.stringify($table.bootstrapTable('getData'))
    let count=$table.bootstrapTable('getData').length;
    $table.bootstrapTable('insertRow', {
        index: count,
        row: {
            id: count,
            name2: '',
            price2: ''
        }
    });
}
function remove(){
    var rows = $('#table').bootstrapTable('getSelections');//获取选中行
    if (rows.length == 0) {
        alert("请选择要删除的数据");
        return;
    }
    var indexs=[];//获取选中的数组
    for(var i=0;i<rows.length;i++){
        indexs[i]=rows[i].id;
    }
    console.log(rows,indexs)
    //删除
    $('#table').bootstrapTable('remove', {
        field:'id',
        values:indexs
    });
}
    $remove.click(function() {
        console.log(111)
        remove();
    });
  
    $table.bootstrapTable({
        url: '/',
        clickEdit: true,
        columns: [{
            checkbox: true
        }, {
            field: 'id',
            title: 'Item ID',
            visible:false//添加隐藏列
        }, {
            field: 'name2',
            title: 'Item Name'
        }, {
            field: 'price2',
            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);
            })
        },onCheck:function(row,$element){//获取选中时的row
            console.log(row,$element)
            index = $element.data('index');
            console.log(index)
        },onUncheck:function(row,$element){
            console.log('del',row,$element)
            index = $element.data('index');
            console.log('del',index)
        },onLoadSuccess(){
            console.log(33333)
            add()
        },onLoadError(){
            console.log(33333)
            add()
        },onCallback(){
            console.log(2222222)
            add()
        },onErrorCallback(){
            console.log(1111111111)
            add()
        }
    });
    add()//不走ajax的话
    function saveData(index, field, value) {
        $table.bootstrapTable('updateCell', {
            index: index,       //行索引
            field: field,       //列名
            value: value        //cell值
        })
    }

});