bootstrap中table的使用

yeapT

已于 2024-05-24 14:50:37 修改

阅读量3.3k

点赞数

分类专栏： Java # bootstrap 文章标签： bootstrap javascript 前端

于 2022-07-24 15:57:08 首次发布

本文链接：https://blog.csdn.net/weixin_43487532/article/details/125960042

版权

Java 同时被 2 个专栏收录

22 篇文章 0 订阅

订阅专栏

bootstrap

2 篇文章 0 订阅

订阅专栏

最近项目中要展示一个表格，就使用了bootstrap的表格，听说巨好用，但是还是碰到了些坑。

1.html编写

html比较简单，主要就是引入bootstrap的样式和jquery。jquery是为了表格加载直接请求后端接口。

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 引入bootstrap样式 -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入bootstrap-table样式 -->
    <link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet">

    <!-- jquery -->
    <script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

    <!-- bootstrap-table.min.js -->
    <script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
    <!-- 引入中文语言包 -->
    <script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script>

    <meta charset="UTF-8">
    <title>测试</title>
</head>
<body>
<table id="myTable" class="table table-hover text-nowrap"></table>
</body>
</html>

2.Js编写

js的编写主要就是注意url表示你后端的请求额接口，method请求方法。

responseHandler：因为获取到的数据可能是json，包含记录和一些提示，所以这个函数可以对其进行处理，获得最终记录和列对应。
在这里插入图片描述

columns：里面包含的就是初始化表格的列，field对应的是你返回记录的属性，title就是初始化列你取的名字。
在这里插入图片描述

在这里插入图片描述

$(function () {
        $('#myTable').bootstrapTable({
            method: 'get',  //以post的方式发送请求
            url: '/testList',    //url地址，可以是接口也可以是本地json文件
            striped: true, // 是否显示行间隔色
            pageNumber: 1, // 初始化加载第一页
            pagination: true, // 是否分页
            sortable: true,  //是否可排序
            search: true,    //是否可查询
            showColumns: true, //筛选要显示的列
            showSearchClearButton: true, //显示搜索清除按钮
            pageSize: 10, // 默认单页记录数
            pageList: [10, 15, 20],   //分页可选页数
            sidePagination: "client", //表示客户端请求
            clickToSelect: true,                //是否启用点击选中行
            //height: 500,                      //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
            uniqueId: "id",                     //每一行的唯一标识，一般为主键列
            showToggle: true,                   //是否显示详细视图和列表视图的切换按钮
            cardView: false,                    //是否显示详细视图
            detailView: false,                  //是否显示父子表
            onLoadSuccess: function () { //加载成功时执行
                debugger;
                console.log("加载成功");
            },
            onLoadError: function () { //加载失败时执行
                debugger;
                console.error("加载数据失败");
            },
            responseHandler: function (res) {
                //在ajax获取到数据，渲染表格之前，修改数据源
                //该项返回的为数据源内的二级列表data
                if (res.code == "200") {
                    return res.rows;
                } else {
                    //显示报错信息
                    console.error(res);
                }
            },

            paginationLoop: true,   //换页按钮设置
            paginationHAlign: 'left',
            paginationDetailHAlign: 'right',
            paginationPreText: '上一页',
            paginationNextText: '下一页',
            columns: [{
                checkbox: true  //左侧复选框，用于多选操作
            }, {
                title: 'ID',
                field: 'id',
                visible: false,
                align: 'center',
                valign: 'middle',
                sortable: true
            },
                {
                    title: '序号',
                    visible: true,
                    align: 'center',
                    valign: 'middle',
                    width: '50px',
                    formatter: function (value, row, index) {
                        return index + 1;
                    }
                },
                {
                    title: '关键词',
                    field: 'keywords',
                    visible: true,
                    align: 'center',
                    valign: 'middle',
                    sortable: false,
                    width: '160px'
                },
                {
                    title: '新闻标题',
                    field: 'newsTitle',
                    visible: true,
                    align: 'center',
                    valign: 'middle',
                    sortable: false,
                    width: '160px'
                },
                {
                    title: '新闻作者',
                    field: 'author',
                    visible: true,
                    align: 'center',
                    valign: 'middle',
                    sortable: false,
                    width: '160px'
                },
                {
                    title: '创建时间',
                    field: 'createDatetime',
                    visible: true,
                    align: 'center',
                    valign: 'middle',
                    sortable: false,
                    width: '160px'
                }
            ]
        });
    });

3.后端java的编写

这里我是一个类型于新闻的类的列表返回，就是数据库查询多条记录，然后使用map返回数据。碰到了个坑，没有加@ResponseBody的时候显示加载失败。

PS:@ResponseBody是作用在方法上的，@ResponseBody 表示该方法的返回结果直接写入 HTTP response body 中，一般在异步获取数据时使用【也就是AJAX】，这里bootstrap用的就是ajax。

import com.website.company.entity.News;
import com.website.company.service.NewsService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

/**
 * 类描述：测试类
 *
 * @ClassName TestController
 * @Author ward
 * @Date 2022-06-27 10:49
 */
@Controller
public class TestController {
    @Autowired
    NewsService newsService;

    @RequestMapping("/testList")
    @ResponseBody
    public Object testList() {
        List<News> datalist = newsService.allNews();
        Map map = new HashMap();
        map.put("code", "200");
        map.put("total", datalist.size());
        map.put("rows", datalist);
        return map;

    }
}

番外

在把date格式传回前端给bootstrap的table时只剩下年月日了，前端暂时没有处理办法。所以就在后端进行了处理：增加属性把时间格式转为String，并表示当前属性不是数据库的字段。代码如下：

@TableField("CREATE_TIME")
private Date createTime;

@TableField(exist = false)
protected String createTimeStr;

public String getCreateTimeStr() {
	SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd hh:mm:ss");
	return sdf.format(createTime);
}

public void setCreateTimeStr(String createTimeStr) {
	this.createTimeStr = createTimeStr;
}