Bootstrap Table行内添加/行内编辑案例 | Bootstrap Table 行内添加/行内编辑 Demo

Vin Cente

已于 2023-02-23 14:33:07 修改

阅读量1.8k

点赞数

分类专栏： Bootstrap 文章标签： jquerybootstrap bootstrap

于 2021-08-10 18:57:09 首次发布

本文链接：https://blog.csdn.net/Mr_Fei/article/details/119576371

版权

Bootstrap 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

此博客展示了如何利用JQuery 3.6.0、Bootstrap 3.4.1以及Bootstrap-Table插件1.8.1创建一个带有编辑功能的数据表格。表格包括了产品名称、进价、售价和状态等字段，并且支持新增、修改和删除操作。状态列使用了Bootstrap-Select的下拉选择框，提供了禁用和可用两种状态。此外，还配置了搜索、刷新、分页等功能，实现了客户端数据展示和操作。

摘要由CSDN通过智能技术生成

项目场景：

JQuery版本为：3.6.0

Bootstrap版本为：3.4.1

Bootstrap-Table版本为：1.8.1

Bootstrap-Table-Edit版本为：1.0

Bootstrap-Select版本为：1.0

Bootstrap-DateTimePicker版本为：2.0

下载地址：Js文件下载地址

案例：

<style type="text/css">
    #TableData button{ margin: 0 5px;}
</style>
    <div class="col-md-1"></div>
    <div class="col-md-10">
        <div id="toolbar" class="btn-group">
            <button id="MainAdd" class="btn btn-success">
                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
            </button>
        </div>
        <div class="databox">
            <table id="TableData" class="table table-hover"></table>
        </div>
    </div>
    <div class="col-md-1"></div>
</div>
<script type="text/javascript">
    $(function(){
        $('#TableData').bootstrapTable({
            //请求方式
            method: 'Get',
            //显示工具栏
            toolbar: '#toolbar',
            //显示搜索
            search: true,
            //显示刷新
            showRefresh: true,
            //指定主键列
            idFieId: 'Project_Id',
            //唯一标识
            uniqueId: "Project_Id",
            //启用单选
            singleSelect: true,
            //点击行选中
            clickToSelect: true,
            //开启编辑模式
            editable: true,
            //显示分页
            pagination: true,
            //设置客户端分页
            sidePagination: 'Client',
            //分页显示条数
            pageSize: 10,
            //分页选项
            pageList: [10, 30, 50],
            //加载数据源
            data:[
                {"Project_Id":1,"Project_Name":"美容","Project_Price":100.00,"Project_Money":80.00,"Project_Check":false},
                {"Project_Id":2,"Project_Name":"美发","Project_Price":50.00,"Project_Money":30.00,"Project_Check":false},
                {"Project_Id":3,"Project_Name":"刘海","Project_Price":30.00,"Project_Money":20.00,"Project_Check":false},
                {"Project_Id":1,"Project_Name":"美容","Project_Price":100.00,"Project_Money":80.00,"Project_Check":false},
                {"Project_Id":2,"Project_Name":"美发","Project_Price":50.00,"Project_Money":30.00,"Project_Check":false},
                {"Project_Id":6,"Project_Name":"刘海","Project_Price":30.00,"Project_Money":20.00,"Project_Check":false},
                {"Project_Id":7,"Project_Name":"美容","Project_Price":100.00,"Project_Money":80.00,"Project_Check":false},
                {"Project_Id":8,"Project_Name":"美发","Project_Price":50.00,"Project_Money":30.00,"Project_Check":false},
                {"Project_Id":9,"Project_Name":"刘海","Project_Price":30.00,"Project_Money":20.00,"Project_Check":false},
                {"Project_Id":10,"Project_Name":"美容","Project_Price":100.00,"Project_Money":80.00,"Project_Check":false}
            ],
            //列数据
            columns: [
                { checkbox: true },
                { field: "Project_Id", title: "#", edit: false },
                { field: "Project_Name", title: "产品名称" },
                { field: "Project_Price", title: "产品进价" },
                { field: "Project_Money", title: "产品售价" },
                { field: "Project_Check", title: "产品状态", edit: { type: 'select', data: [{ id: 0, text: '禁用' }, { id: 1, text: '可用' }], valueFieId: 'id', textFieId: 'text' } },
                { field: "Operation", title: "操作", width:"180px", edit: false, formatter: function (value, row, index) {
                        var result = "";
                        result += "<button id='' class='btn btn-sm btn-info' title='修改'><span class='glyphicon glyphicon-pencil'><span></button>";
                        result += "<button id='' class='btn btn-sm btn-danger' title='删除'><span class='glyphicon glyphicon-remove'><span></button>";
                        return result;
                    }
                }
            ]
        });
        $('#MainAdd').click(function(){
		    var data = {};
            $('#TableData').bootstrapTable('append',data);	
		});
    });
</script>