Bootstrap-Table中双击单元格后如何设置值

Question

我有一个 bootstrap-table，我正在尝试对其进行配置，以便当您双击一个单元格时，它会用编辑器替换 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 属性什么都不是。我从哪里得到索引？

Answer 1

在筛选 bootstrap-table 的源代码后，没有提及索引。我最终做的是在添加它们时为每一行分配一个索引数据属性，然后我可以从 dbl-click-cell 事件的单元格元素中获取最近的行。这是我添加索引的地方 （请原谅我使用 ASP.NET MVC Razor 的语法）:

<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 
});

Bootstrap-Table中双击单元格后如何设置值

How to Set Value After Double Clicking Cell in Bootstrap-Table

jquery

twitter-bootstrap

bootstrap-table