2017-12-27 9 views
0

x-editableBootstrapTableを使用して、連絡先の選択ボックスを含むテーブルを作成しています。ユーザーが新しい値を選択すると、選択した値にアラートが表示されます。 editable-save.bs.tableを使用して、選択オプションに関連付けられた値を取得することはできますが、それはユーザーにとって無意味です。私はその値に関連付けられている連絡先の名前を取得したい。あなたは配列にソースをダンプして、あなたが探している行見つけるためにそれをトラフ繰り返すことができhttp://jsfiddle.net/cdvtkndu/値の代わりにテキストを取得するBoostrapTable X編集可能な選択ボックス

var data = [{"Contact": 3}, {"Contact": 2}]; 

$(function() { 
    $('#table').bootstrapTable({ 
     columns: [{ 
      field: 'Contact', 
      title: 'Contact', 
      editable: { 
       type: 'select', 
       source: [ 
        {value: 4, text: 'Andrew'}, 
        {value: 2, text: 'John'}, 
        {value: 3, text: 'Liz'} 
       ] 
      } 
     }], 
     data: data 
    }); 
}); 

$('#table').on('editable-save.bs.table', function (e, field, row, old, $el) { 
    var new_val = row[field]; 
    alert(new_val); 
}); 

答えて

1

var data = [{"Contact": 3}, {"Contact": 2}]; 
var _source = [ 
        {value: 4, text: 'Andrew'}, 
        {value: 2, text: 'John'}, 
        {value: 3, text: 'Liz'} 
       ]; 
$(function() { 
    $('#table').bootstrapTable({ 
     columns: [{ 
      field: 'Contact', 
      title: 'Contact', 
      editable: { 
       type: 'select', 
       source: _source 
      } 
     }], 
     data: data 
    }); 
}); 
$('#table').on('editable-save.bs.table', function (e, field, row, old, $el) { 
    var new_val = row[field]; 
    var arrayLength = _source.length; 
    for (var i = 0; i < arrayLength; i++) { 
     if (_source[i].value == new_val) { 
       alert(_source[i].text); 
      break; 
     } 
    }  
}); 
を、私はこの

フィドルを行う行うことができますどのように

私の修正を見てください:http://jsfiddle.net/4qq1yp1y/

+0

ありがとうございました。私はこれを考えていた。このアプローチの私の唯一の問題は、私の実際のテーブルには多くのフィールドがあり、いくつかは選択ボックスであり、一部はそうではないということです。私はソース配列をループする必要があるものをどのように判断するのか、どうすればいいのか分かりません。何か案は? – user2242044

+0

トラフを反復してifでそれをチェックするのに必要なフィールドであることを示す別の配列を持つことができます。すべてのフィールドを保存する変数として_sourceも使用します。 (あなたが望むものを理解していれば、私に訂正してコードを提供してください)http://jsfiddle.net/9ouxeozs/ –

+0

x-editableライブラリには何も組み込まれていないので、私は見つけることができます。 – user2242044

関連する問題