Bootstrap Table （1）

最新推荐文章于 2022-07-24 15:57:08 发布

原创最新推荐文章于 2022-07-24 15:57:08 发布 · 445 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap table

bootstrap 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何使用BootstrapTable插件创建具备排序、分页等功能的表格。包括通过data属性和JavaScript两种方式启动表格的方法，以及一个关于自动生成序号并打印所选行内容的例子。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Bootstrap中文网：http://www.bootcss.com/

Bootstrap Github：https://github.com/twbs/bootstrap/tree/master

Bootstrap Table：http://bootstrap-table.wenzhixin.net.cn/zh-cn/

引入Bootstrap文件

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title></title>
		<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
		<!-- 以下两个插件用于在IE8以及以下版本浏览器支持HTML5元素和媒体查询，如果不需要用可以移除 -->
        <!--[if lt IE 9]>
        	<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        	<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
	</head>
	<body>
		<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
		<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
	</body>
</html>

当然，也可以用npm等工具安装。

Bootstrap Table

简单介绍下bt，基于 Bootstrap 的 jQuery 表格插件，通过简单的设置，就可以拥有强大的单选、多选、排序、分页，以及编辑、导出、过滤（扩展）等等的功能。

CDN：

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>

<!-- Latest compiled and minified Locales -->
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script>

其启动方式有两种。

1、data属性方式

<table data-toggle="table">
    <thead>
        <tr>
            <th>Item ID</th>
            <th>Item Name</th>
            <th>Item Price</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Item 1</td>
            <td>$1</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Item 2</td>
            <td>$2</td>
        </tr>
    </tbody>
</table>

也可以通过设置远程的 url 如 data-url="data1.json" 来加载数据。

<table data-toggle="table" data-url="data1.json">
    <thead>
        <tr>
            <th data-field="id">Item ID</th>
            <th data-field="name">Item Name</th>
            <th data-field="price">Item Price</th>
        </tr>
    </thead>
</table>

data1.json:

[{
	"id":"10001",
	"name":"name1",
	"price":1533
},{
	"id":"10002",
	"name":"name2",
	"price":15333
},{
	"id":"10003",
	"name":"name3",
	"price":15331
}]

通过JavaScript启动

<table id="table"></table>

$('#table').bootstrapTable({
    columns: [{
        field: 'id',
        title: 'Item ID'
    }, {
        field: 'name',
        title: 'Item Name'
    }, {
        field: 'price',
        title: 'Item Price'
    }],
    data: [{
        id: 1,
        name: 'Item 1',
        price: '$1'
    }, {
        id: 2,
        name: 'Item 2',
        price: '$2'
    }]
});

通过json也行：

$('#table').bootstrapTable({
    url: 'data1.json',
    columns: [{
        field: 'id',
        title: 'Item ID'
    }, {
        field: 'name',
        title: 'Item Name'
    }, {
        field: 'price',
        title: 'Item Price'
    }, ]
});

实例：表格简单功能

主要功能：

1、自动生成序；

2、打印出选择的行内容。

<!DOCTYPE html>
<html>
<head>
    <title>getSelections</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="http://issues.wenzhixin.net.cn/bootstrap-table/assets/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://issues.wenzhixin.net.cn/bootstrap-table/assets/bootstrap-table/src/bootstrap-table.css">
    <script src="http://issues.wenzhixin.net.cn/bootstrap-table/assets/jquery.min.js"></script>
    <script src="http://issues.wenzhixin.net.cn/bootstrap-table/assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="http://issues.wenzhixin.net.cn/bootstrap-table/assets/bootstrap-table/src/bootstrap-table.js"></script>
    <script src="http://issues.wenzhixin.net.cn/bootstrap-table/ga.js"></script>
</head>
<body>
    <div class="container">
        <table id="table" data-toggle="table" data-toolbar="#toolbar" data-height="290">
            <thead>
            	<tr>
            		<th data-checkbox="true"></th> 
                	<th data-field="index"  data-formatter="indexFormatter">序</th>
                	<th data-field="id">商品编号</th>
                	<th data-field="name">商品全称</th>
                	<th data-field="unit">单位</th>
                	<th data-field="price">单价</th>
            	</tr>
            </thead>
        </table>
        <input type="button" name="printBtn" id="printBtn" value="打印" />
        <div id="tips"></div>
    </div>
	<script>
	    var  data =[
		    {
		        "id": 1000,
		        "name":"苹果",
		        "unit":"斤",
		        "price":"5元"
		    },
		    {
		        "id": 1001,
		        "name":"梨子",
		        "unit":"斤",
		        "price":"3元"
		    },
		    {
		        "id": 1002,
		        "name":"香蕉",
		        "unit":"斤",
		        "price":"3.5元"
		    },
		    {
		        "id": 1003,
		        "name":"柚子",
		        "unit":"斤",
		        "price":"6元"
		    },
		    {
		        "id": 1004,
		        "name":"湖北香米",
		        "unit":"斤",
		        "price":"4.1元"
		    },
		    {
		        "id": 1005,
		        "name":"青菜",
		        "unit":"斤",
		        "price":"4元"
		    }
		]
	    $(function () {
	    	//载入数据
			$("#table").bootstrapTable("load",data); 
			//点击打印事件
			$('#printBtn').click(function(){	
				var html = "选择的商品：<br/>";
				//获取选中行的值
				var selects = $('#table').bootstrapTable('getSelections'); 
				//转换json数据
				var newSelects = $.parseJSON(JSON.stringify(selects));
				for (var i =0;i<newSelects.length;i++) {
					html =html+ "商品名："+newSelects[i].name + "<br/ >" + "单价：" +newSelects[i].price+"/"+newSelects[i].unit +"<br/>";
					html = html + "<hr / >";
				}
				$("#tips").html(html);
			});
	    });
	    //自动生成序
	    function indexFormatter(value, row, index) {  
	        return index + 1;  
	    }; 
	</script>
</body>
</html>