Bootstrap Table笔记——2

Spring Boot + Bootstrap

1.父子表

初始化表格的时候有一个属性"detailView",将它设置为true,在每行的前面即可看到一个"+"形状的图标。点击这个图标即触发加载子表格的事件。

(1)初始化表格,注册行展开事件

//初始化Table
oTableInit.Init = function () {
    $('#tb_departments').bootstrapTable({
        url: '/girl/lS',         				//请求后台的URL(*)
        method: 'post',                       	//请求方式(*)
		contentType: "application/x-www-form-urlencoded",
		dataType: "json",						//数据类型
        toolbar: '#toolbar',               	//工具按钮用哪个容器
        striped: false,                      	//是否显示行间隔色
        cache: false,                       	//是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
        pagination: true,                   	//是否显示分页(*)
        sortable: false,                    	//是否启用排序
        sortOrder: "asc",                   	//排序方式
		queryParamsType: '',
        queryParams: oTableInit.queryParams, 	//传递参数(*)
        sidePagination: "server",           	//分页方式:client客户端分页,server服务端分页(*)
        pageNumber: 1,                       	//初始化加载第一页,默认第一页
        pageSize: 10,                       	//每页的记录行数(*)
        pageList: [10, 25, 50, 100],        	//可供选择的每页的行数(*)
        search: true,                       	//是否显示表格搜索,此搜索是客户端搜索,不会进服务端,所以,个人感觉意义不大
        strictSearch: true,						//启用全匹配搜索,否则为模糊搜索
		searchOnEnterKey: false,				//按回车触发搜索方法,否则自动触发搜索方法
        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'
        } ],
		//注册加载子表的事件。注意下这里的三个参数!
		onExpandRow: function (index, row, $detail) {
			oInit.InitSubTable(index, row, $detail);
		}
    });
};
子表加载事件onExpandRow对应方法function (index, row, $detail)的三个参数,

index:父表当前的行索引。

row:父表当前行的Json数据对象。

$detail:当前行下面创建的新行里面的td对象。

第三个参数尤为重要,因为生成的子表的table在装载在$detail对象里面的。bootstraptable为我们生成了$detail这个对象,然后我们只需要往它里面填充我们想要的table即可。
(2)oInit.InitSubTable()方法

//初始化子表格(无线循环)
var oInit = new Object();
oInit.InitSubTable = function (index, row, $detail) {
	var parentid = row.id;
	var cur_table = $detail.html('<table></table>').find('table');
	$(cur_table).bootstrapTable({
		url: '/girl/sub/lC',
		method: 'post',
		contentType: "application/x-www-form-urlencoded",
		dataType: "json",						//数据类型
		queryParams: { strParentID: parentid },
		ajaxOptions: { strParentID: parentid },
		clickToSelect: true,
		detailView: true,//父子表
		uniqueId: "subId",
		pageSize: 10,
		pageList: [10, 25],
		columns: [{
			checkbox: true
		}, {
			field: 'subId',
			title: 'SubId'
		}, {
			field: 'grade',
			title: 'Grade'
		}, {
			field: 'name',
			title: 'Name'
		} ],
		//无线循环取子表,直到子表里面没有记录
		onExpandRow: function (index, row, $Subdetail) {
			oInit.InitSubTable(index, row, $Subdetail);
		}
	});
};
所以,生成子表的原理就是创建一个table对象cur_table,然后再注册这个对象的表格初始化即可。

<!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">

		<!--bootstrap table recorder-rows组件引用 -->
		<script type="text/javascript" src="js/extensions/recorder-rows/bootstrap-table-reorder-rows.js"></script>
		<script type="text/javascript" src="js/extensions/recorder-rows/jquery.tablednd.js"></script>
	</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/lS',         				//请求后台的URL(*)
		            method: 'post',                       	//请求方式(*)
					contentType: "application/x-www-form-urlencoded",
					dataType: "json",						//数据类型
		            toolbar: '#toolbar',               	//工具按钮用哪个容器
		            striped: false,                      	//是否显示行间隔色
		            cache: false,                       	//是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
		            pagination: true,                   	//是否显示分页(*)
		            sortable: false,                    	//是否启用排序
		            sortOrder: "asc",                   	//排序方式
					queryParamsType: '',
		            queryParams: oTableInit.queryParams, 	//传递参数(*)
		            sidePagination: "server",           	//分页方式:client客户端分页,server服务端分页(*)
		            pageNumber: 1,                       	//初始化加载第一页,默认第一页
		            pageSize: 10,                       	//每页的记录行数(*)
		            pageList: [10, 25, 50, 100],        	//可供选择的每页的行数(*)
		            search: true,                       	//是否显示表格搜索,此搜索是客户端搜索,不会进服务端,所以,个人感觉意义不大
		            strictSearch: true,						//启用全匹配搜索,否则为模糊搜索
					searchOnEnterKey: false,				//按回车触发搜索方法,否则自动触发搜索方法
		            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'
		            } ],
					//注册加载子表的事件。注意下这里的三个参数!
					onExpandRow: function (index, row, $detail) {
						oInit.InitSubTable(index, row, $detail);
					}
		        });
		    };

		    //得到查询的参数
		    oTableInit.queryParams = function (params) {
		        var temp = {   //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的
//		            limit: params.limit,   //页面大小
//		            offset: params.offset,  //页码
					pageNumber: params.pageNumber,
					pageSize: params.pageSize,
//		            departmentname: $("#txt_search_departmentname").val(),
//		            statu: $("#txt_search_statu").val(),
					search: params.search
		        };
		        return temp;
		    };

			//初始化子表格(无线循环)
			var oInit = new Object();
			oInit.InitSubTable = function (index, row, $detail) {
				var parentid = row.id;
				var cur_table = $detail.html('<table></table>').find('table');
				$(cur_table).bootstrapTable({
					url: '/girl/sub/lC',
					method: 'post',
					contentType: "application/x-www-form-urlencoded",
					dataType: "json",						//数据类型
					queryParams: { strParentID: parentid },
					ajaxOptions: { strParentID: parentid },
					clickToSelect: true,
					detailView: true,//父子表
					uniqueId: "subId",
					pageSize: 10,
					pageList: [10, 25],
					columns: [{
						checkbox: true
					}, {
						field: 'subId',
						title: 'SubId'
					}, {
						field: 'grade',
						title: 'Grade'
					}, {
						field: 'name',
						title: 'Name'
					} ],
					//无线循环取子表,直到子表里面没有记录
					onExpandRow: function (index, row, $Subdetail) {
						oInit.InitSubTable(index, row, $Subdetail);
					}
				});
			};

		    return oTableInit;
		};


		var ButtonInit = function () {
		    var oInit = new Object();
		    var postdata = {};
		
		    oInit.Init = function () {
		        //初始化页面上面的按钮事件
		    };

		    return oInit;
		};
	</script>

</html>
2.行调序

(1)需要额外引用两个js文件

<script type="text/javascript" src="js/extensions/recorder-rows/bootstrap-table-reorder-rows.js"></script>
<script type="text/javascript" src="js/extensions/recorder-rows/jquery.tablednd.js"></script>
(2)在cshtml页面定义表格,添加两个属性

<table id="tb_departments" data-use-row-attr-func="true" data-reorderable-rows="true"></table>

3.列调序

(1)额外引用几个js和css

<script type="text/javascript" src="js/extensions/reorder-columns/bootstrap-table-reorder-columns.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="https://rawgit.com/akottr/dragtable/master/dragtable.css">
<script src="https://rawgit.com/akottr/dragtable/master/jquery.dragtable.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
(2)在cshtml页面定义表格时,添加一个属性

<table id="tb_departments" data-reorderable-columns="true"></table>

4.控件过滤

bootstrap table有每列过滤的功能。

(1)引入额外js

<script type="text/javascript" src="js/extensions/filter-control/bootstrap-table-filter-control.js"></script>
(2)定义表格属性及表头属性

<table id="tb_departments" data-filter-control="true" data-filter-show-clear="true">
	<thead>
		<tr>
			<th data-field="id" data-filter-control="select">ID</th>
			<th data-field="age" data-filter-control="input">AGE</th>
			<th data-field="cupSize" data-filter-control="input">CUP SIZE</th>
		</tr>
	</thead>
</table>

<!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 filter-control-->
		<script type="text/javascript" src="js/extensions/filter-control/bootstrap-table-filter-control.js"></script>
	</head>

	<body>
		<div class="panel-body" style="padding-bottom:0px;">
			<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>

			<table id="tb_departments" data-filter-control="true" data-filter-show-clear="true">
				<thead>
					<tr>
						<th data-field="id" data-filter-control="select">ID</th>
						<th data-field="age" data-filter-control="input">AGE</th>
						<th data-field="cupSize" data-filter-control="input">CUP SIZE</th>
					</tr>
				</thead>
			</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/lS',         				//请求后台的URL(*)
		            method: 'post',                       	//请求方式(*)
					contentType: "application/x-www-form-urlencoded",
					dataType: "json",						//数据类型
		            toolbar: '#toolbar',               	//工具按钮用哪个容器
		            striped: false,                      	//是否显示行间隔色
		            cache: false,                       	//是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
		            pagination: true,                   	//是否显示分页(*)
		            sortable: false,                    	//是否启用排序
		            sortOrder: "asc",                   	//排序方式
					queryParamsType: '',
		            queryParams: oTableInit.queryParams, 	//传递参数(*)
		            sidePagination: "server",           	//分页方式:client客户端分页,server服务端分页(*)
		            pageNumber: 1,                       	//初始化加载第一页,默认第一页
		            pageSize: 10,                       	//每页的记录行数(*)
		            pageList: [10, 25, 50, 100],        	//可供选择的每页的行数(*)
		            search: true,                       	//是否显示表格搜索,此搜索是客户端搜索,不会进服务端,所以,个人感觉意义不大
		            strictSearch: true,						//启用全匹配搜索,否则为模糊搜索
					searchOnEnterKey: false,				//按回车触发搜索方法,否则自动触发搜索方法
		            showColumns: true,                  	//是否显示所有的列
		            showRefresh: true,                  	//是否显示刷新按钮
		            minimumCountColumns: 2,             	//最少允许的列数
		            clickToSelect: true,                	//是否启用点击选中行
		            //height: 500,                        	//行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度
		            uniqueId: "ID",                     	//每一行的唯一标识,一般为主键列
		            showToggle:true,                    	//是否显示详细视图和列表视图的切换按钮
		            cardView: false,                    	//是否显示详细视图
		            detailView: false,                  		//是否显示父子表
		        });
		    };

		    //得到查询的参数
		    oTableInit.queryParams = function (params) {
		        var temp = {   //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的
//		            limit: params.limit,   //页面大小
//		            offset: params.offset,  //页码
					pageNumber: params.pageNumber,
					pageSize: params.pageSize,
//		            departmentname: $("#txt_search_departmentname").val(),
//		            statu: $("#txt_search_statu").val(),
					search: params.search
		        };
		        return temp;
		    };

		    return oTableInit;
		};


		var ButtonInit = function () {
		    var oInit = new Object();
		    var postdata = {};
		
		    oInit.Init = function () {
		        //初始化页面上面的按钮事件
		    };

		    return oInit;
		};
	</script>

</html>


上一篇:BZOJ_5180_[Baltic2016]Cities_ 斯坦纳树


下一篇:【转】MYSQL入门学习之九:索引的简单操作