Monthly Archive: July, 2016

bootstrap table 服务端搜索/分页/异步刷新

最近项目中用到了很多的Table,在jsp中构建的话太过繁琐,不宜与后续dom的操作。所以特意研究了一下Bootstrap Table这个插件!!

Java Json包 https://github.com/FasterXML/jackson

插件地址:Bootstrap Table

使用该插件需要Jquery与Bootstrap支持

Html部分

<!DOCTYPE html>
<html lang="en">
 
<head>
	<meta charset="UTF-8">
	<title>Deomo</title>
	<link rel="stylesheet" href="/assets/css/bootstrap.min.css" />
	<link rel="stylesheet" href="/assets/css/bootstrap-table.min.css">
</head>
 
<body>
	<!--查询窗体-->
	<div class="widget-content">
		<form method="post" class="form-horizontal" id="eventqueryform">
			<input type="text" class="span3" name="eventName" placeholder="事件名称"> <input type="text" class="span2" name="status" placeholder="灾情状态"> 
			<input type="text" class="span3" name="location" placeholder="发现位置">
			<div data-date="" class="input-append date datepicker" data-date-format="yyyy-mm-dd">
				<input type="text" class="span10" name="startdate" placeholder="起始日期"> <span class="add-on"><i class="icon-th"></i></span>
			</div>
			<div data-date="" class="input-append date datepicker" data-date-format="yyyy-mm-dd">
				<input type="text" class="span10" name="enddate" placeholder="结束日期"> <span class="add-on"><i class="icon-th"></i></span>
			</div>
			<input type="button" class="btn btn-default span1" id="eventquery" value="查询">
		</form>
	</div>
 
	<div class="widget-content">
		<!--工具条-->
		<div id="toolbar">
			<button class="btn btn-success btn-xs" data-toggle="modal" data-target="#add">添加事件</button>
		</div>
		<table id="eventTable"></table>
	</div>
 
	<script src="/assets/js/jquery.min.js"></script>
	<script src="/assets/js/bootstrap.min.js"></script>
	<script src="/assets/js/bootstrap-table.min.js"></script>
	<script src="/assets/js/bootstrap-table-zh-CN.min.js"></script>
	<script src="/assets/js/event.js"></script>
 
</body>
 
</html>

JS部分

$(document).ready(function() {
	// 初始化表格
	initTable();
});

// 表格初始化
function initTable() {
	$('#eventTable').bootstrapTable({
		method: 'post', // 向服务器请求方式
		contentType: "application/x-www-form-urlencoded", // 如果是post必须定义
		url: '/program/event/findbyitem', // 请求url
		cache: false, // 是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
		striped: true, // 隔行变色
		dataType: "json", // 数据类型
		pagination: true, // 是否启用分页
		showPaginationSwitch: false, // 是否显示 数据条数选择框
		pageSize: 5, // 每页的记录行数(*)
		pageNumber: 1, // table初始化时显示的页数
		search: false, // 不显示 搜索框
		sidePagination: 'server', // 服务端分页
		classes: 'table table-bordered', // Class样式

		// showRefresh : true, // 显示刷新按钮

		silent: true, // 必须设置刷新事件

		toolbar: '#toolbar', // 工具栏ID
		toolbarAlign: 'right', // 工具栏对齐方式

		queryParams: queryParams, // 请求参数,这个关系到后续用到的异步刷新

		columns: [{
			field: 'eventName',
			title: '事件名称',
			align: 'center'
		}, {
			field: 'date',
			title: '日期',
			align: 'center'
		}, {
			field: 'location',
			title: '发生位置',
			align: 'center'
		}, {
			field: 'mesures',
			title: '防治方案',
			align: 'center'
		}, {
			field: 'status',
			title: '灾情状态',
			align: 'center'
		}, {
			field: 'id',
			title: '操作',
			align: 'center',
			width: '280px',
			formatter: function(value, row, index) {
				var view = '查看 ';
				var update = '修改 ';
				var review = '申请专家会审 ';

				// console.log(JSON.stringify(row));

				if (row.status === '已得到控制') {
					return view + update
				} else {
					return view + update + review;
				}

			}
		}],
	});
}

// 分页查询参数,是以键值对的形式设置的
function queryParams(params) {
	return {
		eventName: $('#eventqueryform input[name=\'eventName\']').val(), // 请求时向服务端传递的参数
		status: $('#eventqueryform input[name=\'status\']').val(), // 请求时向服务端传递的参数
		location: $('#eventqueryform input[name=\'location\']').val(), // 请求时向服务端传递的参数
		startdate: $('#eventqueryform input[name=\'startdate\']').val(), // 请求时向服务端传递的参数
		enddate: $('#eventqueryform input[name=\'enddate\']').val(), // 请求时向服务端传递的参数

		limit: params.limit, // 每页显示数量
		offset: params.offset, // SQL语句偏移量
	}
}

// 搜索按钮触发事件
$(function() {
	$("#eventquery").click(function() {
		$('#eventTable').bootstrapTable(('refresh')); // 很重要的一步,刷新url!
		// console.log("/program/area/findbyItem?offset="+0+"&"+$("#areaform").serialize())
		$('#eventqueryform input[name=\'eventName\']').val('')
		$('#eventqueryform input[name=\'status\']').val('')
		$('#eventqueryform input[name=\'location\']').val('')
		$('#eventqueryform input[name=\'startdate\']').val('')
		$('#eventqueryform input[name=\'enddate\']').val('')
	});
});

Read more

Windows安装Mysql Zip绿色版

安装服务

REM 自动启动
mysqld --install
mysqld --defaults-file="D:\Program Files\mysql\mysql.ini" --initialize --explicit_defaults_for_timestamp
net start mysql

REM 手动启动
mysqld --install-manual
mysqld --defaults-file="D:\Program Files\mysql\mysql.ini" --initialize --explicit_defaults_for_timestamp
net start mysql

REM 卸载服务
mysqld --remove
# mysql.ini 内容
[mysql]
default-character-set=utf8
 
[mysqld]
basedir = D:\Program Files\mysql
datadir = D:\Program Files\mysql\data
port = 3306
max_connections=200
character-set-server=utf8
default-storage-engine=INNODB
 
sql_mode=NO_ENGINE_SUBSTITUTION,STRICT_TRANS_TABLES

初始密码

查看Data目录下**.err文件,搜索"password is generated",结束就是初始密码

mysql初始密码是无法作为登陆使用的,所以登陆mysql必须修改自动生成的密码。

mysql -u root -h 127.0.0.1 -p
Enter password: (enter the random password here)
 
mysql> SET PASSWORD FOR 'root'@'localhost' = PASSWORD('new_password');
mysql> flush privileges;