这篇文章向大家介绍一下如何使用bootstrap table插件实现表格的行内编辑功能。
推荐教程：Bootstrap框架
先放一张效果图：
应用场景
之前的项目也是采用bootstrap table，添加和修改数据都是通过模态框来编辑的，后来有了点击行来编辑和新增的需求，于是乎试试……
html
<div> <div> <button>insertRow</button> <button>getTableData</button> </div> <table></table> </div>
script
$(function() {
let $table = $('#table');
let $button = $('#button');
let $getTableData = $('#getTableData');
$button.click(function() {
$table.bootstrapTable('insertRow', {
index: 0,
row: {
id: '',
name: '',
price: ''
}
});
});
$table.bootstrapTable({
url: 'data2.json',
toolbar: '#toolbar',
clickEdit: true,
showToggle: true,
pagination: true, //显示分页条
showColumns: true,
showPaginationSwitch: true, //显示切换分页按钮
showRefresh: true, //显示刷新按钮
//clickToSelect: true, //点击row选中radio或CheckBox
columns: [{
checkbox: true
}, {
field: 'id',
title: 'Item ID'
}, {
field: 'name',
title: 'Item Name'
}, {
field: 'price',
title: 'Item Price'
}, ],
/**
* @param {点击列的 field 名称} field
* @param {点击列的 value 值} value
* @param {点击列的整行数据} row
* @param {td 元素} $element
*/
onClickCell: function(field, value, row, $element) {
$element.attr('contenteditable', true);
$element.blur(function() {
let index = $element.parent().data('index');
let tdValue = $element.html();
saveData(index, field, tdValue);
})
}
});
$getTableData.click(function() {
alert(JSON.stringify($table.bootstrapTable('getData')));
});
function saveData(index, field, value) {
$table.bootstrapTable('updateCell', {
index: index, //行索引
field: field, //列名
value: value //cell值
})
}
});
实现原理
通过bootstrap table自带的 onClickCell 方法，点击 td 添加 contenteditable 属性(ps: 使元素可编辑),于是 td 元素具有了类似于文本框的 focus 和 blur 事件，用户点击 td 获取焦点，编辑完内容失去焦点后，调用 updateCell方法更新单元格数据。
引入
<link> <link> <script></script> <script></script> <script></script> <script></script>
json
[
{ "id": 1, "name": "Item 1", "price": "￥1" },
{ "id": 2, "name": "Item 2", "price": "￥2" },
{ "id": 3, "name": "Item 3", "price": "￥3" }
]
