Bootstrap Table笔记——1

摘要： Bootstrap Table笔记。参考笔记：http://www.cnblogs.com/landeanfen/p/4976838.html

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width" />
		<title>BootStrap Table使用</title>
		<!--Jquery组件引用-->
		<script type="text/javascript" src="js/jquery-2.2.3.min.js"></script>

		<!--bootstrap组件引用-->
		<script type="text/javascript" src="js/bootstrap.js"></script>
		<link rel="stylesheet" href="css/bootstrap.css" />

		<!--bootstrap table组件以及中文包的引用-->
		<script type="text/javascript" src="js/bootstrap-table.js"></script>
		<link rel="stylesheet" href="css/bootstrap-table.css" />
		<script type="text/javascript" src="js/bootstrap-table-zh-CN.js"></script>

		<!--页面js文件的引用-->
		<script type="text/javascript" src="js/main.js"></script>

		<!--bootstrap table editable组件引用-->
		<link rel="stylesheet" href="http://rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/css/bootstrap-editable.css">
	</head>

	<body>
		<div class="panel-body" style="padding-bottom:0px;">
			<div class="panel panel-default">
				<div class="panel-heading">查询条件</div>
				<div class="panel-body">
					<form id="formSearch" class="form-horizontal">
						<div class="form-group" style="margin-top:15px">
							<label class="control-label col-sm-1" for="txt_search_departmentname">部门名称</label>
							<div class="col-sm-3">
								<input type="text" class="form-control" id="txt_search_departmentname">
							</div>
							<label class="control-label col-sm-1" for="txt_search_statu">状态</label>
							<div class="col-sm-3">
								<input type="text" class="form-control" id="txt_search_statu">
							</div>
							<div class="col-sm-4" style="text-align:left;">
								<button type="button" style="margin-left:50px" id="btn_query" class="btn btn-primary">查询</button>
							</div>
						</div>
					</form>
				</div>
			</div>

			<div id="toolbar" class="btn-group">
	            <button id="btn_add" type="button" class="btn btn-default" data-toggle="modal" data-target="#insertModal">
	                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
	            </button>
	            <button id="btn_edit" type="button" class="btn btn-default">
	                <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
	            </button>
	            <button id="btn_delete" type="button" class="btn btn-default">
	                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
	            </button>
	        </div>

			<!-- 模态框（Modal） -->
			<div class="modal fade" id="insertModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
								×
							</button>
							<h4 class="modal-title" id="myModalLabel">
								添加商品
							</h4>
						</div>
						<div class="modal-body">
							<select id="ps">
								<option value="0">0</option>
								<option value="1">1</option>
								<option value="2">2</option>
							</select>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal">
								关闭
							</button>
							<button type="button" class="btn btn-primary" data-dismiss="modal">
								确认
							</button>
						</div>
					</div><!-- /.modal-content -->
				</div><!-- /.modal -->
			</div>

			<table id="tb_departments"></table>
		</div>
	</body>

	<script type="text/javascript">
		$(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: '/girl/l',         			  	//请求后台的URL（*）
		            method: 'get',                       	//请求方式（*）
		            toolbar: '#toolbar',               	//工具按钮用哪个容器
		            striped: false,                      	//是否显示行间隔色
		            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],        	//可供选择的每页的行数（*）
		            search: true,                       	//是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
		            strictSearch: true,
		            showColumns: true,                  	//是否显示所有的列
		            showRefresh: true,                  	//是否显示刷新按钮
		            minimumCountColumns: 2,             	//最少允许的列数
		            clickToSelect: true,                	//是否启用点击选中行
		            //height: 500,                        	//行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
		            uniqueId: "ID",                     	//每一行的唯一标识，一般为主键列
		            showToggle:true,                    	//是否显示详细视图和列表视图的切换按钮
		            cardView: false,                    	//是否显示详细视图
		            detailView: true,                  		//是否显示父子表
		            columns: [{
		                checkbox: true
		            }, {
		                field: 'id',
		                title: 'ID',
						align: 'center',
						valign: 'middle'
		            }, {
		                field: 'age',
		                title: 'AGE',
						align: 'center',
						valign: 'middle'
		            }, {
		                field: 'cupSize',
		                title: 'CupSize',
						align: 'center',
						valign: 'middle'
		            }, ]
		        });
		    };
		
		    //得到查询的参数
		    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;
		};
	</script>

</html>

问题小结：

1.如果在js里面初始化的参数 sidePagination: "server" 设置为在服务端分页，那么我们的返回值必须告诉前端总记录的条数和当前页的记录数，然后前端才知道如何分页。并且最重要的一点，这两个参数的名字必须为total和rows。

2、第二个问题就是关于bootstrap页面样式的问题，我们使用过bootstrap的朋友应该知道，它里面所有的图标都是通过class = "glyphicon glyphicon-plus"这种方式去写的。博主按要求这样做了，可是新增、修改、删除前面的图标怎么都出不来。

原文链接

Bootstrap Table笔记——1

问题小结：

1.如果在js里面初始化的参数 sidePagination: "server" 设置为在服务端分页，那么我们的返回值必须告诉前端总记录的条数和当前页的记录数，然后前端才知道如何分页。并且最重要的一点，这两个参数的名字必须为total和rows。

猜你喜欢