Bootstable是一款基于Bootstrap的jquery表格编辑插件。通过该jquery表格编辑插件,会自动为表格添加编辑和删除按钮,使表格可以动态编辑。该jquery表格编辑插件的特点还有:
可以对指定表格单元格进行编辑。
可以删除表格行。
可以添加新的表格行。
使用方法
在页面中引入jquery和bootstable.js文件。
HTML结构
使用bootstrap提供的表格模板作为表格的HTML结构。
姓名年龄email
张三25zs@163.com李四23lisi@qq.com王五24ww@126.com如果要添加表格行,还需要添加一个按钮。
添加新的表格行
初始化插件
在页面DOM元素加载完毕之后,通过SetEditable()方法来初始化该jquery表格编辑插件。
$('#mytable').SetEditable();
注意,必须为表格添加id,每次使用SetEditable()方法只能初始化一个表格。如果有多个表格需要多次调用SetEditable()方法。
配置参数
该jquery表格编辑插件可用的配置参数有:
$('#mytable').SetEditable({
columnsEd: null, //Index to editable columns. If null all td editables. Ex.: "1,2,3,4,5"
$addButton: null, //Jquery object of "Add" button
onEdit: function() {}, //Called after edition
onBeforeDelete: function() {}, //Called before deletion
onDelete: function() {}, //Called after deletion
onAdd: function() {} //Called when added a new row
});
columnsEd:需要进行编辑的表格列的序号。
$addButton:添加表格行的按钮的jquery对象。
onEdit:编辑表格时的回调函数。
onBeforeDelete:删除表格行前的回调函数。
onDelete:删除表格行后的回调函数。
onAdd:添加一个新的表格行前的回调函数。
例如:
$('#mytable').SetEditable({
columnsEd: "0,1", //编辑第一和第二列
$addButton: $('#but_add'),
onEdit: function() {
//console.log("编辑表格");
}
});