bootstrapTable新增行，删除行

 

bootstrapTable表

 $('#exampleTable').bootstrapTable(
            {
                method: 'post', // 服务器数据的请求方式 get or post
                url: prefix + "/list", // 服务器数据的加载地址
                //	showRefresh : true,
                //	showToggle : true,
                //	showColumns : true,
                iconSize: 'outline',
                toolbar: '#exampleToolbar',
                striped: true, // 设置为true会有隔行变色效果
                dataType: "json", // 服务器返回的数据类型
                pagination: false, // 设置为true会在底部显示分页条
                uniqueId: 'index', //将index列设为唯一索引
                // queryParamsType : "limit",
                // //设置为limit则会发送符合RESTFull格式的参数
                singleSelect: false, // 设置为true将禁止多选
                 contentType : "application/x-www-form-urlencoded",
                // //发送到服务器的数据编码类型
                pageSize: 200, // 如果设置了分页，每页数据条数
                pageNumber: 1, // 如果设置了分布，首页页码
                //search : true, // 是否显示搜索框
                showColumns: false, // 是否显示内容下拉框（选择显示的列）
                sidePagination: "server", // 设置在哪里进行分页，可选值为"client" 或者 "server"
                height:350,
                queryParams: function (params) {
                    return {
                        //说明：传入后台的参数包括offset开始索引，limit步长，sort排序列，order：desc或者,以及所有列的键值对
                        limit: params.limit,
                        offset: params.offset,
                        nodeId:$("#nodeId").val(),
                        queryBtn: $("#queryBtn").val(),
                        thisNodeVal: parent.$("input[data-attribute='"+$("#dataAtt").val()+"']").val(),
                        name:$('#searchName').val(),//查询的值
                        typeModel:$("#typeModel").val() //判断是模型还是任务
                    };
                },
                // //请求服务器数据时，你可以通过重写参数的方式添加一些额外的参数，例如 toolbar 中的参数 如果
                // queryParamsType = 'limit' ,返回参数必须包含
                // limit, offset, search, sort, order 否则, 需要包含:
                // pageSize, pageNumber, searchText, sortName,
                // sortOrder.
                // 返回false将会终止请求
                columns: [
                    {
                        checkbox: true
                    },
                    {
                        field: 'index',
                        title: '序列',
                        formatter:function(value, row, index) {
                            return row.index = index+1; //返回行号
                        }
                    },

                    {
                        field: 'cloumId',
                        title: '物理位置'
                    },
                    {
                        field: 'description',
                        title: '名称',
                        formatter: function(value,row,index){
                            var  result ="<input id='"+index+"decription' data-placeholder='名称'" +
                                "class='form-control' "+(row.flag=='1'?'':'readonly')+"  value='"+(value==undefined?'':value)+"' onblur='getValues("+index+")'>";
                            return result
                        }
                    },
                    {
                        field: 'typeName',
                        title: '字段类型',
                        formatter: function(value,row,index){
                            var result="";
                            result+="<select id='"+index+"' data-placeholder='字段类型'" +
                                "class='form-control chosen-select' tabindex='2'  onchange='typeChange("+index+")'>";
                            for(var i=0;i<selectType.length;i++){
                                if(value==selectType[i]){
                                    result+="<option value='"+selectType[i]+"' selected = 'selected' >"+selectType[i]+"</option>";
                                }else{
                                    result+="<option value='"+selectType[i]+"'>"+selectType[i]+"</option>";
                                }
                            }
                            result+="</select>";
                            return result
                        }
                    },
                    {
                        field: 'operationType',
                        title: '运算类型',
                        formatter: function(value,row,index){
                            var result="";
                            result+="<select id='"+index+"operationType' data-placeholder='运算类型'" +
                                "class='form-control chosen-select' tabindex='2'  onchange='typeChange("+index+")'>";
                            for(var i=0;i<selectOperationType.length;i++){
                                if(value==selectOperationType[i].value){
                                    result+="<option value='"+selectOperationType[i].value+"' selected = 'selected' >"+selectOperationType[i].name+"</option>";
                                }else{
                                    result+="<option value='"+selectOperationType[i].value+"'>"+selectOperationType[i].name+"</option>";
                                }
                            }
                            result+="</select>";
                            return result
                        }
                    },
                    {
                        field: 'name',
                        title: '编码',
                        formatter: function(value,row,index){
                            var  result ="<input id='"+index+"name' data-placeholder='编码'" +
                                "class='form-control'  value='"+(value==undefined?'':value)+"' onblur='getValues("+index+")'>";
                            return result
                        }
                    },
                    {
                        field: 'nullable',
                        title: '允许为空',
                        formatter: function(value,row,index){
                            var result="";
                            result+="<select id='"+index+"nullable' data-placeholder='允许为空'" +
                                "class='form-control chosen-select' tabindex='2'  onchange='typeChange("+index+")'>";
                            if (value==null) {
                                value = "1";
                            }
                            for(var i=0;i<selectNullable.length;i++) {
                                if (value == selectNullable[i].value) {
                                    result += "<option value='"+selectNullable[i].value+"' selected = 'selected' >"+selectNullable[i].bieName+"</option>";
                                } else {
                                    result += "<option value='"+selectNullable[i].value+"'>"+selectNullable[i].bieName+"</option>";
                                }
                            }
                            result+="</select>";
                            return result
                        }
                    },

                    {
                        title: '操作',
                        field: 'ruleText',
                        align: 'center',
                        formatter: function (value, row, index) {
                            var val="<input id='"+index+"ruleText' data-placeholder='配置规则'  class='form-control' type='hidden' value='"+(value==undefined?'':value)+"'>";
                            var e = '<a class="btn btn-primary btn-sm " href="#" mce_href="#" title="配置规则" onclick="edit(\'' + $("#nodeId").val() + '\',\'' + index +"ruleText"+ '\' ,\'' +$("#typeModel").val()+ '\' )"><i class="fa fa-edit"></i></a> ';
                            return e+ val;
                        }
                    }
                    ]
            });

下拉框

function typeChange(index){
    var rows = $('#exampleTable').bootstrapTable('getData');
    $.each(rows, function (i, row) {
        if(row.index==(index+1)){
            row.typeName=$("#"+index).val();
            row.operationType=$("#"+index+"operationType").val();
            row.nullable=$("#"+index+"nullable").val();
            $('#exampleTable').bootstrapTable('updateRow',row);
            return false;
        }
    });
}

function getValues(index){
    var rows = $('#exampleTable').bootstrapTable('getData');
    $.each(rows, function (i, row) {
        if(row.index==(index+1)){
              row.name=$("#"+index+"name").val();
              row.description=$("#"+index+"description").val();
            $('#exampleTable').bootstrapTable('updateRow',row);
            return false;
        }
    });
}

新增行

function addRow(){
    var row=
    {
        "cloumId":"",
        "description":"",
        "typeName":"",
        "operationType":"",
        "name":"",
        "remarks":"",
        "flag":"1",
        "ruleText":"",
        "nullable":"1"
    };
    //append  追加到最后一行
    //prepend  新增到第一行
    $('#exampleTable').bootstrapTable('append', row);
    //更新行数据
    $('#exampleTable').bootstrapTable('updateRow',row);
    //定位到最后一行
    $('#exampleTable').bootstrapTable('scrollTo', 'bottom');
}

效果：

选择多条删除：

function remove(){
    var rows = $('#exampleTable').bootstrapTable('getSelections');//获取选中行
    if (rows.length == 0) {
        layer.msg("请选择要删除的数据");
        return;
    }
    var indexs=[];
    for(var i=0;i<rows.length;i++){
        indexs[i]=rows[i].index;
    }
//删除
    $('#exampleTable').bootstrapTable('remove', {
        field:'index',
        values:indexs
    });
    
}