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

需求:bootstrap

在bootstrap table上增長輸入框,須要選擇的時候把輸入的值保存到 row 裏面,傳遞給其餘模塊使用。this

實現:spa

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 事件。code

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 中取得輸入的值了。orm

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

演示:blog

  輸入:事件

  輸出:get

相關文章
相關標籤/搜索