ブートストラップテーブルデータフォーマッタの入力ボックスを使用して値を変更する方法

Question

私は自分のデータを表示するためにブートストラップテーブルを使用しています。私のようなカラムのデータフォーマッタを使用：

function inputFormatter(value, row){ 
    return '<input class="form-control data-input" value="' + value + '">'; 
} 

私のブートストラップコラム：

：今データは以下のようにその列の入力ボックスに値として表示されます

<th data-field="channel_sku" data-align="center" data-formatter="inputFormatter">Channel SKU</th> 

問題は、入力ボックスのテキストを変更してそのセルの値が変更されない場合です。つまり、バックエンドにajaxを使用してデータを送信すると、古いデータが取得されます。また、入力ボックスのvalue属性は新しい値に変更されません。

どのようにテキスト入力でそのセルの値を変更できますか？

Answer 1

最終的に回避策が見つかりました。私はテーブルをクリックして行のインデックスとグローバル変数のフィールドをクリックしてイベントをキャッチしました。

セルがクリックされるたびに、これらのグローバル変数の値がそのセルの新しい値に変更されます。

$('#sku-map-table').bootstrapTable({ 
    onClickCell: function (field, value, row, $element) { 
     $rowIndex = $element.closest('tr').attr('data-index'); 
     $field = field; 
    } 
}); 

は、その後、私はdata-inputクラスを使用して入力ボックスをcatchedし、新しい値でセルの値を更新しました。

$(document).on('change', '.data-input', function(event) { 
    $new_val = $(this).val(); 
    $('#sku-map-table').bootstrapTable('updateCell', {index: $rowIndex, field: $field, value: $new_val}); 
}); 

要約入力ボックスの値を変更すると、それぞれのセルをクリックする必要があり、それは私が使用したものです。

Answer 2

どうやら今日のためとして、SOに十分な情報や質問がない私たちのために悲しいことに、私は月曜日にこのライブラリで作業を始めていると私は同様の質問の完全なんです。

ここでの問題は、bootstrapTable('getData')メソッドとは異なる入力値がフェッチされることです。このメソッドは、テーブルに渡したリストに一致するオブジェクトに適合するプロパティの値を取り出します。dataパラメータは、最初にテーブル。入力の値を変更すると、テーブルのデータオブジェクトは変更されずにそのまま残ります。そのため、古いデータを取得し続け、入力がonChangeイベントをトリガするたびにデータオブジェクトの値を更新する必要があります。マニュアルに記載されている以下のパラメータを受け取るbootstrapTable('updateCell', params)メソッド。

度：行インデックス。 フィールド：フィールド名。 値：新しいフィールド値。あなたは{再初期化：偽}設定することができ、テーブルの再初期化を無効にするには

を私も私の列の入力を実現したかったように私はここに、今日この回避策を思い付いた私の列属性です：

{field: 'varillasEnLecho', title: 'Varilla en lecho', formatter: function(value, row, index) { 
    return '<input class="form-control data-input" value="' + value + '" row-index="' + index + '" field="varillasEnLecho" onchange="updateCell($(this))">'; 
    } 
} 

、ここで入力が変化にトリガ機能です：

：

function updateCell(caller) { 
    var table = caller.parents('table'); 
    var newData = { 
    index: caller.attr('row-index'), field: caller.attr('field'), value: caller.val(), reinit: false 
    }; 

    table.bootstrapTable('updateCell', newData); 

    var data = JSON.stringify(table.bootstrapTable('getData')); 
    console.log(data); 
} 

それが正常に動作しますが、ここでのスクリーンショットです

はじめ：ブートストラップ表は甘い拡張子が編集可能なセルを管理し、自動的にテーブルが、に基づいているあなたはそれがこのexampleに実装されている方法を確認することができ、ここでどのようにそれのデータ・モデルを更新x-editableと呼ばれていますなります：あなたはそれはあなた次第です使いたいん何

、歓声を。