开发者社区> 为什么而活> 正文

Bootstrap Table笔记——3

简介: Bootstrap Table笔记。参考笔记:http://www.cnblogs.com/landeanfen/p/5005367.html
+关注继续查看

1.表格行样式

关于表格行的样式设置,效果不难,自己用jQuery设置tr的背景色也可以实现。但bootstrap table提供了设置行的背景色机制,我们可以用它内置的api。添加rowStyle属性:

rowStyle: function(row, index) {
	//这里有5个取值代表5中颜色['active', 'success', 'info', 'warning', 'danger'];
	var strclass = "";
	if (Number(row.age) < 18) {
		strclass = 'success';
	} else {
		return {};
	}
	return { classes : strclass }
}
bootstrap table支持5中表格的行背景色,分别是'active', 'success', 'info', 'warning', 'danger'这五种,至于每种对应的背景颜色,将代码运行起来就可看到。关于这个方法的返回值,按照bootstrap table的规则,必须返回一个json格式的对象型如: { classes : strclass} 。

2.表格行内编辑

(1)引入额外的js文件

(2)在cshtml页面定义表格时,添加两个属性
<table id="tb_departments">
    <thead>
        <tr>
            <th data-field="Name" data-editable="true">部门名称</th>
            <th data-field="ParentName">上级部门</th>
            <th data-field="Level" data-editable="true">部门级别</th>
            <th data-field="Desc" data-editable="true">描述</th>
        </tr>
    </thead>
</table>

如果是在js里面初始化,写法如下:

columns: [{
        checkbox: true
    }, {
        field: 'id',
        title: 'ID',
		align: 'center'
    }, {
        field: 'age',
        title: 'AGE',
		editable: {
			type: 'text',
			title: 'AGE',
			validate: function (v) {
				if (!v) return '年龄不能为空';
				if (isNaN(v)) return '年龄必须是数字';
				var age = parseInt(v);
				if (age <= 0) return '年龄必须是正整数';
			}
		},
		align: 'center'
    }, {
        field: 'cupSize',
        title: 'CupSize',
		editable: true,
		align: 'center'
    } ]

(3)在js里面初始化表格的时候注册编辑保存的事件

onEditableSave: function (field, row, oldValue, $el) {
	console.log(field);
	console.log(row);
	console.log(oldValue);
	console.log($el);
	console.log(JSON.stringify(row));
}

对应的方法里面需要自己处理保存的逻辑。四个参数field, row, oldValue, $el分别对应着当前列的名称、当前行数据对象、更新前的值、编辑的当前单元格的jQuery对象。

完整代码(1+2):

<!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">
		<script src="//rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/js/bootstrap-editable.js"></script>
		<script src="js/extensions/editable/bootstrap-editable.js"></script>
		<script src="js/extensions/editable/bootstrap-table-editable.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,                  		//是否显示父子表
					rowStyle: function(row, index) {
						//这里有5个取值代表5中颜色['active', 'success', 'info', 'warning', 'danger'];
						var strclass = "";
						if (Number(row.age) < 18) {
							strclass = 'success';
						} else {
							return {};
						}
						return { classes : strclass }
					},
		            columns: [{
		                checkbox: true
		            }, {
		                field: 'id',
		                title: 'ID',
						align: 'center'
		            }, {
		                field: 'age',
		                title: 'AGE',
						editable: {
							type: 'text',
							title: 'AGE',
							validate: function (v) {
								if (!v) return '年龄不能为空';
								if (isNaN(v)) return '年龄必须是数字';
								var age = parseInt(v);
								if (age <= 0) return '年龄必须是正整数';
							}
						},
						align: 'center'
		            }, {
		                field: 'cupSize',
		                title: 'CupSize',
						editable: true,
						align: 'center'
		            } ],
					onClickRow: function (row, $element) {
						curRow = row;
					},
					//注册加载子表的事件。注意下这里的三个参数!
					onExpandRow: function (index, row, $detail) {
						oInit.InitSubTable(index, row, $detail);
					},
					onEditableSave: function (field, row, oldValue, $el) {
						console.log(field);
						console.log(row);
						console.log(oldValue);
						console.log($el);
						console.log(JSON.stringify(row));
					}
		        });
		    };

		    //得到查询的参数
		    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>

3.表格行列合并

rowspan colspan

columns: [
	[
		{
			checkbox: true,
			rowspan: 2,
			align: 'center',
			valign: 'middle'
		}, {
			field: 'id',
			title: 'ID',
			rowspan: 2,
			align: 'center',
			valign: 'middle',
		},{
			title: 'Detail',
			colspan: 2,
			align: 'center'
		}
	],
	[
		{
			field: 'age',
			title: 'AGE',
			editable: {
				type: 'text',
				title: 'AGE',
				validate: function (v) {
					if (!v) return '年龄不能为空';
					if (isNaN(v)) return '年龄必须是数字';
					var age = parseInt(v);
					if (age <= 0) return '年龄必须是正整数';
				}
			},
			align: 'center'
		}, {
			field: 'cupSize',
			title: 'CupSize',
			editable: true,
			align: 'center'
		}
	]
]

4.表格数据导出

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Bootstrap学习笔记(实习第2天)
1、学习网站: http://www.bootcss.com/ 2、页面中加入下面代码即可调用bootstrap。 &lt;!-- 新 Bootstrap 核心 CSS 文件 加到head中 --&gt; &lt;link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min
1549 0
Bootstrap响应式前端框架笔记二十——工具条的应用
Bootstrap响应式前端框架笔记二十——工具条的应用
22 0
electron入门笔记(三)- 引入bootstrap
源码:https://github.com/sueRimn/electron-bootstrap 当引入jQuery和bootstrap文件时,会报错,原因是:electron 的 Renderer 端因为注入了 Node 环境,存在全局函数 require,导致jquery 内部环境判断出现问题。
1661 0
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
23525 0
27
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载