bootstrap-table 初始化数据及使用问题

最近因为要写一个简单的页面，用于展示数据并有导出功能，就立马想到了bootstrap-table，因为它简单，封装比较好，更重要的是，个人看着比较好看。

1.首先引用必须的文件

	<!--引入jquery组件 -->
    <script src="../assets/jquery.min.js"></script>	
    
    <!--引入bootstrap3组件 -->
    <link rel="stylesheet" href="../assets/bootstrap/css/bootstrap.min.css">
    <script src="../assets/bootstrap/js/bootstrap.min.js"></script>
    
    <!--引入bootstrap-table组件 -->
    <link rel="stylesheet" href="../assets/bootstrap-table/bootstrap-table.css">
    <script src="../assets/bootstrap-table/bootstrap-table.js"></script>
    <link rel="stylesheet" href="../assets/examples.css">
    	
    <!--引入bootstrap导出功能组件 -->
    <script src="../js/bootstrap-table-export.js"></script>
    <script src="../js/tableExport.js"></script>

2.再写html

        <div class="form-inline" id="toolbar">
        	<div class="col-sm-4">
        		<div class="dropdown">
        			<select id="tableType" class="form-control" >
						<option value="">景区游客出行方式(省内)</option>
	
		     	  	</select>
				</div>
        	</div>
        	<div class="col-sm-4">
        		<div class='input-group date col-sm-12' id='datetimepicker1'>  
	                <input type='text' class="form-control" />  
	                <span class="input-group-addon">  
	                    <span class="glyphicon glyphicon-calendar"></span>  
	                </span>
           		 </div>
        	</div>
        	<div class="col-sm-2">
    			<button id="btn_select" type="button" class="btn btn-default">
                	<span class="glyphicon glyphicon-search" aria-hidden="true"></span> 查询
            	</button>
        	</div>
			<div class="col-sm-2">
				<select id="sel_exportoption" class="form-control">
		            <option value="">导出本页</option>
		            <option value="all">导出全部</option>
		            <option value="selected">导出选中</option>
	     	  	</select>
			</div>
        </div>
        <table id="tb_departments">
        	<thead>
        		<tr>
				    <th data-field="address" data-checkbox="true">ID</th>
				    <th data-field="quxian">用户名</th>
				    <th data-field="tatalnum">真实姓名</th>
				    <th data-field="tataktime">座机</th>
				    <th data-field="moretwonum">手机</th>
				    <th data-field="moretwotime">用户类型</th>
			    </tr>
        	</thead>
        </table>
    </div>

页面效果是这样的：

上面效果图是初始化表格之后的，那就看看怎么初始化的

3.初始化表格

    		$('#tb_departments').bootstrapTable({
            data:json,
            toolbar: '#toolbar',                //工具按钮用哪个容器
            striped: true,                      //是否显示行间隔色
            cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination: true,                   //是否显示分页（*）
            sortable: false,                     //是否启用排序
            sortOrder: "asc",                   //排序方式
            //queryParams: oTableInit.queryParams,//传递参数（*）
            sidePagination: "client",           //分页方式：client客户端分页，server服务端分页（*）
            pageNumber: 1,                       //初始化加载第一页，默认第一页
            pageSize: 10,                       //每页的记录行数（*）
            pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
            clickToSelect:true,
            showExport: true,                     //是否显示导出
            exportDataType: "basic"              //basic', 'all', 'selected'.
        });

你也可以把列加上，加上就这么写

columns: [{
                checkbox: true
            }, {
                field: 'id',
                title: '地市'
            }, {
                field: 'name',
                title: '区县'
            } ]

加上columns参数就行了。

这样就初始化完了。

遇到的问题：

1.时间控件

先引入文件

    <!--引入bootstrap时间控件 -->
    <link rel="stylesheet" href="../js/date3/bootstrap-datetimepicker.min.css"/>
	<script src="../js/moment-with-locales.js"></script>
	<script src="../js/date3/bootstrap-datetimepicker.min.js"></script>

我用的是strap3，就在网上随便找了个bootstrap时间控件，但是不行，在网上搜了搜，原来是因为官网上的时间控件都是基于strap2的，所以网上查出来的大多也都是基于2的。那我直接对应版本直接下了个基于3的就行了。

2.check表格问题

刚开始我就按照贴出来的代码一样，结果复选框时默认选中，我以为这是一个属性呢，就在官网上找找看看有没有默认不选中的，结果找了半天也没有，没办法了，我就调试了下代码，在js文件里面发现了这段代码

原来它是这样初始化列表的，怪不得， 那我看bootstrap-table.js文件就行了，就发现了这段

                    sprintf(' disabled="%s"', !column.checkboxEnabled ||
                        (value && value.disabled) ? 'disabled' : undefined) +
                    ' />',

原来只要是复选框那一列有值就会被初始化选中，知道问题了解决就简单了，直接把

data-field="address"  属性去掉就行了。

小结一下吧

bootstrap有很多很多实用又简单的功能，参考官网就行了点击打开链接

还有就是遇到问题一定要调试，看源码，这样才能找到问题的根本原因。