Bootstrap编辑一列数据

Bootstrap编辑一列数据

这次涉及到新需求是要求能动态编辑整列的数据，而且初始化不能编辑，点击编辑按钮之后才能进行编辑，因为Bootstrap不带有这个功能，想着自己怎么实现，主要思路是初始化表格时，给可以编辑的列设置统一的class，点击编辑后，将这类class的元素改为input框。
1.初始化table

{
                field: 'installCost',
                title: '安装服务费',
                formatter:function(value,row){
                    if(!value){
                        return '<div style="max-width:30rem" data-id="'+row.swPartId+'" class="priceRetail"></div>'
                    }else{
                        return '<div style="max-width:30rem" data-id="'+row.swPartId+'" class="priceRetail">'+value+'</div>';
                    }
                }
            },

2.设置按钮点击事件

function updateTable(listPrice){
        var list=parts_list.find('.priceRetail');
        for(var i=0;i<list.length;i++){
            let data_id=$(list[i]).attr('data-id');
            let value=list[i].innerText
            let old_value=list[i].innerText
            list[i].innerHTML="<input type='number' value='"+value+"' name='priceRetail_result' old-value='"+old_value+"' data-id='"+data_id+"'>"
        }
        btn_update[0].innerText="保存"
    }

3.点击按钮进行保存

function save_priceRetail(){
        var list=parts_list.find('[name=priceRetail_result]');
        let hasUpdate=false;
        let updata=[]
        for(var i=0;i<list.length;i++){
            let data_id=$(list[i]).attr('data-id');
            let value=$(list[i]).val();
            let old_value=$(list[i]).attr('old-value');
            if(old_value!=value){
                hasUpdate=true
                updata.push({
                    swPartId: Number(data_id),            //联盟配件ID
                    installCost: value, //安装服务费
                });
            }
        }
        if(hasUpdate){
            updatePriceRetail(updata)
        }else{
            viewTable();
            btn_update[0].innerText="设置安装服务费"
        }
    }

4.根据按钮的文字来进行判断是table修改还是保存，也可以设置变量来控制

btn_update.off().on("click",function(){
        if(btn_update[0].innerText=="保存"){
            save_priceRetail()
        }else{
            updateTable();
        }
    })