ブートストラップテーブルでセルをダブルクリックした後に値を設定する方法

Question

セルをダブルクリックすると、htmlテキストがエディタで置き換えられるように設定しようとしているブートストラップテーブルがあります。 1つの例外を除いて、この部分はうまくいっています。変更を行った後、ブートストラップテーブルのドキュメントに従って、そのセルのデータ値を適切に更新するために、インデックスを指定する必要があります。このドキュメントでは、dbl-click-cellイベント中に返される行やセルオブジェクトについての詳しい説明が記載されていないため、必要な値を取得する方法がわかりません。私のコードは次のとおりです。

.on('dbl-click-cell.bs.table', function (e, field, value, row, $element) { 
    EditCellValue(row, $element.closest('td'), row.id, value); 
}) 

これは、セルにエディタを表示する私の関数を呼び出します。 Enterキーを押すと、APIが呼び出され、データベースの値が更新されます。それがあることをやって行うの後は、私が行っていたら、私は、セルの値を設定する必要があります。

function EditCellValue(row, cell, id, value) { 
    $(cell).html('<input type="text" class="form-control qbedit" placeholder="Enter Vendor Name..." value="' + value + '" />'); 
    $(".qbedit").focus(); 
    $(".qbedit").keyup(function (event) { 
     if (event.keyCode == 13) { 
      var vendorname = $(".qbedit").val(); 

      // save the edit 
      $.ajax({ 
       type: 'PUT', 
       url: '/api/AccountingAPI/' + id, 
       cache: false, 
       dataType: 'json', 
       data: { "": vendorname } 
      }).error(function (jqXHR, error, errorThrown) { 
       alert(errorThrown); 
      }).done(function (res) { 
       // row.index is nothing. how do I get it???? 
       $('#mappings-table').bootstrapTable('updateCell', { index: row.index, field: 'qbvendor', value: vendorname }); 
      }); 
     } 
     else if (event.keyCode == 27) { 
      // cancel the edit 
      $(cell).html(value); 
     } 
    }); 
} 

のでrow.indexプロパティが何もありません。どこからインデックスを取得するのですか？

Answer 1

ブートストラップテーブルのソースコードを調べた後に、インデックスの記載はありません。私がやり遂げたのは、それらを追加する際に各行にインデックスデータ属性を割り当ててから、dbl-click-cellイベントからセル要素に最も近い行を取得することです。その後、私のdbl-click-cellイベントで、私は次の操作を行い

<tbody> 
    @{ var idx = 0; } 
    @foreach (var item in Model) 
    { 
     <tr data-itemId="@item.Id" data-index="@idx"> 
      <td>@item.Id</td> 
      <td>@item.CPRVendor</td> 
      <td class="qbvendor">@item.QBVendor</td> 
      <td>@item.Verified</td> 
     </tr> 

     idx++; 
    } 
</tbody> 

：：私はインデックス（私はASP.NET MVCかみそりを使用していますような構文を言い訳）を追加するのはここだ

$('#mappings-table').on('all.bs.table', function (e, name, args) { 
    //console.log('Event:', name, ', data:', args); 
}) 
.on('dbl-click-cell.bs.table', function (e, field, value, row, $element) { 
    EditCellValue($element.closest('tr').data('index'), 
        $element.closest('td'), 
        row.id, 
        value); 
}) 

そして、これで、セルのデータ値を更新できるようになりました。

$('#mappings-table').bootstrapTable('updateCell', { 
    index: index, 
    field: 'qbvendor', 
    value: vendorname 
});