1000字范文,内容丰富有趣,学习的好帮手!
1000字范文 > bootstrap可编辑表格 html 基于Bootstrap的jquery可编辑表格插件Bootstable

bootstrap可编辑表格 html 基于Bootstrap的jquery可编辑表格插件Bootstable

时间:2022-04-18 00:43:19

相关推荐

bootstrap可编辑表格 html 基于Bootstrap的jquery可编辑表格插件Bootstable

插件描述:Bootstable是一款基于Bootstrap的jquery表格编辑插件。通过该jquery表格编辑插件,会自动为表格添加编辑和删除按钮,使表格可以动态编辑。

更新时间:-11-28 10:25:46

Bootstable

Javascript库,使用Bootstrap使HTML表格变的可编辑

"Bootstable"是一个 javascript 库(插件),它允许将 HTML静态表转换为可编辑的表。可编辑表,包括多个按钮以执行版本操作。

版本选项包括:可以对指定表格单元格进行编辑。

可以删除表格行。

可以添加新的表格行。

使用方法

在页面中引入jquery和bootstable.js文件。

HTML结构

使用bootstrap提供的表格模板作为表格的HTML结构。

姓名年龄email

张三25zs@李四23lisi@王五24ww@

如果要添加表格行,还需要添加一个按钮。添加新的表格行

初始化插件

在页面DOM元素加载完毕之后,通过SetEditable()方法来初始化该jquery表格编辑插件。$('#mytable').SetEditable();

注意,必须为表格添加id,每次使用SetEditable()方法只能初始化一个表格。如果有多个表格需要多次调用SetEditable()方法。

配置参数

该jquery表格编辑插件可用的配置参数有:$('#mytable').SetEditable({

columnsEd:null,//Indextoeditablecolumns.Ifnullalltdeditables.Ex.:"1,2,3,4,5"

$addButton:null,//Jqueryobjectof"Add"button

onEdit:function(){},//Calledafteredition

onBeforeDelete:function(){},//Calledbeforedeletion

onDelete:function(){},//Calledafterdeletion

onAdd:function(){}//Calledwhenaddedanewrow

});columnsEd:需要进行编辑的表格列的序号。

$addButton:添加表格行的按钮的jquery对象。

onEdit:编辑表格时的回调函数。

onBeforeDelete:删除表格行前的回调函数。

onDelete:删除表格行后的回调函数。

onAdd:添加一个新的表格行前的回调函数。

例如:$('#mytable').SetEditable({

columnsEd:"0,1",//编辑第一和第二列

$addButton:$('#but_add'),

onEdit:function(){

//console.log("编辑表格");

}

});

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。