bootstrap editable 行内编辑

最新推荐文章于 2025-03-26 08:48:38 发布

微辣米粉

最新推荐文章于 2025-03-26 08:48:38 发布

阅读量1w

点赞数

分类专栏：【前端】

本文链接：https://blog.youkuaiyun.com/tuntun1120/article/details/80054710

版权

【前端】专栏收录该内容

10 篇文章

订阅专栏

本文介绍了如何在Bootstrap中实现行内编辑功能，通过引入必要的JS和CSS文件，结合editable插件，可以轻松创建可编辑的表格行。

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

除了那些bootstrap/bootstrap table的js , css之外，要额外添加editable的文件：

<link href="../assets/css/bootstrap-editable/bootstrap-editable.css" rel="stylesheet">
<script src="../assets/js/bootstrap-editable/bootstrap-editable.js"></script>
<script src="../assets/js/bootstrap-editable/bootstrap-table-editable.js"></script>

然后写js

$('#tableId').bootstrapTable({
        data:data['data'],
        pagination: true,
        locale:"zh-US",
        pageSize: 5,
        singleSelect: false,
        clickToSelect: true,//一定要写！！可以选择：用于edittable
        sidePagination: "client",
        columns: [
            {
                title: '姓名',
                field: 'name',
                align: 'center',
                valign: 'middle'
            },{
                title: '年龄',
                field: 'age',
                align: 'center',
                valign: 'middle',
                editable: {
                    type: 'text',
                    title: '年龄',
                    validate: function (v) {
                        if (!v) return '不能为空';
                    }
                }
            },{
                title: '操作',
                field: 'id',
                align: 'center',
                valign: 'middle',
                formatter:function (value, data, index) {
                    var d =  '<button type="button" class="btn btn-danger" οnclick="del(\'' + data.id + '\')" >删除</button>';
                    return d;
                }
            }
        ],
        onEditableSave: function (field, row, oldValue, $el) {//提交行内编辑数据
            debugger;
            console.info(row);
            $.ajax({
                type: "post",
                url: "/test/edit",
                /*data: row,*/
                data:{ "name": row.name,"age":row.age},
                dataType: 'JSON',
                success: function (data, status) {
                    if (status == "success") {
                        alert('成功');
                    }
                },
                error: function () {
                    alert('失败');
                },

            });
        }
    });