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;
    }
}