bootstrap-table动态增删行 编辑表格

效果图：

 

本文不是使用bootstrap-table-editable.js 拓展插件实现， 结合各个博客文章综合出的效果

html

    

    
    

        添加联系人
            
        
    
    
    

        保存
        取消
    

js

function addRow() {
    debugger
    $('#dataTable').bootstrapTable('insertRow', {
        index: 0,
        row: {
            'id': '',
            'name': '',
            'isCommon': '',
            'relation': '',
            'phone': '',
            'idCard': '',
            'content': '',
            'operation': '',
            'updateTime': ''
        }
    });
    /* $('#subprocessTable').bootstrapTable('selectPage', 1); //Jump to the first page
     var data = {actionId: '', actionName: '',category:'', description: ''}; //define a new row data，certainly it's empty

     $('#subprocessTable').bootstrapTable('prepend', data); //the method of prepend must defined all fields，but append needn't
     //$('#dataTable').bootstrapTable('append',data);

     $("#dataTable tr:eq(1) td:eq(0)").trigger("dblclick");
     $("#dataTable input")[0].focus();*/

}

$(function () {
    $("#dataTable").bootstrapTable({
        method: "GET",
        url: CUR_PATH + "/riskOrder/queryCallRecord/" + $("#orderId").val(),
        clickToSelect: true,
        cache: false,
        striped: true,
        pagination: false,
        pageSize: 10,
        pageNumber: 1,
        pageList: [10, 20, 30, 50],
        search: false,
        sidePagination: 'client',
        silent: true,
        singleSelect: true, // 单选checkbox
        undefinedText: '',
        columns: [
            // {checkbox: true},
            /*{field: 'id', title: '序号',edit:true,formatter:function(value, row, index){
                    return row.index=index+1 ; //返回行号
                }},*/
            {field: 'id', title: '序号', visible: false},
            {field: 'name', title: '姓名', align: 'center'},
            {field: 'isCommon', title: '是否共借人', align: 'center', formatter: isCommonSelect},
            {field: 'relation', title: '与申请人关系', align: 'center', formatter: relationSelect},
            {field: 'phone', title: '手机号', align: 'center'},
            {field: 'idCard', title: '身份证号', align: 'center'},
            {field: 'content', title: '电核记录', align: 'center'},
            /* {field: 'operation', title: '操作',formatter:function(value,row,index){
                      var strHtml ='
'+
                         '
';
                     return strHtml;
                 },edit:false},*/
            {
                field: 'operation',
                title: '操作',
                align: 'center',
                formatter: actionFormatter
            },
            {field: 'updateTime', title: '操作时间', align: 'center'}
        ],
            onDblClickCell: function (field, value, row, $element) {
                if ("1" == row.type) {
                    if (field == 'content') {
                        let index = $element.parent().data('index');
                        if(isNotBlank(value)){
                            $element[0].innerHTML = "";
                        }else {
                            $element[0].innerHTML = "";
                        }
                        $("#inputCell").blur(function () {
                            var newValue = $("#inputCell").val();
                            row[field] = newValue;
                            $(this).remove();
                            $('#dataTable').bootstrapTable('updateCell', {
                                index: index,
                                field: field,
                                value: newValue
                            });
                        })
                    }
                    return;
                }
                $element.attr('contenteditable', true);
                $element.blur(function () {
                    let index = $element.parent().data('index');
                    let tdValue = $element.html();
                    $("#dataTable").bootstrapTable('updateCell', {
                        index: index,       //行索引
                        field: field,       //列名
                        value: tdValue        //cell值
                    })
                })
            }
    });
});

function relationSelect(value, row, index) {
    var strHtml = "";
    $.ajax({
        type: "GET",
        dataType: "JSON",
        async: false,
        url: CUR_PATH + "/riskOrder/queryParam/",
        success: function (result) {
            strHtml += " ";
            strHtml += "请选择";
            $.each(result, function (key, obj) {
                if (value == key) {
                    strHtml += "" + obj + "";
                } else {
                    strHtml += "" + obj + "";
                }
            });
            strHtml += "";
        }
    });
    return strHtml

}

function relationSelectChange(value, lineIdx) {
    // 判断哪个被选中
    $('#dataTable').bootstrapTable('updateCell', {
        index: lineIdx,
        field: 'relation',
        value: value
    })

};
var isCommonSelect = function (value, row, index) {
    var is_common_true = "";
    var is_common_false = "";
    var strHtml = "";
    if (value === "1") {
        is_common_true = 'selected';
    } else if (value === "0") {
        is_common_false = 'selected';
    }
/* 1不可编辑 */
    if ("1" == row.type) {
        strHtml += " ";
    } else {
        strHtml += " ";
    }
    strHtml += " 请选择";
    strHtml += "是";
    strHtml += "否";
    return strHtml;
}


$(function () {
    $("#dataTable").on('load-success.bs.table', function (data) {
        // $(".selectpicker").find("option[value='2']").attr("selected",true);
        /*$('.selectpicker').selectpicker({ // 个性化设置
            style: 'btn',
            size: 'auto'
        });*/
    });
});

function selectChange(value, lineIdx) {
    // 判断哪个被选中
    $('#dataTable').bootstrapTable('updateCell', {
        index: lineIdx,
        field: 'isCommon',
        value: value
    })

};


function actionFormatter(value, row, index) {
    var result = "";
    result += "";
    result +=  '';
    return result;
}

function removeData(id, index) {
    if (isNotBlank(id)) {
        modalConfirm("提示信息", "确认删除吗?", function () {
            $.ajax({
                type: "GET",
                dataType: "JSON",
                async: false,
                url: CUR_PATH + "/riskOrder/deleteContact/" + id,
                success: function (result) {
                    showMsg(result.resData);
                    $("#basicModal").modal('hide');
                    if (result.resCode == "0000") {
                        $("#dataTable").bootstrapTable("refresh");
                    }
                }
            });
        });
    } else {
        var length = $('#dataTable').bootstrapTable('getData').length;
        if (length > 1) {//保留一行数据
            $('#bootstrap-table').bootstrapTable('remove', {
                field: 'index',
                values: [parseInt(length) - 1]
            })
        }
    }
}

function baiduSearch(value) {
    var urlStr = 'https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=0&rsv_idx=1&tn=baidu&wd=' + value;
    window.open(urlStr, '_blank', '');
}


$("#btn_reset").click(function () {
    $("#dataTable").bootstrapTable("refresh");
});


$("#btn_save").click(function () {
    modalConfirm("提示信息", "确定保存?", function () {
        //关闭提示框
        $("#basicModal").modal('hide');
        // alert(JSON.stringify($("#dataTable").bootstrapTable('getData')));
        var value = $("#dataTable").bootstrapTable('getData');
        $.ajax({
            type: "POST",
            data: JSON.stringify(value),
            contentType: "application/json",
            dataType: "JSON",
            url: CUR_PATH + "/riskOrder/batchSaveContacts/" + $("#orderId").val(),
            success: function (data) {
                if ("200" == data.resCode) {
                    $("#dataTable").bootstrapTable("refresh");
                }
            }
        });
    });
});

包括行编辑回显 及下拉框实现 后端代码就省略了 很简单。

ps:一名爱打dota的小菜鸡