bootstrap table 列表增加輸入框並保存輸入的值不清除

需求：

在bootstrap table上增加輸入框，需要選擇的時候把輸入的值保存到 row 里面，傳遞給其他模塊使用。

實現：

columns: [{
                ....,
            {
        　　　　field: 'myField', //自定義字段名稱
        　　　　title: '輸入值',   //自定義
        　　　　width: '5%',
        　　　　formatter: function (value, row , index) {
            　　　　return '<input type="text" name="myField" value="" onblur="changeData('+ index +', this);" />';
        　　 }
        }]        

在columns 里面增加自定義一個節點，然后使用 formatter 轉換成輸入框，並綁定 onblur 事件。

function changeData(index, obj) {
         var value = $(obj).val();
         var name = $(obj).attr('name');
　　　　　　//通過 index 獲取指定的行
         var row = $("#table").bootstrapTable('getOptions').data[index];
　　　　　　//將 input 的值存進 row 中
         row[name] = value;
　　　　　　//更新指定的行，調用 'updateRow' 則會將 row 數據更新到 data 中，然后再重新加載
         $("#table").bootstrapTable('updateRow',{index: index, row: row});
 }

然后就可以從 row 中取得輸入的值了。

function getSelections() {
        return $.map($("#table").bootstrapTable('getSelections'), function (row) {
            return row
        });
    }

演示：

　　輸入：

　　輸出：