行内编辑是很方便的编辑形式。通过各种尝试,发现了三种方法。
1.bootstrap table 自带的行内编辑:
也许是最简单的bootstrap-table 表格行内编辑实现!!!
确认可用。方法简便,不需要其他的扩展js,缺点也在此,扩展麻烦,对于前端小白来说,难度太大。
/**
* @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);
})
}
a.获取表格数据:
$table.bootstrapTable('getData')
b.新增数据
$table.bootstrapTable('insertRow', {
index: 0,
row: {
id: '',
name: '',
price: ''
}
});
2.通过bootstrap-table-editable.js ,需要引用相关的bootstrap-editable.js等文件
里面有内联的样式
里面有各种样式,其中行内编辑是弹出式的。注意样式使用时,列宽会发生变化,文章里也提到了解决方案
{ field: "DeptId", title: "部门", editable: { type: 'select', title: '部门', source:[{value:"1",text:"研发部"},{value:"2",text:"销售部"},{value:"3",text:"行政部"}] } }
3.通过bootstrap-table-edit.js。此样式简单,可扩展,比如下拉菜单
参考bootstrap table 的可编辑列表的实例 里面有全套的js。
使用方法:
{field:"JX_NAME",title:"所获奖项明称",align:"center",edit:{required:true,type:'text' }},
a.增加
$('#reportTable1').bootstrapTable('append',rows);
b.删除
$('#reportTable1').bootstrapTable('removeRow', deleteIndex);
忘记 下面方法2能不能用
$('#table').bootstrapTable('removeByUniqueId', deleteIndex);
$('#table').bootstrapTable('insertRow', {
index: 0,
row: {
id: '',
name: '',
price: ''
}
});
总结:各有优缺点。但是js最好统一。2最好看,1最简单,3也好实现