Bootstrap-Table入门Demo

超、凢脫俗 2021-09-29 05:52 406阅读 0赞

**目录**

例1

例2

--------------------

# 例1 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70][]

index.html

data1.json

[
    {
    "id": 0,
    "name": "Item 0",
    "price": "$0"
    },
    {
    "id": 1,
    "name": "Item 1",
    "price": "$1"
    },
    {
    "id": 2,
    "name": "Item 2",
    "price": "$2"
    },
    {
    "id": 3,
    "name": "Item 3",
    "price": "$3"
    },
    {
    "id": 4,
    "name": "Item 1",
    "price": "$1"
    },
    {
    "id": 5,
    "name": "Item 1",
    "price": "$1"
    },
    {
    "id": 6,
    "name": "Item 1",
    "price": "$1"
    },
    {
    "id": 7,
    "name": "Item 1",
    "price": "$1"
    }
    ]

# 例2 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1][]

index.html

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    		<link rel="stylesheet" href="css/bootstrap.min.css" />
    		<link rel="stylesheet" href="css/bootstrap-table.css" />
    		<script type="text/javascript" src="js/jquery.min.js" ></script>
    		<script type="text/javascript" src="js/bootstrap.min.js" ></script>
    		<script type="text/javascript" src="js/bootstrap-table.js" ></script>
    
    	</head>
    	<body>
    		<div id="toolbar">
    			<button class="btn btn-primary" id="btnRefresh">刷新</button>
    	    </div>
    	    
    		<table id="data-table"></table>
    	</body>
    	<script type="text/javascript">
     
    		var $table = $('#data-table');
     
    		//查询参数
    		var queryParams = {id: 1};
    		/**
    	     * 初始化Table
    	     */
    	
    // 	 	$table.bootstrapTable('destroy');    //先销毁表格
       	 	//初始化表格
    		$table.bootstrapTable({
    			//表格参数
    	        url: 'data1.json', //请求地址,此处数据为本地加载
    	        
    	        method: "get",  //请求方式
    	       
    	        contentType: "application/x-www-form-urlencoded",   //请求内容类型
    	        
    	        dataType: "json",  //数据类型
    	        
    //	        height: '582',  //table高度：如果没有设置，表格自动根据记录条数觉得表格高度
    	        
    	        striped: true,  //是否显示行间隔色
    	        
    	        sortable: true,  //是否启用排序
    	        
    	        sortOrder: "asc",  //排序方式
    	        
    	        cache: false,  //是否使用缓存
    	       
    	        uniqueId: "id",   //每行的唯一标识
    	        
    	        toolbar: "#toolbar",  //指定工具栏
    	      
    	        showRefresh: false,  //显示刷新按钮
    	     
    	        showToggle: false,   //切换显示样式
    	      
    	        cardView: false,  //默认显示详细视图
    	      
    	        search: true,  //是否显示搜索
    	      
    	        pagination: true,  //是否显示分页
    	     
    	        clickToSelect: true,   //是否启用点击选中行
    	     
    	        minimumCountColumns: 2,   //最少要显示的列数
    	     
    	        showColumns: false,   //显示隐藏列
    	    
    	        undefinedText: '-',    //cell没有值时显示
    	        //分页方式：client客户端分页，server服务端分页
    /*	              指定。注意，这两种后台传过来的json数据格式也不一样 
    			client : 正常的json array格式 [{},{},{}] 
    			server： {“total”:0,”rows”:[]} 其中total表示查询的所有数据条数，后面的rows是指当前页面展示的数据量。*/
    	        sidePagination: "client",
    	      
    	        pageSize: 5,  //每页的记录行数
    	     
    	        pageNumber: 1,   //初始化加载第1页，默认第1页
    	    
    	        pageList: "[5,10, 20, 50, 80, 100]",    //可供选择的每页的行数
    	        paginationFirstText: "首页",
    	        paginationPreText: "上一页",
    	        paginationNextText: "下一页",
    	        paginationLastText: "末页",
    	     
    	        buttonsClass: 'btn',   //按钮样式
    	     
    	        iconSize: 'pager',   //分页器class
    	    
    	        queryParams: queryParams,    //查询条件
    	        //列参数
    	        //表头
    		    columns: [
    		    {
    		        title: '选择',
    		        checkbox: true,
    		        align: 'center' // 居中显示
                }, {
    		        field: 'id',
    		        title: '序号',
    		        align: 'center' // 居中显示
    		    }, {
    		        field: 'name',
    		        title: '商品名称',
    		        align: 'center' // 居中显示
    		    }, {
    		        field: 'price',
    		        title: '价格',
    		        align: 'center' // 居中显示
    		    } ],
    		    
    		    onLoadSuccess: function (res) {//可不写
                //加载成功时
                	console.log(res);
    	        }, 
    	        
    	        onLoadError: function (statusCode) {
    	            return "加载失败了"
    	        }, 
    	        
    	        formatLoadingMessage: function () {
    	            //正在加载
    	            return "拼命加载中...";
    	        }, 
    	        
    	        formatNoMatches: function () {
    	            //没有匹配的结果
    	            return '无符合条件的记录';
    	        }
    	
    			});
    			
    			// 获取表格所有已经勾选的行数据，为一个对象数组
    			var selects = $table.bootstrapTable('getSelections');
    		
    			//刷新
    			$("#btnRefresh").on('click', function(){
    				$table.bootstrapTable('refresh');
    			});
    		
    	</script>
    
    </html>

data1.json数据同例1。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70]: /images/20210725/2d9c177b40344f61bb4314536100d229.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1]: /images/20210725/7850fc9127224b569d4bf22fb4efa2f9.png