bootstrap-table行内编辑内容，解决blur事件多次触发的问题

原创于 2023-02-16 16:41:39 发布 · 571 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap #javascript #ecmascript

该代码段展示了如何初始化一个bootstrapTable，包括设置请求方法、URL、分页、列定义等。特别地，当用户点击title列时，单元格变为可编辑，并在失去焦点时记录修改。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

var table = $('#table').bootstrapTable({
                method: "get",
                url: url,
                pagination: true,
                cache: false,
                sidePagination: "server",
                columns: [{
                        field: 'id',
                        title: '参数',
                        align: 'center',
                }, {
                        field: 'title',
                        title: '名称',
                        align: 'center',
                }, {
                        title: '操作',
                        formatter: operationTable,
                }],
                onClickCell: function (field, value, row, $element) {
                        if (field == 'title') {
                                $element.attr('contenteditable', true);
                                $element.unbind('blur').blur(function () {
                                        console.log(row)
                                })
                        }
                }
        });