先看效果
1、想要单元格就能够编辑的效果,所以用到了bootstrap-table自带的
onClickCell
单击某格触发的事件,再利用html的contenteditable
属性规定元素内容是否可编辑实现单元格编辑的效果。
2、弹出的输入框和单选框用到的是bootstrap-editable.js
、bootstrap-table-editable.js
、bootstrap-editable.css
,缺点是输入框需要点击输入框里面的内容才能够编辑。
onClickCell + contenteditable
- 单元格可编辑
$(function() {
$("#bootstrap-table").bootstrapTable({
url: "url",
columns: [{
checkbox: true
}, {
field: "UserName",
title: "用户名",
},
onClickCell: function(field, value, row, $element) {
$element.attr('contenteditable', true); // 单元格可编辑
$element[0].focus(); // 聚焦
var oldValue = $element.html(); //获取旧数据
if(oldValue == '-') { //清除默认值
$element.empty('');
}
$element.blur(function() {
var index = $element.parent().data('index');
var tdValue = $element.html();
saveData(index, field, tdValue);
}
},
],
});
});
function saveData(index, field, value) {
// 保存到表格后使用getSelections or getData才可以取到编辑的数据
$('#bootstrap-table').bootstrapTable('updateCell', {
index: index, //行索引
field: field, //列名
value: value //cell值
})
}
bootstrap-editable + bootstrap-table-editable
引入bootstrap-editable.js
、bootstrap-table-editable.js
、bootstrap-editable.css
- 编辑框
columns: [{
checkbox: true
}, {
field: "UserName",
title: "用户名",
editable: {
type: 'text',
title: '用户名',
emptytext: '张三'
},
}],
- 下拉框
下拉框value和defaultValue没生效的情况下,把bootstrap-editable.min.js
文件替换bootstrap-editable.js
columns: [{
checkbox: true
}, {
field: 'status',
title: '状态',
editable: {
type: 'select',
title: '状态',
source: [{
value: 0,
text: "已通过"
}, {
value: 1,
text: "未通过"
}],
emptytext: '更改状态',
showbuttons: true,
value: 1, // 单元格的默认值
defaultValue: 1, // 下拉框的默认值
},
}]
关注公众号【前端来入坑】回复bootstrap-editable获取js、css
网友评论