bootstrap-table 行内编辑简单实现

来源：互联网发布：传奇dbc数据说明编辑：程序博客网时间：2024/06/05 14:08
$('#table').bootstrapTable({    url: createUrl(''),    striped: true,    uniqueId: 'attrValue',    columns: [{        title: 'ID',        field: 'index',        formatter: formatterIndex    },{        title: '规格',        field: 'attrValue',        class: 'editable'    },{        title: '价格',        field: 'sellPrice',        class: 'editable'    },{        title: '操作',        field: 'operate',        formatter: formatterOperate    }]});function formatterIndex(value, row, index){    var i = index + 1;    if(i < 10){        return "0" + i;    }else{        return i;    }}function formatterOperate(value, row, index){    return "<button onclick='saveRow("+index+")' class='btn small'><i class='fa fa-edit'></i> 保存</button><button onclick='editRow("+index+")' class='btn small blue'><i class='fa fa-edit'></i> 编辑</button><button onclick='delRow(\""+row.attrValue+"\")' class='btn small red'><i class='fa fa-trash-o'></i> 删除</button>";}$("#addBtn").click(function(){    var data = {        attrValue: '',        sellPrice: ''    };    $("#table").bootstrapTable('append', data);    $("#table tr:last-child td.editable").each(function(){        $(this).html("<input>");    });});function saveRow(index, value){    var obj = $("#table tr:nth-child("+ (index+1) +") td.editable");    var attrValue = obj.first().find("input").val().trim();    var sellPrice = obj.last().find("input").val().trim();    var newData = {        attrValue: attrValue,        sellPrice: sellPrice    };    $("#table").bootstrapTable('updateRow', {        index: index,        row: newData    });    obj.find("input").remove();}function editRow(index){    $("#table tr:nth-child("+ (index+1) +") td.editable").each(function(){        var value = $(this).text();        $(this).html("<input value='"+value+"'>");    });}function delRow(value){    $("#table").bootstrapTable('removeByUniqueId', value);}
0 0