bootstrap-table（六）行内编辑（非官方）

大致效果

声明：因为这个我自己没有mock数据，所以其实效果是没那么真实的，但是基本上的逻辑功能我算是理清了的，我自己项目上用的，但是我把这些都删掉了，自己再写了个demo的。请需要更复杂逻辑的自行摸索实现。手动狗头

代码

准备工作——把表格数据显示出来

let data = [{
        id: 1,
        name: '张三',
        title: '部长'
   },
    {
        id: 2,
        name: '张三',
        title: '部长'
    },
    {
        id: 3,
        name: '张三',
        title: '部长'
    },
    {
        id: 4,
        name: '张三',
        title: '部长'
    }
]
$('#table').bootstrapTable({
    url: '',
    data: data,
    striped: true,
    columns: [{
    title: '序号',
    width: '50',
    align: 'center',
    formatter: function (value, row, inddex) {//序号
        var index = index + 1;
        return` <span class = "weight" > ${index} </span>`
    }, {
        title: '姓名',
        field: 'name',
        class: 'editable' // 给需要编辑的字段加上class
    },
    {
        title: '职位',
        field: 'name',
        class: 'editable' //给需要编辑的字段加上class
    },
    {
        title: '操作',
        field: 'operate',
        class: 'editOperate',
        formatter: formatterOperate
    }]
});
//格式化操作
function formatterOperate(value, row, index) {
	return`
		<button onclick = 'addRow()'class = 'btn small' > 新增 < /button>
		<button onclick='editRow(${index})' class='btn small blue'> 编辑</button > 
		<button onclick = 'delRow(${row.id})'class = 'btn small red' > 删除 < /button>
	`;
}

具体操作——方法

// 新增行和编辑行时右侧操作改为保存和取消
let editFormatter = ` 
	<button onclick = 'saveRow(this)' class = 'btn small' > 保存 < /button>
    <button onclick='cancleRow(this)' class='btn small'>取消</button > 
` 
function refreshTable() { //静默刷新
   $('#tableContact').bootstrapTable('refresh', {
       silent: true,
       url: '',
       query: ''
   })
        addKey = true
    }
//是否允许新增行（如果存在一行是新增并且没有保存）
let addKey = true;

//新增一行
function addRow() {
    if (!addKey) return;
    addKey = false;
    var data = {
        name: '',
        title: ''

    };
    $("#table").bootstrapTable('append', data);
    $("#table tr:last-child td.editable").each(function () {
        $(this).html("<input>");
    });
    $("#table tr:last-child td.editOperate").html(editFormatter)
}

//保存数据
function saveRow(ele) {
	let obj = $(ele).parent().parent(); //获取tr的dom
	let saveKey = true; //是否允许保存
	let edit = obj.attr('data-edit') ? true : false; //是编辑还是添加
	let arrVal = []; //保存填入的数据
	obj.find('td.editable').each(function (index) {
	    let val = $(this).find('input').val().trim();
	    if (index < 1 && !val) saveKey = false; //姓名不能为空，否则不允许保存
	    arrVal.push(val)
	})
	if (!saveKey) {
	    console.log('姓名不能为空')
	    return;
	}
	let[name, title] = arrVal;
	let query;
	if (edit) { //修改编辑
	    let id = obj.find('td.contactId').text(); //这个就自己去获取，我这里只是随便写的（自
	    query = {
	        id,
	        name,
	        title
	    }
	
	} else { //新增添加
	    query = {
	        name,
	        title
	    }
	}
	//发送数据成功后回调刷新
	refreshTable() //刷新
}

//开启编辑
function editRow(index) {
    $("#tableContact tr:nth-child(" + (index + 1)).attr('data-edit', true) //编辑标志
    $("#table tr:nth-child(" + (index + 1) + ") td.editable").each(function () {
        var value = $(this).text();
        $(this).html("<input value='" + value + "'>");
    });
    $("#table tr:nth-child(" + (index + 1) + ") td.editOperate").html(editFormatter)
}
//删除
function delRow(value) {
    //发送数据成功后回调刷新（删除）
    refreshTable() //
}
//取消编辑
function cancleRow(ele) {
    let obj = $(ele).parent().parent(); //获取tr的dom
    let del = obj.siblings().length == 0 ? false : true;
    let edit = obj.attr('data-edit') ? true : false;
    // console.log(edit)
    if (edit) { //编辑状态回归
        refreshTable() //刷新
    } else { //新增行删除
        if (!del) return; //没有数据
        $("#table").bootstrapTable('remove', {
            field: 'name',
            values: ['']
        });
        addKey = true;
    }
}