当前位置：首页 > 网页特效 > 表格

基于Bootstrap的jquery表格编辑插件

分类：表格日期：2024-05-14 点击(0) 评论(0)

简介

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

```html
<script src="path/to/jquery.min.js"></script>
<script src="path/to/bootstable.js"></script>
```
#####  HTML结构
使用bootstrap提供的表格模板作为表格的HTML结构。

```html
<div class="table-responsive">
  <table class="table table-bordered table-striped" id="mytable">
      <thead>
        <tr>
          <td>姓名</td>
          <td>年龄</td>
          <td>email</td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>张三</td>
          <td>25</td>
          <td>zs@163.com</td>
        </tr>
        <tr>
          <td>李四</td>
          <td>23</td>
          <td>lisi@qq.com</td>
        </tr>
        <tr>
          <td>王五</td>
          <td>24</td>
          <td>ww@126.com</td>
        </tr>
      </tbody>
  </table>
</div>     
```
如果要添加表格行，还需要添加一个按钮。

```html
<button class="btn btn-info" id="add"><i class="fa fa-plus"></i> 添加新的表格行</button>      
``` 
#####  初始化插件
在页面DOM元素加载完毕之后，通过SetEditable()方法来初始化该jquery表格编辑插件。

```html
$('#mytable').SetEditable();
```
注意，必须为表格添加id，每次使用SetEditable()方法只能初始化一个表格。如果有多个表格需要多次调用SetEditable()方法。

##### 配置参数 
该jquery表格编辑插件可用的配置参数有：

```html
$('#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：添加一个新的表格行前的回调函数。
例如：

```html
$('#mytable').SetEditable({
    columnsEd: "0,1",  //编辑第一和第二列     
    $addButton: $('#but_add'),
    onEdit: function() {
        //console.log("编辑表格");
     }
});
```

web299.com

基于Bootstrap的jquery表格编辑插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果