3

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

http://jsfiddle.net/71na5kne/

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;
    }
}
4

2 回答 2

3

要动态添加行，请使用引导程序的“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
于 2017-10-12T13:24:45.167 回答
2

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

此外，您可以制作数组（用于保存数据）并在添加/删除行后替换数据。

于 2015-02-14T04:53:36.357 回答