bootstrap-table的基本使用

最新推荐文章于 2023-03-24 07:00:00 发布

流风川

最新推荐文章于 2023-03-24 07:00:00 发布

阅读量503

点赞数 2

分类专栏： bootstrap-table 文章标签： css bootstrap 前端 jquery

本文链接：https://blog.csdn.net/qq_44292366/article/details/112148244

版权

bootstrap-table 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

bootstrap-table的基本使用

一、基本使用步骤
- 1.引入相关资源文件

一、基本使用步骤

1.引入相关资源文件

页面如下：
在这里插入图片描述

代码如下（示例）：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <title>bootstrap-table</title>
    <!--css样式-->
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/bootstrap-table.min.css">
    <!--js样式-->
     <script src="js/jquery-3.5.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/bootstrap-table.min.js"></script>
    <script src="js/bootstrap-table-zh-CN.min.js"></script>
    <%--表格导出脚本引入--%>
    <script src="js/bootstrap-table-export.min.js"></script>
    <script src="js/tableExport.min.js"></script>
    <script src="js/jspdf.min.js"></script>
    <script src="js/jspdf.plugin.autotable.js"></script>
    <%--表格打印脚本--%>
    <script src="js/bootstrap-table-print.min.js"></script>
</head>
<body>
<div id="toolbar">
    <div class="form-inline" role="form">
        <div class="form-group">
            <span>偏移量: </span>
            <input name="offset" class="form-control w70" type="number" value="0">
        </div>
        <div class="form-group">
            <span>限制: </span>
            <input name="limit" class="form-control w70" type="number" value="5">
        </div>
        <div class="form-group">
            <input name="search" class="form-control" type="text" placeholder="搜索">
        </div>
        <div class="form-group">
            <button id="print" class="btn btn-info btn-undefined" type="button" name="print" aria-label="Print" title="Print"><i class="glyphicon glyphicon-print icon-share"></i> 打印</button>
        </div>
        <button id="ok" type="submit" class="btn btn-primary">查询</button>
    </div>
</div>



<div class="container" style="margin-top: 150px">
    <table id="table"></table>
</div>

<script>
    //打印事件
    $("#print").click(function (){
        var printData = $('#table').parent().html();
        window.document.body.innerHTML = printData;
        // 开始打印
        window.print();
        window.location.reload(true);
    })
</script>
<script>
    $("#table").bootstrapTable({
        url: 'user/findAllUser',    //请求路径
        method: 'get', //请求方式
        dataType:"json",    //表格数据类型
        cache:false,    //不缓存
        striped:true,   //是否紧凑
        pagination:true,    //启用分页
        sidePagination: "client", //客户端分页
        sortable:true,  //客户端排序一般排序方式排序字段同用
        sortOrder:"asc",    //排序方式 desc 降序 asc 升序
        // silentSort:true,    //静态排序
        toolbar:"#toolbar", //自定义工具栏
        detailView:true,  //显示详细视图
        detailFormatter:function (index,row){
            var html = []
            $.each(row, function (key, value) {
                html.push('<p><b>' + key + ':</b> ' + value + '</p>')
            })
            return html.join('')
        },  //显示详细视图的数据转换函数
        rowStyle:function (row,index){
            var classes = [
                'info',
                'active',
                'success',
                'danger',
                'warning'
            ]

            if (index % 2 === 0 && index / 2 < classes.length) {
                return {
                    classes: classes[index / 2]
                }
            }
            return {
                css: {
                    color: 'blue'
                }
            }
        },  //定义行样式类型
        iconSize: "undefined",  //定义图标大小可选值 undefined | ls | sm
        showColumnsSearch: true,    //显示列搜索框
        showColumns: true,  //显示选择列
        showColumnsToggleAll: true, //显示列切换全部
        pageList: "[10, 25, 50, 100, 200, All]",    //定义可选的行数
        // pageNumber:"1", //定义在第几页
        // pageSize:"2",   //定义初始化页面大小
        paginationPreText: "上一页",   //上一页文字
        paginationNextText: "下一页",  //下一页文字
        showButtonText: true,   //显示按钮文字
        paginationHAlign: "left",   //页数选择栏在左边
        paginationDetailHAlign: "right",    //页面大小选择在右边
        search:true,    //显示搜索框
        showExport: true,   //显示导出按钮
        exportDataType: "basic",    //默认basic：只导出当前页的表格数据；all：导出所有数据；selected：导出选中的数据
        // exportButton:$("#id"),  //绑定自定义按钮样式和图标
        exportOptions: {
            fileName:"用户数据",    //文件名
            worksheetName:"sheet1", //表格工作区名
            tableName: "文档数据表格",    //表格名
        },  //导出参数设置
        showSearchButton: true, //显示搜索按钮
        showSearchClearButton: true,    //显示搜索清除按钮
        showRefresh: true,  //显示刷新按钮
        showFullscreen: true,   //是否全屏显示
        buttonsClass:"info",    //按钮的类选择器名
        showPaginationSwitch: true, //显示或隐藏分页信息
        clickToSelect:true, //点击行进行选中checkbox
        // buttonsPrefix:"btn btn-sm", //按钮前缀的定义
        // cardView:true,  //表格卡视图
        showToggle: true,   //显示详细信息转换按钮
        columns: [{checkbox: true,},
            {
                title: "序号",
                formatter:function (value,row,index){
                    return index+1;
                }
            },
            {field: 'id', title: 'id', visible: false,switchable:false /*决定是否列切换与否*/},
            {field: 'name',title: '姓名'},
            {field: 'gender',title: '性别'},
            {field: 'age', title: '年龄'},
            {field: 'address', title: '籍贯'},
            {field: 'qq', title: 'QQ'},
            {field: 'email', title: 'email'},
            { field: 'operate',
                title: '操作',
                align: 'center',
                valign: 'middle',
                width: 200,
                events: {
                    'click #edit': function (e, value, row, index) {
                       alert(row.id)
                    },
                    'click #delete': function (e, value, row, index) {
                        deleteInfo(row.id);
                    },
                    'click #add': function (e, value, row, index) {
                    }
                },
                formatter: function (value, row, index) {
                    var result = "";
                    result += '<button id="edit" class="btn btn-info" data-toggle="modal" data-target="#updateBookInfo">编辑</button>';
                    result += '<button id="add" class="btn btn-success" data-toggle="modal" data-target="#addBookInfo" style="margin-left:10px;">添加</button>';
                    result += '<button id="delete" class="btn btn-danger" style="margin-left:10px;">删除</button>';
                    return result;
                }
            }
        ],
    });
</script>
</body>
</html>