From a815cd6264925dc1ad8d3b8ff892d6cbce61d69d Mon Sep 17 00:00:00 2001
From: shuzheng <469741414@qq.com>
Date: Wed, 15 Feb 2017 23:26:23 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=E5=A2=9E=E5=88=A0=E6=94=B9?=
 =?UTF-8?q?=E6=9F=A5=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 zheng-ui/src/crud.html      | 163 +++++++++++++++++++++++++++++-------
 zheng-ui/src/css/common.css |  29 ++++---
 2 files changed, 150 insertions(+), 42 deletions(-)
diff --git a/zheng-ui/src/crud.html b/zheng-ui/src/crud.html
index d64ca623..29124d29 100644
--- a/zheng-ui/src/crud.html
+++ b/zheng-ui/src/crud.html
@@ -10,50 +10,61 @@
 	<link href="plugins/material-design-iconic-font-2.2.0/css/material-design-iconic-font.min.css" rel="stylesheet"/>
 	<link href="plugins/bootstrap-table-1.11.0/bootstrap-table.min.css" rel="stylesheet"/>
 	<link href="plugins/waves-0.7.5/waves.min.css" rel="stylesheet"/>
+	<link href="plugins/jquery-confirm/jquery-confirm.min.css" rel="stylesheet"/>
 
 	<link href="css/common.css" rel="stylesheet"/>
 </head>
 <body>
 <div id="main">
 	<div id="toolbar">
-		<a class="waves-effect waves-button" href="javascript:;" data-toggle="modal" data-target=".create-modal"><i class="zmdi zmdi-plus"></i> 新增用户</a>
-		<a class="waves-effect waves-button" href="javascript:;"><i class="zmdi zmdi-edit"></i> 编辑用户</a>
-		<a class="waves-effect waves-button" href="javascript:;"><i class="zmdi zmdi-close"></i> 删除用户</a>
+		<a class="waves-effect waves-button" href="javascript:;" onclick="createAction()"><i class="zmdi zmdi-plus"></i> 新增用户</a>
+		<a class="waves-effect waves-button" href="javascript:;" onclick="updateAction()"><i class="zmdi zmdi-edit"></i> 编辑用户</a>
+		<a class="waves-effect waves-button" href="javascript:;" onclick="deleteAction()"><i class="zmdi zmdi-close"></i> 删除用户</a>
 	</div>
 	<table id="table"></table>
 </div>
 <!-- 新增 -->
-<div class="modal fade create-modal" tabindex="-1" role="dialog">
-    <div class="modal-dialog modal-sm" role="document">
-        <div class="modal-content">
-			<!--
-            <div class="modal-header">
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-                <h4 class="modal-title" id="gridSystemModalLabel">新增系统</h4>
-            </div>
-			-->
-            <div class="modal-body">
-                内容
-            </div>
-            <div class="modal-footer">
-                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
-                <button type="button" class="btn btn-primary">保存</button>
-            </div>
-        </div>
-    </div>
+<div id="createDialog" class="crudDialog" hidden>
+	<form>
+		<div class="form-group">
+			<label for="input1">标题</label>
+			<input id="input1" type="text" class="form-control">
+		</div>
+		<div class="form-group">
+			<label for="input2">名称</label>
+			<input id="input2" type="text" class="form-control">
+		</div>
+		<div class="form-group">
+			<label for="input3">根目录</label>
+			<input id="input3" type="text" class="form-control">
+		</div>
+		<div class="form-group">
+			<label for="input4">图标</label>
+			<input id="input4" type="text" class="form-control">
+		</div>
+	</form>
 </div>
 <script src="plugins/jquery.1.12.4.min.js"></script>
 <script src="plugins/bootstrap-3.3.0/js/bootstrap.min.js"></script>
 <script src="plugins/bootstrap-table-1.11.0/bootstrap-table.min.js"></script>
 <script src="plugins/bootstrap-table-1.11.0/locale/bootstrap-table-zh-CN.min.js"></script>
 <script src="plugins/waves-0.7.5/waves.min.js"></script>
+<script src="plugins/jquery-confirm/jquery-confirm.min.js"></script>
 
 <script src="js/common.js"></script>
 <script>
+var $table = $('#table');
 $(function() {
+	$(document).on('focus', 'input[type="text"]', function() {
+		$(this).parent().find('label').addClass('active');
+	}).on('blur', 'input[type="text"]', function() {
+		if ($(this).val() == '') {
+			$(this).parent().find('label').removeClass('active');
+		}
+	});
 	// bootstrap table初始化
 	// http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/
-	$('#table').bootstrapTable({
+	$table.bootstrapTable({
 		url: 'data/data1.json',
 		height: getHeight(),
 		striped: true,
@@ -99,11 +110,6 @@ $(function() {
 		$('[data-toggle="tooltip"]').tooltip();
 		$('[data-toggle="popover"]').popover();  
 	});
-	$(window).resize(function () {
-		$('#table').bootstrapTable('resetView', {
-			height: getHeight()
-		});
-	});
 });
 function actionFormatter(value, row, index) {
     return [
@@ -134,8 +140,107 @@ function detailFormatter(index, row) {
 	});
 	return html.join('');
 }
-function getHeight() {
-	return $(window).height() - 20;
+// 新增
+function createAction() {
+	$.confirm({
+		type: 'dark',
+		animationSpeed: 300,
+		title: '新增系统',
+		content: $('#createDialog').html(),
+		buttons: {
+			confirm: {
+				text: '确认',
+				btnClass: 'waves-effect waves-button',
+				action: function () {
+					$.alert('确认');
+				}
+			},
+			cancel: {
+				text: '取消',
+				btnClass: 'waves-effect waves-button'
+			}
+		}
+	});
+}
+// 编辑
+function updateAction() {
+	var rows = $table.bootstrapTable('getSelections');
+	if (rows.length == 0) {
+		$.confirm({
+			title: false,
+			content: '请至少选择一条记录！',
+			autoClose: 'cancel|3000',
+			backgroundDismiss: true,
+			buttons: {
+				cancel: {
+					text: '取消',
+					btnClass: 'waves-effect waves-button'
+				}
+			}
+		});
+	} else {
+		$.confirm({
+			type: 'blue',
+			animationSpeed: 300,
+			title: '编辑系统',
+			content: $('#createDialog').html(),
+			buttons: {
+				confirm: {
+					text: '确认',
+					btnClass: 'waves-effect waves-button',
+					action: function () {
+						$.alert('确认');
+					}
+				},
+				cancel: {
+					text: '取消',
+					btnClass: 'waves-effect waves-button'
+				}
+			}
+		});
+	}
+}
+// 删除
+function deleteAction() {
+	var rows = $table.bootstrapTable('getSelections');
+	if (rows.length == 0) {
+		$.confirm({
+			title: false,
+			content: '请至少选择一条记录！',
+			autoClose: 'cancel|3000',
+			backgroundDismiss: true,
+			buttons: {
+				cancel: {
+					text: '取消',
+					btnClass: 'waves-effect waves-button'
+				}
+			}
+		});
+	} else {
+		$.confirm({
+			type: 'red',
+			animationSpeed: 300,
+			title: false,
+			content: '确认删除该系统吗？',
+			buttons: {
+				confirm: {
+					text: '确认',
+					btnClass: 'waves-effect waves-button',
+					action: function () {
+						var ids = new Array();
+						for (var i in rows) {
+							ids.push(rows[i].systemId);
+						}
+						$.alert('删除：id=' + ids.join("-"));
+					}
+				},
+				cancel: {
+					text: '取消',
+					btnClass: 'waves-effect waves-button'
+				}
+			}
+		});
+	}
 }
 </script>
 </body>
diff --git a/zheng-ui/src/css/common.css b/zheng-ui/src/css/common.css
index 7e4e35f6..f188588f 100644
--- a/zheng-ui/src/css/common.css
+++ b/zheng-ui/src/css/common.css
@@ -1,22 +1,25 @@
 body, html {height: 100%; position: relative; font-family: 'Microsoft yahei'; font-size: 13px; font-weight: 400;}
 img {vertical-align: middle;}
-a, a:hover, a:active, a:focus {text-decoration: none; -webkit-user-drag: none;}
+a, a:hover, a:active, a:focus {text-decoration: none; -webkit-user-drag: none; outline: none; color: #000;}
 a i{font-size: 13px;}
 
 #main{padding: 10px 20px;}
 
-
-/*.pagination>.active>a,
-.pagination>.active>span,
-.pagination>.active>a:hover,
-.pagination>.active>span:hover,
-.pagination>.active>a:focus,
-.pagination>.active>span:focus{background-color: #29a176; border-color: #29a176;}
-.pagination>li>a:hover, .pagination>li>span:hover, .pagination>li>a:focus, .pagination>li>span:focus{color: #29a176;}
-.pagination>li>a, .pagination>li>span{color: #29a176;}
-.dropdown-menu>.active>a, .dropdown-menu>.active>a:hover, .dropdown-menu>.active>a:focus{background-color: #29a176;}*/
-
+/* 数据表格 */
 body{font-size: 12px;}
 .table i{font-size: 12px; color: #000;}
 .bootstrap-table .table>thead>tr>th{border-bottom: none;}
-.bootstrap-table .table:not(.table-condensed), .bootstrap-table .table:not(.table-condensed)>tbody>tr>td, .bootstrap-table .table:not(.table-condensed)>tbody>tr>th, .bootstrap-table .table:not(.table-condensed)>tfoot>tr>td, .bootstrap-table .table:not(.table-condensed)>tfoot>tr>th, .bootstrap-table .table:not(.table-condensed)>thead>tr>td{padding: 12px 8px;}
\ No newline at end of file
+.bootstrap-table .table:not(.table-condensed), .bootstrap-table .table:not(.table-condensed)>tbody>tr>td, .bootstrap-table .table:not(.table-condensed)>tbody>tr>th, .bootstrap-table .table:not(.table-condensed)>tfoot>tr>td, .bootstrap-table .table:not(.table-condensed)>tfoot>tr>th, .bootstrap-table .table:not(.table-condensed)>thead>tr>td{padding: 12px 8px;}
+/* 分页 */
+.pagination>.active>a, .pagination>.active>span, .pagination>.active>a:hover, .pagination>.active>span:hover, .pagination>.active>a:focus, .pagination>.active>span:focus{background: #f5f5f5; color: #000; border-color: #7d7d7d;}
+.pagination>li>a, .pagination>li>span{color: #000;}.dropdown-menu>.active>a, .dropdown-menu>.active>a:hover, .dropdown-menu>.active>a:focus{background-color: #999;}
+/* bootstrap */
+.jconfirm .jconfirm-box .jconfirm-buttons button{-webkit-border-radius: 0; border-radius: 0;}
+.btn:active{-webkit-box-shadow: none; box-shadow: none;}
+/* input */
+.jconfirm-content form{margin-top: 10px;}
+.form-group{margin-bottom: 20px;}
+.form-group label{position: absolute; line-height: 2; font-size: 16px; font-weight: normal; transition: all .2s; pointer-events: none; color: #999;}
+.form-group .active{transform: translateY(-65%); font-size: 12px; color: #337ab7;}
+.form-group .form-control{font-size: 14px; box-shadow: none; padding-left: 0; padding-right: 0; border-radius: 0; border: none; border-bottom: 2px solid #eee; outline: none; transition: all .5s;}
+.form-group .form-control:focus{box-shadow: none; border-color: #337ab7;}
\ No newline at end of file
