bootstrap table行編輯

關於bootstrap table自帶的行編輯解決方案可以參考以下文章

https://www.cnblogs.com/landeanfen/p/5821192.html

以下文章是另外一種功能解決方案,但是下載鏈接已經失效,因此我只有自己想想辦法了

http://blog.csdn.net/lzxadsl/article/details/49181127

模仿的是失效的那種,好了,開始

首先,利用H5的contenteditable 將內容設爲可編輯的

{
    title: '評分',
    width: '100px',
    field: 'score',
    formatter:function (value, row, index, field) {
        return '<div contenteditable="true">' + (value || "-") + '</div>';
    }

}

其次利用jquery添加可編輯屬性的全局change事件

//爲contenteditable綁定change事件
$('body').on('focus', '[contenteditable]', function() {
    var $this = $(this);
    $this.data('before', $this.html());
    return $this;
}).on('blur keyup paste input', '[contenteditable]', function() {
    var $this = $(this);
    if ($this.data('before') !== $this.html()) {
        $this.data('before', $this.html());
        $this.trigger('change');
    }
    return $this;
});

參考:https://stackoverflow.com/questions/1391278/contenteditable-change-events

然後爲需要修改的列綁定內容change事件,

關鍵是獲取到BootstapTable對象,此對象放在表格jquery對象的data("bootstrap.table")中

獲取到此對象之後就可對錶格的數據做操作了

function bind_edit_score_blur(field) {
    var $table = $("#work_table");
    //bootstrap table對象,包含了所有表格的內容,data中存儲了加載過來的當前頁數據
    var data = $table.data("bootstrap.table").data;
    var col = $table.find("thead tr th[data-field=" + field + "]").index();
    //因爲每次加載table都會刪除所以事件不會重複綁定
    $table.find("tbody tr").find('td:eq('+col+') div').on('change',function () {
        var value = $(this).text();
        var row = $(this).parents('tr').data('index');
        console.log(value);
        //修改表格對象的數據
        data[row][field]=value;
        $table.bootstrapTable('check', row);
    });
}

此事件的綁定,我是放在了onpostbody中,並且寫了個循環,因爲我不知道bootstrap table初始化完畢的回調,

onPostBody:function () {
    //綁定評分修改事件,因爲不知道table什麼時候初始化完畢
    var check_table_finished=setInterval(function () {
        var bootstrapTable = $("#work_table").data("bootstrap.table");
        if(bootstrapTable) {
            clearInterval(check_table_finished);
            //綁定評分修改後的事件
            bind_edit_score_blur('score');
        }
    },500);
},

最後提交修改的內容就可以了

function updateScore() {
    var row = $('#work_table').bootstrapTable('getSelections');
    if(row.length == 0) {
        toastr.success("請先選中一條評分");
        return;
    }    
    $.each(row,function (i, item) {
        var workid = item.workid;
        var score = item.score;
        $.ajax({
            url:ROOT_URL+'commonAction/updateScore',
            type:"post",
            dataType:"json",
            data:{
                workid:workid,
                score:score
            },
            success:function(res){
                if(res.status == 0) {
                    toastr.success(res.msg);
                }else{
                    toastr.error(res.msg);
                }
                query();
            }
        });
    });


}

表格效果: