Bootstrap Table x-editable 指定某行某列的某一个启用编辑
时间: 2023-08-01 13:13:22 浏览: 68
要指定 Bootstrap Table 中的某一行某一列启用编辑,可以使用 x-editable 插件的 `data-pk`、`data-name` 和 `data-value` 属性。具体步骤如下:
1. 在 Bootstrap Table 的列定义中,为需要启用编辑的列添加 `data-editable="true"` 属性,如下所示:
```html
<th data-field="name" data-editable="true">Name</th>
<th data-field="email">Email</th>
<th data-field="phone" data-editable="true">Phone</th>
```
2. 在 Bootstrap Table 的每一行中,为需要启用编辑的单元格添加 `data-pk`、`data-name` 和 `data-value` 属性,如下所示:
```html
<tr>
<td data-pk="1" data-name="name" data-value="John" class="editable">John</td>
<td data-pk="1" data-name="email" data-value="john@example.com">john@example.com</td>
<td data-pk="1" data-name="phone" data-value="123456789" class="editable">123456789</td>
</tr>
<tr>
<td data-pk="2" data-name="name" data-value="Jane" class="editable">Jane</td>
<td data-pk="2" data-name="email" data-value="jane@example.com">jane@example.com</td>
<td data-pk="2" data-name="phone" data-value="987654321" class="editable">987654321</td>
</tr>
```
其中,`data-pk` 属性指定行的唯一标识,`data-name` 属性指定需要编辑的列名,`data-value` 属性指定单元格的初始值。
3. 使用 x-editable 插件初始化可编辑单元格,如下所示:
```javascript
$('.editable').editable({
type: 'text',
url: '/post',
title: 'Enter value',
pk: $(this).data('pk'),
name: $(this).data('name'),
value: $(this).data('value')
});
```
其中,`type` 属性指定编辑控件的类型,如文本框、下拉框等,`url` 属性指定更新数据的 URL,`title` 属性指定编辑框的标题,`pk`、`name` 和 `value` 属性从对应的单元格中获取。
这样,指定的行和列就可以启用编辑了。