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

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

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

Bootstable

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

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

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

可以删除表格行。

可以添加新的表格行。

使用方法

在页面中引入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("编辑表格");

}

});

html 可编辑表格插件,基于Bootstrap的jquery可编辑表格插件Bootstable相关推荐

Bootstrap风格jQuery下拉菜单插件
下载地址一款漂亮的Bootstrap风格jQuery下拉菜单插件,可以被附加到任何你想要的元素,可以添加一些表单控件,也可以使用CSS添加图标插入,还可以有固定的HTML. dd:
html页面酒店日历插件,基于vue2.x的酒店日历选择插件
基于vue2.x的酒店日历选择插件效果图快速使用安装: npm install -S vue-hotel-calendar 或者 yarn add vue-hotel-calendar 使用: i ...
html5下拉幻灯片插件,基于WebGL的炫酷2D幻灯片插件
GLSlideshow.js是一款基于WebGL的炫酷2D幻灯片插件.该幻灯片支持多种过渡效果:波浪效果,立方体效果,风吹效果等.在旧的IE浏览器中它会自动回退为2D Canvas来显示幻灯片. 使用 ...
html树插件,推荐8款jQuery轻量级树形Tree插件
由于其拥有庞大,实用的插件库,使得jQuery变得越来越流行.今天将介绍一些最好的jQuery树形视图插件,具有扩展和可折叠的树视图.这些都是轻量级的,灵活的jQuery插件,它将一个无序列表转换为可 ...
基于Bootstrap的jQuery开关按钮插件
按钮下载使用方法首先要在页面中引入依赖文件: jquery.Bootstrap.Bootstrap Switch CSS和Bootstrap Switch JS.这里用的是bootstr ...
基于Bootstrap、Jquery的自适应导航栏
css代码: .kch_nav{width: 100%; position: fixed;z-index: 999;top:0;left: 0;right: 0;height: 69px;backgr ...
前端开发技术栈（插件篇）：400+常用前端开发插件总结清单（持续更新......）
常用前端开发插件总结清单,日常前端开发的时候,尤其在使用一些常用的功能的时候,例如:表单,,动画效果,时间选择,文件上传,下拉框等功能.直接用插件可以让自己节省更多的开发时间,更多的去关心业务,自己封 ...
12个方便易用的jquery表单验证插件
绝大部分网站都是开放注册的,而注册就需要使用表单验证,因为网站都需要对注册用户的信息安全性和合理性做出判断,表单的注册都应该具备完善的验证方式,比如注册使用的手机号是否是真实的?用户填写的验证码是否正 ...
怎么用文本文档写html框架,基于Metronic的Bootstrap开发框架经验总结（17）-- 使用 summernote插件实现HTML文档的编辑和图片插入操作...
在很多场合,我们需要在线编辑HTML内容,然后在页面上或者其他终端上(如小程序.APP应用等)显示,编辑HTML内容的插件有很多,本篇介绍基于Bootstrap的 summernote插件实现HTML ...

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

html 可编辑表格插件,基于Bootstrap的jquery可编辑表格插件Bootstable相关推荐

最新文章

热门文章