Home Explore Help
Sign In
chendeben
/
zheng
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

完善增删改查页面

shuzheng 9 years ago
parent
6e75683e87
commit
a815cd6264
2 changed files with 150 additions and 42 deletions
Unified View Show Diff Stats
  1. 134 29
      zheng-ui/src/crud.html
  2. 16 13
      zheng-ui/src/css/common.css

+ 134 - 29
zheng-ui/src/crud.html
View File 

@@ -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/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/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/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"/>
 
 	<link href="css/common.css" rel="stylesheet"/>
 
 </head>
 
 </head>
 
 <body>
 
 <body>
 
 <div id="main">
 
 <div id="main">
 
 	<div id="toolbar">
 
 	<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>
 
 	</div>
 
 	<table id="table"></table>
 
 	<table id="table"></table>
 
 </div>
 
 </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>
 
 </div>
 
 <script src="plugins/jquery.1.12.4.min.js"></script>
 
 <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-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/bootstrap-table.min.js"></script>
 
 <script src="plugins/bootstrap-table-1.11.0/locale/bootstrap-table-zh-CN.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/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 src="js/common.js"></script>
 
 <script>
 
 <script>
 
+var $table = $('#table');
 
 $(function() {
 
 $(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初始化
 
 	// bootstrap table初始化
 
 	// http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/
 
 	// http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/
 
-	$('#table').bootstrapTable({
 
+	$table.bootstrapTable({
 
 		url: 'data/data1.json',
 
 		url: 'data/data1.json',
 
 		height: getHeight(),
 
 		height: getHeight(),
 
 		striped: true,
 
 		striped: true,
 
@@ -99,11 +110,6 @@ $(function() {
 
 		$('[data-toggle="tooltip"]').tooltip();
 
 		$('[data-toggle="tooltip"]').tooltip();
 
 		$('[data-toggle="popover"]').popover();  
 		$('[data-toggle="popover"]').popover();  
 	});
 
 	});
 
-	$(window).resize(function () {
 
-		$('#table').bootstrapTable('resetView', {
 
-			height: getHeight()
 
-		});
 
-	});
 
 });
 
 });
 
 function actionFormatter(value, row, index) {
 
 function actionFormatter(value, row, index) {
 
     return [
 
     return [
 
@@ -134,8 +140,107 @@ function detailFormatter(index, row) {
 
 	});
 
 	});
 
 	return html.join('');
 
 	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>
 
 </script>
 
 </body>
 
 </body>

+ 16 - 13
zheng-ui/src/css/common.css
View File 

@@ -1,22 +1,25 @@
 
 body, html {height: 100%; position: relative; font-family: 'Microsoft yahei'; font-size: 13px; font-weight: 400;}
 
 body, html {height: 100%; position: relative; font-family: 'Microsoft yahei'; font-size: 13px; font-weight: 400;}
 
 img {vertical-align: middle;}
 
 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;}
 
 a i{font-size: 13px;}
 
 
 
 #main{padding: 10px 20px;}
 
 #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;}
 
 body{font-size: 12px;}
 
 .table i{font-size: 12px; color: #000;}
 
 .table i{font-size: 12px; color: #000;}
 
 .bootstrap-table .table>thead>tr>th{border-bottom: none;}
 
 .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;}
 
+.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;}