php bootstrap表格,bootstrap-table 表格行内编辑实现

这篇文章向大家介绍一下如何使用bootstrap table插件实现表格的行内编辑功能。

先放一张效果图：

应用场景

之前的项目也是采用bootstrap table，添加和修改数据都是通过模态框来编辑的，后来有了点击行来编辑和新增的需求，于是乎试试……

html

insertRow

getTableData

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方法更新单元格数据。

引入

json[

{ "id": 1, "name": "Item 1", "price": "￥1" },

{ "id": 2, "name": "Item 2", "price": "￥2" },

{ "id": 3, "name": "Item 3", "price": "￥3" }

]