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

所属分类:UI-图表

 26267  221  查看评论 (8)
分享到微信朋友圈
X
基于Bootstrap的jquery可编辑表格插件Bootstable ie兼容8

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

Bootstable

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

Bootstable

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

版本选项包括:

  • 可以对指定表格单元格进行编辑。

  • 可以删除表格行。

  • 可以添加新的表格行。

使用方法

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

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

HTML结构

使用bootstrap提供的表格模板作为表格的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>

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

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

初始化插件

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

支持编辑列和添加删除行的表格组件

这是一款基于jquery开发的可动态生成表格的组件
  图表
 25050  290

Web动态热图插件heatmap.js

Web动态热图插件heatmap.js,可用于监控设备运行状态。
  图表
 24100  259

AmChart使用例子

AmChart统计图插件使用例子
  图表
 31354  377

ets实现汽车动态仪表盘

通过ets实现汽车动态仪表盘,包括速度,转速等的实时数据更新
  图表
 11941  191

讨论这个项目(8)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    Andy 0
    2021/11/14 11:33:38
    我已经解决了这个单页面多个table表格编辑的问题,已经发布了,需要的可以去我个人中心免费下载,感谢@丶空白 回复
    Andy 0
    2021/11/13 17:52:21
    定义多个table编辑,columnsEd定义的列值以最后一个table对象为准,前面定义的没有用,回调参数都是会回调到最后一个table对象的回调参数里面去,这个插件目前只支持单页面单table编辑,多个就不行了,单个页面多个table要用的话需要重新修改封装才行,😥😥😥目前正在奋力的修改,这个插件还是很好用的 回复
    Andy 0
    2021/11/13 17:47:49
    要是一个页面定义多个table编辑,赋值多个table的id对象,会出现定义的参数和回调函数只以最后一个table对象为准,前面定义的table对象都没有用了 回复
    &nbsp 0
    2020/10/28 14:15:11
    表格数据删除完后,再次新增数据,表格错位问题怎么解决?
        &nbsp1
        2020/10/28 16:34:04

        后端,写前端真是遭虐。
        修改bootstable.js文件中:

        function rowAddNew(tabId) {
            var $tab_en_edic = $("#" + tabId);
            var $filas = $tab_en_edic.find('tbody tr');
            if ($filas.length == 0) {
                //在这里修改,根据自己实际情况修改,只提供一种思路
                var $row = $tab_en_edic.find('thead tr');
                var $cols = $row.find('th');
                var htmlDat = '';
                let tdArr = $row.find('td');
                for (var i = 0; i < tdArr.length; i++) {
                    let tdName = tdArr.eq(i).attr("name"); //name是自命名的属性
                    let tdStyle = tdArr.eq(i).attr("style");
                    let tdHtml = "<td name='" + tdName + "' style='" + tdStyle + "'></td>";
                    htmlDat = htmlDat + tdHtml;
                }
                $cols.each(function() {
                    if ($(this).attr('name') == 'buttons') {
                        htmlDat = htmlDat + colEdicHtml;
                    } else {
                        htmlDat = htmlDat + '<td></td>';
                    }
                });
                console.log(htmlDat)
                $tab_en_edic.find('tbody').append('<tr>' + htmlDat + '</tr>');
            } else {
                //Hay otras filas, podemos clonar la última fila, para copiar los botones
                var $ultFila = $tab_en_edic.find('tr:last');
                $ultFila.clone().appendTo($ultFila.parent());
                $ultFila = $tab_en_edic.find('tr:last');
                var $cols = $ultFila.find('td'); //lee campos
                $cols.each(function() {
                    if ($(this).attr('name') == 'buttons') {
                        //Es columna de botones
                    } else {
                        $(this).html(''); //limpia contenido
                    }
                });
            }
            params.onAdd();
        }
    回复
    微光 0
    2020/3/17 21:51:19
    使用这个插件时,编辑符号和删除符号在格子里是上下排布的,使表格样式很难看,使行高变成了原来的两倍,有方法解决吗?是因为列数太多了吗,只要列太多时就会变样,列少时不会变。这个插件自带横向滚动条吗?
        x..j0
        2020/8/19 11:21:11
        同问
        丶空白0
        2021/4/25 16:25:29
        请仔细看上文说明,测试时未出现你说的问题。
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复