Question

我正在使用BootstrapTable插件。我想动态添加和删除一些行。我的问题是，每次添加新行时，在输入中键入一些字符，然后删除一些行，所有数据都会丢失。我做错了什么？示例和底部的小提琴

HTML表格

<div id="modal_toolbar_new" class="btn-group " >
    <button type="button" class="btn btn-default" name="modal new add">
        ADD
    </button>
    <button type="button" class="btn btn-default" name="modal new delete">
        DEL
    </button>

</div>
<table id="table_new"
class="table table-condensed table-hover table-striped" 
name="new"
data-toolbar="#modal_toolbar_new"
data-sortable="true"
data-toggle="table"
data-show-toggle="true"
data-show-columns="true"
data-height="350"
data-search="true"
>
    <thead>
        <tr>
            <th data-field="state" data-checkbox="true" data-formatter="stateFormatter"></th>
            <th data-sortable="true" data-field="outage_id">ID</th>
            <th data-sortable="true" data-field="system_code">System</th>
            <th data-sortable="true" data-field="type">Type</th>
        </tr>
    </thead>

的Javascript

 var selected = {
    new: []
};
$(function() {

    $("button[name='modal new delete']").click(function() {
        $('#table_new').bootstrapTable('remove', {
            field: 'id',
            values: selected.new
        });
        selected.new = [];
    });


    $("button[name='modal new add']").click(function() {
        var randomId = Number(new Date());

        $('#table_new').bootstrapTable('insertRow', {index: 1, row: {
                id          : randomId,
                outage_id   : '<input type="text" class="form-control" name="outage_id" value="change this value, next delete one row'+randomId+'"/>',
                system_code : '<select class="form-control" name="system_code"><option value=""></option></select>',
                type : '<input type="checkbox" name="dotyczy_atv"/>'
            }
        });

    });

  /* click input actions */    
    $('.table').on('check.bs.table', function(e, name, args) {
        setSelectedItems($(this).attr('id'), $(this).attr('name'));
    });
    $('.table').on('uncheck.bs.table', function(e, name, args) {
        setSelectedItems($(this).attr('id'), $(this).attr('name'));
    });

    $('.table').on('check-all.bs.table', function(e, name, args) {
        setSelectedItems($(this).attr('id'), $(this).attr('name'));
    });
    $('.table').on('uncheck-all.bs.table', function(e, name, args) {
        setSelectedItems($(this).attr('id'), $(this).attr('name'));
    });

    });

function setSelectedItems(id, name) {

    switch( id ) {
        case 'new':
            selected.new = [];
            $($('#table_new').bootstrapTable('getSelections')).each(function(index) {
                selected[name].push(this.id);
            });   
            break;
        default:            
            selected[name] = [];
            $($('#' + id).bootstrapTable('getSelections')).each(function(index) {
                selected[name].push(this.id);
            });            
            break;
    }
}

Answer 1

要动态添加行，请使用bootstrap的“insertRow”选项：

 var rowId = $("#tableName >tbody >tr").length;
        rowId = rowId + 1;
        console.log("RowId is "+rowId);
        $('#tableName').bootstrapTable('insertRow',{
            index: rowId,
            row: myList[0] //myList is an array containing json data in each row
        });

要动态删除行，可以直接使用jquery：

$("#tableName tr:eq("+delrowId+")").remove(); //to delete row 'i', delrowId should be i+1

Answer 2

添加和编辑新行时，必须在服务器上保存数据（可以使用$(document).on('change', 'input', function(){ $.ajax(... send to server and refresh table ... ) })）。删除行时刷新服务器上的表和数据。

此外，您可以在添加/删除行之后创建数组（用于保存数据）和替换数据。

BootstrapTable - 动态添加和删除行

2 个答案: