如何在引導程序中雙擊單元格後設置數值表

我有一個引導表，我正在嘗試配置，這樣當您雙擊單元格時，它會用編輯器替換html文本。這部分我很好，只有一個例外。完成我的更改後，要根據bootstrap-table的文檔正確更新該單元的數據值，我需要指定索引。該文檔沒有給出在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屬性是什麼都沒有。我從哪裏得到索引？

來源

2017-01-16 Keith

在篩選引導表的源代碼之後，沒有提及索引。我最終做的是爲每行添加索引數據屬性，然後我可以從dbl-click-cell事件中的單元格元素中獲取最近的行。此處，我添加索引（因爲我使用ASP.NET MVC剃刀原諒語法）：

<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>

然後，在我的dbl-click-cell事件，我做了以下內容：

$('#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 
});

來源

2017-01-16 19:18:13 Keith

如何在引導程序中雙擊單元格後設置數值表

回答

相關問題