bootstrap-table行内编辑表格的实现

最新推荐文章于 2026-04-23 12:08:02 发布

原创最新推荐文章于 2026-04-23 12:08:02 发布 · 1.7w 阅读

9 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#bootstrap-table

javascript 同时被 2 个专栏收录

11 篇文章

订阅专栏

bootstrap-table

5 篇文章

订阅专栏

本文介绍了一种基于Bootstrap-table插件的自定义编辑功能实现方案。通过对click-edit-row功能进行改进，实现了点击特定按钮使表格行变为可编辑状态，并保留原有的保存/取消按钮样式。

bootstrap-table官网上有editable和click-edit-row的例子，但是前者通过设置表格中某一列是否可编辑属性来控制行内编辑，会给可编辑的单元格添加格外的样式，且每编辑一个单元格就要点击一次确认或取消按钮。后者通过设同时置表格整体是否可编辑和某一列的编辑控件类型（input，select）来实现，可以完成一行编辑后再提交，点击表格行的任意位置都可以编辑，会在最后一列追加保存和取消按钮，会影响表格的样式。现在的需求时点击表格最后一列中的编辑按钮来控制这一行是否可编辑，最后一列不是追加按钮，而是用保存/取消按钮替代原型的编辑/取消按钮。显然官网上实现的编辑功能都不能满足这个需求。click-edit-row的例子与我需要实现的需求更接近，于是在这个文件上稍作修改以实现我的需求。
下面是实现后的效果图
不在编辑状态
图1

图2
实现思路：

缩小click监听事件元素的范围

 table.on('click-row.bs.table', function (e, row, $element, field) {
        if(field ==='no') return; //|| field ==='noOld'
        this.$data.thId = $element.data().index;
        this.$data.itemid = $element.data().uniqueid;
        this.$data.divi = parseInt(row.area);
        this.$data.town=parseInt(row.town);
        clikcToEdit(this, $element);
    }.bind(this));

改写为

table.on('click','.btnEdit', function(e) {
//btnEdit是编辑按钮的样式，因为这里的行数据是动态添加的，所以不能直接绑定click事件，使用委托性能也更好。
    var $btn = e.target.nodeName == "BUTTON" ? $(e.target) : $(e.target.closest('button'));
    var $tr = $btn.closest('tr');
    this.$data.thId = $tr.data().index; //thId表示更新行数据的索引
    clikcToEdit(this, $tr);
    //e.stopImmediatePropagation(); //立即终止事件在元素树中的流动。如果使用select2组件美化下拉框，最好加上此句，因为这里的代码总会执行2次。               
}.bind(this));

2.修改clickToEdit函数
首先将原来的按钮隐藏 tarNode.find('button').hide();
编辑完成刷新这行后（updateRow）再显示原来的按钮
tarNode.find('button').show();
效果如图1和图2所示。
将单元格的文本节点和元素节点可以通过按钮切换的原理：
编辑时执行

    table.columns.forEach(function(column, i){
        if (!column.editable) return;
           switch(column.editable){
                case 'input':
                    var div=$('<div class="editable-input col-md-12 col-sm-12 col-xs-12" style="position: relative;"/>');
                    txt.push(tarNode.find('td').eq(column.fieldIndex).text());
                    div.append($('<input type="text" class="form-control input-sm"/>'));
                    div.append($('<span class="clear"><i class="fa fa-times-circle-o" aria-hidden="true"></i></span>'));
                    tarNode.find('td').eq(column.fieldIndex).text('').append(div);
                    break;
                case 'select':
                    var select=$('<select id="'+column.field+'">'), options = $.selectArray[column.field];
                    tarNode.find('td').eq(column.fieldIndex).text('').append(select);
                    setDivision($('#'+column.field), options);
                    break;
                case 'textarea':
                    break;
                default:
                    console.log(column.fieldIndex+' '+column.editable);
            }
        }, evt);

编辑完后执行

         $('#table').bootstrapTable('updateRow', {//此方法执行后单元格内值剩下文本节点
                index: table.$data.thId,
                row: {
                    noOld: txt[0],
                    area: tarNode.find('select').eq(0).children(':selected').text(),
                    town: tarNode.find('select').eq(1).children(':selected').text(),
                    address: txt[1]
                }
            });