BootStrap-Table——没用过bootStrap，想用BootStrap-Table做个表格 BootStrap-Table搭建

最新推荐文章于 2024-11-08 10:47:15 发布

原创最新推荐文章于 2024-11-08 10:47:15 发布 · 1.8k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#bootStrap #bootStrap-table

前端开发专栏收录该内容

9 篇文章

订阅专栏

本文介绍了BootStrap-Table的使用方法，包括为何选择BootStrap-Table，其基本思想和优势。文章详细讲解了如何通过HTML和JS进行表格初始化，包括两种方式：仅HTML声明和HTML+JS结合。还提到了后台数据结构要求，并提供了资源链接和参考博客。最后，作者分享了使用组件自定义样式和解决特定问题的经验。

一、思想

第一：为什么要用bootstrap-table来构建table？
第二：bootstrap是前端框架，他的思路或者说优势（特点）是什么？
第三：要以一种什么样的角度去实现用bootstrap-table来构建table？

也就是说在用bootstrap-table来构建table的时候，我们必须要有想法，要对bootstrap的思路和实现有个简单的了解，这样，思维的角度和高度一致了，去解决问题就简单多了。看下图：

Bootstra框架用途和优点

我们可以使用bootstra框架提供的样式和组件快速的完成一个网站的前端页面，只需要引用一些定义好样式和组件（通过定义好的class来引用相应的样式和组件），就可以完成一个非常漂亮网页。而且bootstra框架还支持自适应，在不同大小的屏幕上会自动调节网页显示的内容，避免了在在pc上很漂亮的网页，而在移动端（小屏幕）左右出现滚动条，网页内容太小看不清等不利于用户体验的表现。

OK，也就是说，我们要以组件和调用、声明的思路去用BootStrap-Table。。。。明确了这一点，下面就简单了。

二、在开始之前

现在我们来说说BootStrap-Table的后台，BootStrap-Table的使用是离不开后台的，他需要页面数据来填充表格，bootstrap-table的一大特点就是不需要多余的代码，只要你传的参数的结构和他需要的对应上，配置一下就可以完美的在页面上展现了，因为他把其中的操作都已经封装好了，那么他的数据的结构是什么样子的呢？

在BootStrap-Table自己YY的数据信息的结构来说是这样的：

（用简单一点的结构表现）一个ArrayList的集合，里面存放了某一个实体类（比如：studentPoint）的很多个对象，而对象本身自带很多属性（比如：id,name,id_subject,subject_point,avgPoint,...）

说白了就是：一个集合里面放了对象，对象里面的数据是以键值对形式给出的。。。。那么可以转变为：

一个ArrayList的集合，利用循环声明N个map集合，再循环里面给map集合以键值对的形式放值并将map集合add到list中。

所以代码就是这个样子的：

Map<String, String> redisMap = null;
List<Map<String, String>> redisList = new ArrayList<Map<String, String>>();
	for (int i = 0; i < 100; i++) {
		redisMap = new HashMap<>();
		redisMap.put("id",i+"");
		redisMap.put("id_subject", i+"数学");
		redisMap.put("subject_point", "英语"+i);
		redisMap.put("name", "守望先锋可好玩了");
		redisMap.put("avgPoint", i*2+"");
		redisList.add(redisMap);
	}

当然，有点常识的都记得转String。

三、在开始之前二

资源获取：https://download.csdn.net/download/jason_a/10817405

导入以上文件

四、开始构建

之前说过了，bootStrap是以组件的思维进行的，那么理所当然，构建table，其实也就是初始化bootStrap-table。

而在bootStrap-table中构建table的方式有两种。

第一种就是仅仅在HTML中声明一个<table></table>，然后给定id，利用js文件绑定初始化的容器。

第二种就是在html中进行初始化，在进行table构建的时候，在td、th等标签里面进行一些属性的给出，达到和js实现一样的效果。

现在我们从简单的开始入手，先说第一种：

首先html中就几行代码：

<div id="main" class="div_main">
	<table id="ArbetTable"></table>
</div

然后，就是js文件：

需要说明的是，我使用的不是这个方法，所以这是copy的。

$(function () {

    //1.初始化Table
    var oTable = new TableInit();
    oTable.Init();

    //2.初始化Button的点击事件
    var oButtonInit = new ButtonInit();
    oButtonInit.Init();

});

/*----------------------------这里是关键-------------------------*/
var TableInit = function () {
    var oTableInit = new Object();
    //初始化Table
    oTableInit.Init = function () {
        $('#tb_departments').bootstrapTable({
            url: '/Home/GetDepartment',         //请求后台的URL（*）
            method: 'get',                      //请求方式（*）
            toolbar: '#toolbar',                //工具按钮用哪个容器
            striped: true,                      //是否显示行间隔色
            cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination: true,                   //是否显示分页（*）
            sortable: false,                     //是否启用排序
            sortOrder: "asc",                   //排序方式
            queryParams: oTableInit.queryParams,//传递参数（*）
            sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
            pageNumber:1,                       //初始化加载第一页，默认第一页
            pageSize: 10,                       //每页的记录行数（*）
            pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
            search: true,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
            strictSearch: true,
            showColumns: true,                  //是否显示所有的列
            showRefresh: true,                  //是否显示刷新按钮
            minimumCountColumns: 2,             //最少允许的列数
            clickToSelect: true,                //是否启用点击选中行
            height: 500,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
            uniqueId: "ID",                     //每一行的唯一标识，一般为主键列
            showToggle:true,                    //是否显示详细视图和列表视图的切换按钮
            cardView: false,                    //是否显示详细视图
            detailView: false,                   //是否显示父子表
            columns: [{
                checkbox: true
            }, {
                field: 'Name',
                title: '部门名称'
            }, {
                field: 'ParentName',
                title: '上级部门'
            }, {
                field: 'Level',
                title: '部门级别'
            }, {
                field: 'Desc',
                title: '描述'
            }, ]
        });
    };


/*------------------------------------------------------*/

    //得到查询的参数
    oTableInit.queryParams = function (params) {
        var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
            limit: params.limit,   //页面大小
            offset: params.offset,  //页码
            departmentname: $("#txt_search_departmentname").val(),
            statu: $("#txt_search_statu").val()
        };
        return temp;
    };
    return oTableInit;
};


var ButtonInit = function () {
    var oInit = new Object();
    var postdata = {};

    oInit.Init = function () {
        //初始化页面上面的按钮事件
    };

    return oInit;
};

这个方式不太懂的可以去看下下面的博客：

比较精简的：https://www.cnblogs.com/baixiaoguang/p/7094459.html

比较细节一点的：https://www.cnblogs.com/wuhuacong/p/7284420.html

扩展比较多的：http://www.cnblogs.com/landeanfen/p/4976838.html

可以参考一下的：https://www.cnblogs.com/franknihao/p/8145597.html?tdsourcetag=s_pcqq_aiomsg

总之上面的部分其实也很好懂，最最重要的就是oTableInit.Init这个方法了。

另外有两个方向：

第一就是打开分页开关：

打开分页开关的时候，因为上面设置的是服务器端分页所以在你传数据过来的时候，数据的结构会改变。

{total:22,rows:{}}会以左边的形式传递，如果不是这个形式会有问题。说明一下：total是记录数，row{}是页面上显示的数据

第二就是关闭分页开关：

当你关闭分页开关的时候，你传递的参数可以不是{total:22,rows:{}}这个形式了【没有实际验证过】但是为了后面的可扩展性，建议还是传递一样的参数。这个时候，下面的//得到查询的参数 oTableInit.queryParams 这一部分可以注释掉了。

columns这个属性和下面的字段，就是用来显示页面信息的，field是你的数据中的key，title就是页面上显示的字段名。

第二种，仅仅以html中的标签进行定义，已达到效果。

这个方法其实也很简单，有了第一种的基础以后，在实现这个就会简单很多。

首先，先在html中声明table。然后，按照原来接触过的html的语法写一个table，只写表头。然后在表头的的标签<th>中定义属性。关键的属性就是data-field、data-valign、data-align和表头的文字。然后，查阅文档将data-url等一系列的关键属性也添加上去。

文档路径：http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/

这里的标签列就是需要加上去的属性的名字，自己看着定义就好。参照上面的初始化的那些字段给。

哈哈，接下来就是我使用的第三种了：

两种相结合的方式定义和初始化table。

因为我需要的样式要求比较高，对CSS3也比较熟悉，所以就使用的这个方法。

首先页面上定义table

<table id="ArbetTable">
    <thead>
    <tr>
        <th data-field="id" data-valign="middle" data-align="center">学号</th>
        <th data-field="id_subject" data-valign="middle" data-align="center">科目</th>
        <th data-field="subject_point" data-valign="middle" data-align="center">科目分数</th>
        <th data-field="name" data-valign="middle" data-align="center">姓名</th>
        <th data-field="avgpoint" data-valign="middle" data-align="center">平均分</th>
    </tr>
    </thead>
    <tfoot>
    <tr>
        <td data-field="name" data-valign="middle" data-align="center">班级</td>
        <td data-field="avgpoint" data-valign="middle" data-align="center" colspan="4" data-search-formatter></td>
     </tr>
    </tfoot>
    </table>

在写js：

$(function() {
    //1.初始化Table
    var oTable = new TableInit();
    oTable.Init();
    });
	var TableInit = function() {
		var oTableInit = new Object();
		//初始化Table
		oTableInit.Init = function() {
			$('#ArbetTable').bootstrapTable({
				url : '/redismanage/bootstrap', //请求后台的URL（*）
				method : 'post', //请求方式（*）
				toolbar : '#toolbar', //工具按钮用哪个容器
				striped : true, //是否显示行间隔色
				cache : false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
				pagination : false, //是否显示分页（*）
				sortable : false, //是否启用排序
				sortOrder : "asc", //排序方式
				queryParams : oTableInit.queryParams,//传递参数（*）
				sidePagination : "server", //分页方式：client客户端分页，server服务端分页（*）
				pageNumber : 1, //初始化加载第一页，默认第一页
				pageSize : 10, //每页的记录行数（*）
				pageList : [ 10, 25, 50, 100 ], //可供选择的每页的行数（*）
				search : false, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
				contentType : "application/x-www-form-urlencoded",
				strictSearch : true,
				showColumns : false, //是否显示所有的列
				showRefresh : false, //是否显示刷新按钮
				minimumCountColumns : 2, //最少允许的列数
				clickToSelect : false, //是否启用点击选中行
				//height : 300, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
				uniqueId : "no", //每一行的唯一标识，一般为主键列
				showToggle : false, //是否显示详细视图和列表视图的切换按钮
				cardView : false, //是否显示详细视图
				detailView : false, //是否显示父子表
				classes :'table-no-bordered',
			});
		};

	//得到查询的参数
	oTableInit.queryParams = function(params) {
		var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
			limit : params.limit, //页面大小
			offset : params.offset
		};
		return temp;
	};
	return oTableInit;
};

在这里需要说的一点就是JavaScript中的classes :'table-no-bordered',这个属性了。在JavaScript文件中加入这句话就会让组件的table不在自己自动给出的样式，会恢复默认的样式，然后在根据自己的需求，用CSS3进行样式的定义了。

另外，说一下我目前遇到的问题：我需要在显示的信息的下面加一行补充总结，也就是上面html中table的<tfoot>这一部分。但是因为过来的数据自动就会匹配到表格中，所以目前怎么解决也还正在看。

样式代码也给一份吧，可以参考下的：

<style>
#ArbetTable {
	margin:0;
	padding:0;
	width: 100%;
	height: auto;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	border-collapse: collapse;
  	-webkit-transform: translateZ(0);
	-webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
}

#ArbetTable th {
	font-size:15px;
	color:white;
	font-weight:bold ;
	background-color: #61c774;
	line-height: 35px;
	height: 35px;
	width: auto;
  	border-left: 1px solid #e9e9e9;
}
#ArbetTable td {
	text-align:center;
	font-size:14px;
	line-height: 35px;
	height: 35px;
	color:black;
	text-align: center;
	border: 1px solid #e9e9e9;
	border-right: 1px solid #e9e9e9;
	background: white;
	
}

</style>