bootstraptable表格可编辑，添加下拉列表，添加行，删

单元格可编辑

columns: [{
  checkbox: true
}, {
    field : 'bqfhbqjhkpsyts',
    title : '本期计划数',
    width : '200',
    editable: {
            type: 'text',
            title: '本期计划数',
            emptytext: '请输入'
 },
}]

另一种写法

{
                field : 'bqjhfhts',
                title : '本期计划数',
                width : '200',
                formatter: function (value, row , index) {
                    return '<input type="text" name="bqjhfhts" value="' + value + '"  onblur="changeBqjhfhts('+ index +', this);" />';
                }
            }
// 失去焦点，更新表格数据
function changeBqjhfhts(index, obj){
        let value = $(obj).val();
        let name = $(obj).attr('name');
        let row = $("#noTable").bootstrapTable('getOptions').data[index];
        row[name] = value;
        //更新指定的行，调用 'updateRow' 则会将 row 数据更新到 data 中，然后再重新加载
        $("#noTable").bootstrapTable('updateRow',{index: index, row: row});
        console.log($("#noTable").bootstrapTable('getData'))
    }
//添加一行数据
// 添加行
    $("#ADD-TR").click(function() {
        let count
        let arr = $("#noTable").bootstrapTable('getData')
        count = arr.length>0?arr.length:0
        console.log('arr', arr)
        let obj={
            'bqjhfhts':'',
            'bqfhbqjhkpsyts':'',
            'contractMainName':'',
            'cunstomerName':'',
            'pmauto':'',
            'csellway':'',
            'productstype':'',
            'isSelfmade':'',
            'zzprdmodel':'',
            'brand':'',
            'classification':'',
            'tenderprice':'',
            'loaningcustomername':'',
            'loaningprice':'',
            'installFee':''
        }
        $('#noTable').bootstrapTable('insertRow', {index:count, row: obj});
    })

如果添加行数据的时候，前面编辑清空，记得在添加的formatter的input里给value绑定值， value="' + value + '"

单元格添加下拉

{
                        field : 'pmauto',
                        title : '回款模式',
                        width : '100',
                        align : 'center',
                        editable: {
                            type: 'select',
                            title: '回款模式',
                            source:[
                                {
                                    value:'1',
                                    text:'先款后货'
                                },
                                {
                                    value:'2',
                                    text:'先货后款'
                                }
                            ],
                            emptytext: '请选择',
                            showbuttons: true,
                                                         value: 1, // 单元格的默认值
                                                        defaultValue: 1, // 下拉框的默认值
                        },
                    },

删除当前行

博客参考链接

• columns部分

{
    field: 'del',
    title: '删除',
    width: 100,
    align: 'center',
    valign: 'middle',
    events:delEvents,
    formatter:delFunction
}

• 删除按钮部分

function delFunction(value,row,index){
        return [
            '<span class="glyphicon glyphicon-trash" id="del_btn">删除</span>'
        ].join('');
    }

• 删除事件

//删除事件
window.delEvents ={
    "click #del_btn":function(e,value,row,index)
    {
        console.log(row);
        //  请求ajax      
    }
}

获取所有表格数据

$("#save").click(function() {
        console.log($("#noTable").bootstrapTable('getData'))
            // 根据索引获取行数据  $("#noTable").bootstrapTable('getData')[index]
    });

获取选中行的表格数据

$("#noTable").bootstrapTable('getSelections');