Bootstrap-table使用小结

淩亂°似流年 2022-05-14 12:19 212阅读 0赞

1.首先，先上全部配置：

$tomcatBootstrapTable  = $("#connectionInstances").bootstrapTable({ // 对应table标签的id
                url: "dfc/getDFC", // 获取表格数据的url
                cache: false, // 设置为 false 禁用 AJAX 数据缓存， 默认为true
                striped: true,  //表格显示条纹，默认为false
                pagination: true, // 在表格底部显示分页组件，默认false
                pageList: [10, 20], // 设置页面可以显示的数据条数
                pageSize: 10, // 页面数据条数
                pageNumber: 1, // 首页页码
                idField: "id", //标识哪个字段为id主键
                showColumns: true,  // 显示列多选功能
                showRefresh: true, //显示刷新按钮
                silent: true, //刷新事件必须设置
                clickToSelect: true,//点击行即可选中单选/复选框
                toolbar: "#toolbar", //设置工具栏的Id或者class
                search: true,//是否显示搜索
                // strictSearch: true ,//Enable the strict search.
                sortable: true, //是否启用排序
                sortName: 'id', // 要排序的字段
                sortOrder: 'desc', // 排序规则
                sidePagination: 'server', // 设置为服务器端分页
                editable:true,//开启编辑模式
                queryParamsType : "undefined",
                queryParams: function (params) { // 请求服务器数据时发送的参数，可以在这里添加额外的查询参数，返回false则终止请求
    
                    // console.log(params)
                    return {
                        pageNumber : params.pageNumber,
                        pageSize : params.pageSize,
                        searchText:params.searchText,
                        sortName:params.sortName, // 要排序的字段
                        sortOrder:params.sortOrder // 排序规则
                    }
                },
                columns: [
                    {
                        checkbox: true, // 显示一个勾选框
                        align: 'center', // 居中显示
                        valign: 'middle' // 上下居中
                    }, {
                        field: 'name', // 返回json数据中的name
                        title: '实例名称', // 表格表头显示文字
                        align: 'center', // 左右居中
                        valign: 'middle', // 上下居中
                        sortable:true
                    }, {
                        field: 'db_name',
                        title: '数据库名',
                        align: 'center',
                        valign: 'middle',
                        sortable:true,
                        editable: {
                            type: 'text',
                            title: '数据库名',
                            mode: "inline",
                            validate: function (v) {
                                if (!v) return '数据库名不能为空';
                            }
                        }
                    }, {
                        field: 'db_type',
                        title: '数据库类型',
                        align: 'center',
                        valign: 'middle',
                        formatter: function (value, row, index){ // 单元格格式化函数
                            if (value == 1) {
                                return "Mysql";
                            } else if (value == 2) {
                                return "Oracle";
                            }
                        }
                    }, {
                        field: 'create_time',
                        title: '创建时间',
                        align: 'center',
                        valign: 'middle',
                        sortable:true,
                        formatter: function (value, row, index) {
                            return formatDate(value);
                        }
                    }, {
                        title: "操作",
                        align: 'center',
                        valign: 'middle',
                        width: 160, // 定义列的宽度，单位为像素px
                        formatter: function (value, row, index) {
                            // console.log(value, row , index);
                            // 根据 state来设置 启动 / 关闭
                            let state = row.state;
                            let btn = state === 0 ? '<button class="btn btn-info btn-sm" onclick="index.bootstrapTomcat(' + row.id + ',' + row.state  + ')">启动</button>'
                                                    : '<button class="btn btn-warning btn-sm" onclick="index.bootstrapTomcat(' + row.id + ',' + row.state  + ')">关闭</button>';
    
                            return '<button class="btn btn-danger btn-sm" onclick="index.del(\'' + row.id + '\',0)">删除</button> ' + btn;
                        }
                    }
                ],
                formatLoadingMessage: function () {
                    return "请稍等，正在加载中...";
                },
                formatNoMatches: function () { //没有匹配的结果
                    return '无符合条件的记录';
                },
                onLoadSuccess: function(){  //加载成功时执行
                    console.info("加载成功");
                },
                onLoadError: function(){  //加载失败时执行
                    console.info("加载数据失败");
                },
                onEditableSave: function (field, row, oldValue, $el) {
                    console.log(row);
                    $.ajax({
                        type: "post",
                        url: "assignment_update.do",
                        data: row,
                        dataType: 'JSON',
                        success: function (data, status) {
                            /*if (status == "success") {
                             alert('提交数据成功');
                             }*/
                            //alert('提交数据成功');
                        },
                        error: function () {
                            //alert('编辑失败');
                        },
                        complete: function () {
    
                        }
    
                    });
                }
    
            });

2.在页面上引入这些必要文件：

<link rel="stylesheet" href="common/css/bootstrap-editable.css">
        <link rel="stylesheet" href="common/css/bootstrap-table.min.css">
        <script src="common/js/bootstrap-table.min.js"></script>
        <script src="common/js/bootstrap-table-zh-CN.min.js"></script>
        
        <script src="common/js/bootstrap-editable.min.js"></script>
        <script src="common/js/bootstrap-table-editable.js"></script>
        <script src="common/js/bootstrap-table-export.js"></script>

3.下是依赖的文件

[依赖文件][Link 1]

4.参考链接：[https://www.cnblogs.com/wuhuacong/p/7284420.html][https_www.cnblogs.com_wuhuacong_p_7284420.html]

5.注意：后台数据分页的时候要注意，在写sql统计数据量的时候不要limit。

[Link 1]: https://download.csdn.net/download/bastriver/10652774
[https_www.cnblogs.com_wuhuacong_p_7284420.html]: https://www.cnblogs.com/wuhuacong/p/7284420.html