bootsrap table动态添加数据的实现

<div style="width:75%;margin-left:16.5%">
     <div class="columns pull-left">
          <button id="add" type="button" class="btn  btn-primary">
              <i class="fa fa-plus" aria-hidden="true"></i>添加
          </button>
          <button  id="del" type="button" class="btn  btn-danger">
              <i class="fa fa-trash" aria-hidden="true"></i>删除
          </button>
         <button  id="save" type="button" class="btn  btn-primary">
              <i class="fa fa-save" aria-hidden="true"></i>保存
         </button>
    </div>
    <table id="table"></table>
</div>

ji代码

var instrumentId = '[[${instrumentInfoDO.instrumentId}]]';
        var instrumentName = '[[${instrumentInfoDO.instrumentName}]]';
        function saveStTime(index, obj){
            var value = $(obj).val();
            $("#table").bootstrapTable('updateCell',{
                index: index,
                field: 'stTime',
                value: value
            });
        }
        function saveEndTime(index, obj){
            var value = $(obj).val();
            $("#table").bootstrapTable('updateCell',{
                index: index,
                field: 'edTime',
                value: value
            });
        }
        $("#save").click(function() {
            var info = $("#table").bootstrapTable('getData');
            var data = { instrumentId: instrumentId,timeSetList: []};
            for (var i = 0; i < info.length; i++) {
                var timeSet = new Object();
                timeSet.stTime = info[i].stTime;
                timeSet.edTime = info[i].edTime;
                data.timeSetList.push(timeSet);
            }
            var jsonString = JSON.stringify(data);
            $("#timeSetList").val(jsonString);
            save();
        })

        $(function() {
            var $table = $('#table');
            var $add = $('#add');
            var $remove = $('#del');
            $table.bootstrapTable({
                url: 'data2.json',
                toolbar: '#toolbar',
                clickEdit: true,
                showToggle: false,
                pagination: false,       //显示分页条
                showColumns: false,
                showPaginationSwitch: false,     //显示切换分页按钮
                showRefresh: false,      //显示刷新按钮
                uniqueId: "ID",
                strictSearch: false,
                //clickToSelect: true,  //点击row选中radio或CheckBox
                columns: [{
                    checkbox: true,
                    width: '2%'
                }, {
                    field: 'instrumentId',
                    title: '仪器id',
                    formatter: function (value, row, index) {
                        return instrumentId
                    },
                    width: '10%',
                    visible: false
                },{
                    field: 'instrumentName',
                    title: '仪器',
                    formatter: function (value, row, index) {
                        return instrumentName
                    },
                    width: '10%'
                },{
                    field: 'stTime',
                    title: '开始时间',
                    formatter: function (value, row, index) {
                        return "<input type='time' class='input-sm form-control' id='stTime"+index+"' value='"+value+"' autocomplete='off' onblur='saveStTime("+ index +", this)' placeholder='请输入开始时间'/>";
                    },
                    width: '10%'
                }, {
                    field: 'edTime',
                    title: '结束时间',
                    width: '5%',
                    formatter: function (value, row, index) {
                        return "<input type='time' class='input-sm form-control' id='edTime"+index+"' value='"+value+"' autocomplete='off' onblur='saveEndTime("+ index +", this)' placeholder='请输入结束时间'/>";
                    },
                }],
                onClickCell: function(field, value, row, $element) {
                    $element.attr('contenteditable', true);
                    $element.blur(function() {
                        var index = $element.parent().data('index');
                        var tdValue = $element.html();
                        saveData(index, field, tdValue);
                    })
                }
            });

            function saveData(index, field, value) {
                $table.bootstrapTable('updateCell', {
                    index: index,       //行索引
                    field: field,       //列名
                    value: value        //cell值
                })
            }

            $remove.click(function () {
                var ids = $.map($table.bootstrapTable('getSelections'), function (row) {
                    return row.id;
                });
                $table.bootstrapTable('remove', {
                    field: 'id',
                    values: ids
                });
            });

            $add.click(function () {
                var index = $table.bootstrapTable('getData').length;
                $table.bootstrapTable('insertRow', {
                    index: index,
                    row: {
                        id:index,
                        instrumentId: instrumentId,
                        instrumentName: instrumentName,
                        stTime: '',
                        edTime: ''
                    }
                });
            });

        });