bootstrap-editable实现bootstrap-table行内编辑

最新推荐文章于 2021-05-07 11:31:58 发布

weixin_30596735

最新推荐文章于 2021-05-07 11:31:58 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

文章标签： python json

原文链接：http://www.cnblogs.com/cwr-toki/p/9854685.html

本文详细介绍了如何使用bootstrap-editable插件实现表格行内编辑功能，包括插件引入、列初始化代码设置、保存修改的后台调用方法及动态控制编辑状态。

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

bootstrap-editable行内编辑效果如下：

需要引入插件

列初始化代码，为可编辑的列添加editable属性：

columns = [
             {
                 title: '文件名',
                 field: 'Name',
                 align: 'center',
                 valign: 'middle',
                 sortable: true,
                 width: '20%'
             }, {
                 title: '文件版本号',
                 field: 'VerNum',
                 align: 'center',
                 valign: 'middle',
                 sortable: true,
                 width: '20%',
                 editable:{
                     emptytext: '-',
                 }
             }, {
                 title: '文件描述',
                 field: 'Description',
                 align: 'center',
                 valign: 'middle',
                 editable: {
                     emptytext: '-'
                 }
             }, {
                 title: '文件ID',
                 field: 'ObjectId',
                 visible: false
             }
    ]

保存修改后台调用方法：

function $onRowEditableSave(field, row, oldValue, $el) {        
        $.ajax({
            type: "post",
            url: "../FilesDownload/Edit?type=FileInfo",
            data: { strJson: JSON.stringify(row) },
            success: function (data, status) {
                if (data == "1" && status == "success") {
                    showTip('修改成功！', "success");                    
                    refreshTable();
                    $('#table .editable').editable('enable');
                    $('#btn_offeditfile').hide();
                    $('#btn_editfile').show();
                }
                else {
                    showTip('修改失败！', "error");
                    refreshTable();
                    $('#table .editable').editable('enable');
                    $('#btn_offeditfile').hide();
                    $('#btn_editfile').show();
                }
            },
            error: function () {

                showTip('连接服务器超时！', "error");
            },
            complete: function () {

            }

        });
    }

通过js动态控制是否可编辑：

$('#table .editable').editable('disable');

转载于:https://www.cnblogs.com/cwr-toki/p/9854685.html