基于Bootstrap的jquery表格编辑插件

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

在线预览 下载

该jquery表格编辑插件的特点还有：

• 可以对指定表格单元格进行编辑。
• 可以删除表格行。
• 可以添加新的表格行。

 使用方法

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

< script src="path/to/jquery.min.js">
< script src="path/to/bootstable.js">

 HTML结构

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

< div class="table-responsive">
  < table class="table table-bordered table-striped" id="mytable">
      < thead >
        < tr >
          < td >姓名
          < td >年龄
          < td >email
        
      
      < tbody >
        < tr >
          < td >张三
          < td >25
          < td >zs@163.com
        
        < tr >
          < td >李四
          < td >23
          < td >lisi@qq.com
        
        < tr >
          < td >王五
          < td >24
          < td >ww@126.com
        
      
  
     

如果要添加表格行，还需要添加一个按钮。

< button class="btn btn-info" id="add">< i class="fa fa-plus"> 添加新的表格行       

 初始化插件

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