扩大
缩小

欢迎来到李寻欢的博客

人生三从境界:昨夜西风凋碧树,独上高楼,望尽天涯路。 衣带渐宽终不悔,为伊消得人憔悴。 众里寻他千百度,蓦然回首,那人却在灯火阑珊处。

bootstrap-table使用总结

bootstrap-table基本介绍

在业务系统开发中,对表格记录的查询、分页、排序等处理是非常常见的,在Web开发中,可以采用很多功能强大的插件来满足要求,且能极大的提高开发效率,本随笔介绍这个bootstrap-table是一款非常有名的开源表格插件,在很多项目中广泛的应用。

数据显示方式

Bootstrap-Table显示数据到表格的方式有两种,一种是客户端(client)模式,一种是服务器(server)模式。

  客户端模式:指的是在服务器中把要显示到表格的数据一次性加载出来,然后转换成JSON格式传到要显示的界面中,客户端模式较为简单,它是把数据一次性加载出来放到界面上,然后根据你设置的每页记录数,自动生成分页。当点击第二页时,会自动加载出数据,不会再向服务器发送请求。同时用户可以使用其自带的搜索功能,可以实现全数据搜索。对于数据量较少的时候,可以使用这个方法。

  服务器模式:指的是根据设定的每页记录数和当前要显示的页码,发送数据到服务器进行查询,然后再显示到表格中。该方法可以根据用户的需要动态的加载数据,节省了服务器的资源,在进行查询时,会发送一次的查询请求到服务器端进行查询,根据服务器端返回结果加载页面。

相关依赖

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

bootstrap-table 使用

HTML代码:

<table id="myTable" class="table table-hover text-nowrap"></table>

json数据:

{
  "message": "查询成功",
  "code": "200",
  "data": [{
    "id": "1",
    "blogUrl": "https://www.sojson.com/",
    "blogWorkName": "2",
  }]
}

服务器前端分页JS代码加载表格内容:

$('#myTable').bootstrapTable({
        method: 'post',  //以post的方式发送请求
        url: url,    //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(){ //加载成功时执行
            layer.msg("加载成功");
        },
        onLoadError: function(){ //加载失败时执行
            layer.msg("加载数据失败", {time : 1500, icon : 2});
        },
        responseHandler:function(res){
            //在ajax获取到数据,渲染表格之前,修改数据源
            //该项返回的为数据源内的二级列表data
            if (res.code == "200"){
                return res.data;
            }else {
			//显示报错信息
                layer.msg(res.message, {time : 1500, icon : 2});
            }
        },

        paginationLoop: true,   //换页按钮设置
        paginationHAlign: 'left',
        paginationDetailHAlign: 'right',
        paginationPreText: '上一页',
        paginationNextText: '下一页',
        columns: [{
            checkbox: true  //左侧复选框,用于多选操作
        }, {
            title: '博客ID',  //表头名称
            field: 'id',    //该列填充的数据
            align: 'center', //数据内容居中
        },{
            title: '博客链接',
            field: 'blogUrl',
	     //列表显示的是“原文链接”字样的可点击链接
            formatter: function (value, row, index) {
                var result = "";
                result += '<a style="color: #0a53be" href="'+value+'">原文链接</a>';
                return result;
            },
            align: 'center',
        }, {
            title: '博客名',
            field: 'blogWorkName',
            align: 'center',
        }
        ]
    });

样式:
image

与客户端分页不同,服务器端分页需要通过queryParams设置分页查询的参数,sidePagination的值为server。
服务器端分页JS代码加载表格内容:

$('#myTable').bootstrapTable({
        method: 'post',  //以post的方式发送请求
        url: url,    //url地址,可以是接口也可以是本地json文件
        striped: true, // 是否显示行间隔色
        pageNumber: 1, // 初始化加载第一页
        pagination: true, // 是否分页
        sortable: true,  //是否可排序
        search: true,    //是否可查询
        showColumns: true, //筛选要显示的列
        showSearchClearButton: true, //显示搜索清除按钮
        pageSize: 10, // 默认单页记录数
        pageList: [10, 15, 20],   //分页可选页数
        sidePagination: "server", //表示服务端请求
        contentType: "application/x-www-form-urlencoded",//必须要有,请求数据格式
        queryParamsType : "undefined",  //设置请求数据类型
        queryParams: function queryParams(params) { //设置请求数据
            var param = {
                pageNum: params.pageNumber,  //服务器端分页所需要的的两个参数
                pageSize: params.pageSize,
                sort: params.sort,      //排序列名
                sortOrder: params.order //排位命令(desc,asc)
            };
            return param;
        },
		
        onLoadSuccess: function(){ //加载成功时执行
            layer.msg("加载成功");
        },
        onLoadError: function(){ //加载失败时执行
            layer.msg("加载数据失败", {time : 1500, icon : 2});
        },
        responseHandler:function(res){
            //在ajax获取到数据,渲染表格之前,修改数据源
            //该项返回的为数据源内的二级列表data
            if (res.code == "200"){
                return res.data;
            }else {
			//显示报错信息
                layer.msg(res.message, {time : 1500, icon : 2});
            }
        },

        paginationLoop: true,   //换页按钮设置
        paginationHAlign: 'left',
        paginationDetailHAlign: 'right',
        paginationPreText: '上一页',
        paginationNextText: '下一页',
        columns: [{
            checkbox: true  //左侧复选框,用于多选操作
        }, {
            title: '博客ID',  //表头名称
            field: 'id',    //该列填充的数据
            align: 'center', //数据内容居中
        },{
            title: '博客链接',
            field: 'blogUrl',
	     //列表显示的是“原文链接”字样的可点击链接
            formatter: function (value, row, index) {
                var result = "";
                result += '<a style="color: #0a53be" href="'+value+'">原文链接</a>';
                return result;
            },
            align: 'center',
        }, {
            title: '博客名',
            field: 'blogWorkName',
            align: 'center',
        },{
            field: 'operate',
            title: '操作',
            align: 'center',
            valign: 'middle',
            events: {   //id为edit的按钮的点击事件。
                'click #edit': function (e, value, row, index) {
                    editInfo(row.id);
                },
            },
            formatter: function (value, row, index) {
                var result = "";
                result += '<button id="edit" class="btn btn-info" data-toggle="modal" data-target="#editModal">修改</button>';
                return result;
            }
        }
        ]
    });

当后端传给前端的数据有着多重嵌套时,简单的返回二级数组中的数据显然不能满足我们的需求,我们可以对数据进行进一步处理,将所要的数据放在一个新建对象数组中:

responseHandler:function(res){
            if (res.code == "200"){
                var userInfo = res.data;
                var NewData = [];
                if (userInfo.length){
                    for (var i = 0; i < userInfo.length; i++){
                        var dataNewObj = {  //自己定义的一个对象,用于存放数据
                            "id": '',
                            "username": '',
                            "classId": '',
                            "score": '',
                        };
                        dataNewObj.id = userInfo[i].user.account;  //取出data[i]中的user元素中的account元素的值
                        dataNewObj.username = userInfo[i].user.userName;
                        dataNewObj.classId = userInfo[i].user.classRoom.className;
                        dataNewObj.score = userInfo[i].score.score;
                        NewData.push(dataNewObj);  //将对象存到数组中
                    }
                }
                var data = {
                    rows:NewData,
                };
                return data;
            }else {
                layer.msg(res.message, {time : 1500, icon : 2});
                return false;
            }
        },

image

遇到的问题和解决

  • 问题描述:一开始使用时,不知道在responseHandler中对后端的数据进行处理,导致列表的排序存在问题。比如同一级的多个数据进行显示时,点击排序会将多列进行排序,而且排序的顺序并不是我们想要的顺序,显得有点杂乱无章。
    解决方法:通过在responseHandler中对数据进行处理,将所要的数据封装在同一个类里面,就可以实现各个数据排序上的独立。需要新建一个类来存储所要的数据,对类的元素进行对应的命名,在columns中对数据进行加载时,field用的是类中的元素名。将类放入数组中,我们把它命名为myData,返回的数据为键值对的rows:myData
  • 问题描述:想要在表格中显示按钮、链接等一些自己定义的内容,或者根据填充数据的内容来显示更容易理解的数据样式等。
    解决方法:columns是我们用来加载表格数据内容的东西,要显示不同的内容,也是在这个地方进行修改。在该列内容填充中加入如下方法,就是对显示数据进行处理,使得显示的内容为“原文链接”,而不是一个链接字符串,使得显示更美观。
	    formatter: function (value, row, index) {
                var result = "";
                result += '<a style="color: #0a53be" href="'+value+'">原文链接</a>';
                return result;
            },

总结

bootstrap-table的使用总体上是比较简单的,他为我们封装了很多的功能方法,只需要一句语句就能对一个功能进行开关,只要我们在使用时查看官方文档,基本上就能对数据以列表的形式进行显示。较为麻烦,也是难度较高的就是对数据的处理了,不管是在responseHandler中对数据的加工还是columns中对数据显示的处理都是我们经常使用的,因此对这部分的掌握也更为重要。

参考文献、博客

Bootstrap Table中文网
Bootstrap-table 使用总结 作者:星火燎原

posted @ 2021-06-24 20:26  mybky2021  阅读(786)  评论(0编辑  收藏  举报
Live2D