在网页中添加表格,显示一些东西,比较麻烦,我们可以通过bootstrap-table,这个现成的包,来实现。bootstrap-table是bootstrap中一部分,只要应用于表格的显示。下载js和css的链接在文末
导入与引用
使用方法,首先你得下载齐全一些js文件,以及一些css文件,主要是
jquery-3.4.1.min.js(不一定是这个版本)
bootstrap.min.js(bootstrap的压缩包,导入,与后面的bootstrap-table存在依赖关系,有些功能实现还需要这个包)
bootstrap-table.min.js(bootstrap-table的完整包的压缩版)
bootstrap-table-zh-CN.js(表格中的文字中文汉化包,如果只要英文可以不导入)
bootstrap-table-export.js(实现excel的导出功能的依赖包)
tableExport.js(导出excel时的一些依赖包)
jquery.base64.js(解决中文乱码的问题)
jquery.form.js(支持ajax表单提交和ajax文件上传)
FileSaver.min.js(下载别的一些格式的使用需要,不是必须)
xlsx.core.min.js(下载并保存为xlsx格式时,需要)
除了导入上述的js文件外,还需要导入一些css文件,即页面布局的相关内容:
bootstrap.min.css(bootstrap会用到的部分页面布局)
bootstrap-table.min.css(bootstrap-table会用到的布局)
bootstrap-table.css(bootstrap-table会用到的布局)
font-awesome.min.css(在表格中会用到的一些图标,使用起来方便)
代码如下:
<!--
描述:样式导入
-->
<link rel="stylesheet" href="allow/bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="allow/bootstrap/css/bootstrap-table.min.css"/>
<link rel="stylesheet" href="allow/bootstrap/css/bootstrap-table.css"/>
<link rel="stylesheet" href="allow/js/laydate/theme/default/laydate.css"/>
<link href="allow/font/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<!--
描述:js导入,注意顺序,jquery必须引入
bootstrap-table-zh-CN.js为表格汉化的文件
FileSaver.min.js等是关联引用文件
-->
<script src="allow/bootstrap/js/jquery-3.4.1.min.js"></script>
<script src="allow/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="allow/bootstrap/js/bootstrap-table.min.js"></script>
<script type="text/javascript" src="allow/bootstrap/js/bootstrap-table-zh-CN.js"></script>
<script type="text/javascript" src="allow/bootstrap/js/bootstrap-table-export.js"></script>
<script type="text/javascript" src="allow/bootstrap/js/FileSaver.min.js"></script>
<script type="text/javascript" src="allow/bootstrap/js/xlsx.core.min.js"></script>
<script type="text/javascript" src="allow/bootstrap/js/tableExport.js"></script>
<script src="allow/bootstrap/js/jquery.base64.js"></script>
<script src="allow/bootstrap/js/jquery.form.js"></script>
<script src="allow/js/laydate/laydate.js" type="text/javascript"></script>
注意,导入顺序不要随意变化,导入顺序的变化可能会导致功能的不能使用。
需要用到的js和css的包,给整理好了,直接导入使用就行,下载传送门。
下载js和css文件