Question

我有一个我试图配置的引导表，这样当你双击一个单元格时，它会用编辑器替换html文本。这部分我很好，有一个例外。进行更改后，要根据bootstrap-table的文档正确更新该单元的数据值，我需要指定索引。文档没有给出在dbl-click-cell事件期间返回的行或甚至单元格对象的良好描述，因此我不确定我应该如何获取值I要求。这是我的代码：

.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中双击单元格后设置值

1 个答案: