完善增删改查页面
This commit is contained in:
shuzheng
parent
6e75683e87
commit
a815cd6264
|
|
@ -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">×</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>
|
||||
|
|
|
|||
|
|
@ -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;}
|
||||
.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;}
|
||||
Loading…
Reference in New Issue