|
|
发表于 2016/11/4 15:09
|
显示全部楼层
|阅读模式
| Google Chrome 45.0.2454.101 | Windows 7
1. 行长度：
?
1
<div class="col-md-12"> </div>
2.modal
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<div class="modal fade" id="myModal" 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><br>
</div>
<div class="modal-body">
<spring:form id="outMaterialForm" action="" class="form-horizontal" modelAttribute="outMaterialDto">
<spring:hidden path="mId"/>
<div class="form-group">
<label class="col-sm-2 control-label">出库时间：</label>
<div class="col-sm-4">
<spring:input class="form-control" path="outDate" readonly="true" placeholder="请选择时间"
data-bv-notempty="true" data-bv-notempty-message="不能为空"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">出库数量：</label>
<div class="col-sm-4">
<div id="1" class="input-group input-group-option quantity-wrapper">
<span class="input-group-addon input-group-addon-remove quantity-remove btn">
<span class="glyphicon glyphicon-minus"></span>
</span>
<spring:input id="1inp" value="6" path="outQuantity" name="option[]" class="form-control quantity-count" placeholder="1" />
<span class="input-group-addon input-group-addon-remove quantity-add btn">
<span class="glyphicon glyphicon-plus"></span>
</span>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">出库人：</label>
<div class="col-sm-4">
<spring:input class="form-control" path="outLeader"/>
</div>
</div>
</spring:form>
</div>
<div class="modal-footer" style="text-align: center;">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary" id="saveOutMaterialBtn">保存</button>
</div>
</div>
</div>
</div>
3. 事例
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags/form" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<%
String path = request.getContextPath（）；
String basePath = request.getScheme（）+"://"+request.getServerName（）+":"+request.getServerPort（）+path+"/";
%>
<head>
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- 可选的Bootstrap主题文件（一般不用引入） -->
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<link href="<%=basePath%>/page/pf/base/bootstrap/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>
<link href="<%=basePath%>/page/pf/base/bootstrap/table/bootstrap-table.css" rel="stylesheet"/>
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap-table/1.9.1/bootstrap-table.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap-table/1.9.1/locale/bootstrap-table-zh-CN.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/page/pf/base/bootstrap/bootstrap-datetimepicker.min.js?version=09092200010"></script>
<script type="text/javascript" src="<%=basePath%>/page/pf/base/bootstrap/bootstrap-datetimepicker.fr.js?version=09092200010"></script>
<script type="text/javascript" src="<%=basePath%>/page/pf/base/bootstrap/bootstrap-datetimepicker.zh-CN.js?version=09092200010"></script>
<style type="text/css">
.quantity-remove, .quantity-add {
cursor: pointer;
}
.quantity-add.glyphicon, .quantity-remove.glyphicon {
display: block;
cursor: pointer;
}
</style>
<script src="<%=basePath%>/page/project/wechat/m600material/js/material_view.js"></script>
<title>物料</title>
</head>
<body class="container">
<h4 class="page-header">详细</h4>
<div style="text-align: right;">
<button type="button" id="outQuantityBtn" class="btn btn-primary">出库</button>
</div>
<spring:form id="defaultForm" class="form-horizontal" modelAttribute="materialDto">
<input type="hidden" id="id" value="${materialDto.id }"/>
<div class="form-group">
<label class="col-sm-2 control-label">项目名称：</label>${materialDto.projectName }
</div>
<div class="form-group">
<label class="col-sm-2 control-label">物料名称：</label>${materialDto.name }
</div>
<div class="form-group">
<label class="col-sm-2 control-label">入库时间：</label>${materialDto.inDate }
</div>
<div class="form-group">
<label class="col-sm-2 control-label">物料数量：</label>${materialDto.inQuantity }
</div>
<div class="form-group">
<label class="col-sm-2 control-label">入库负责人：</label>${materialDto.inLeader }
</div>
<table class="table table-hover table-bordered" id="outMaterialTable" data-pagination="false"
data-search="false"
data-show-refresh="false"
data-toggle="card"
data-card-view = "true"
data-show-toggle="false"
data-show-columns="false"
data-page-list="[10,20,50,100]">
<caption>出库列表</caption>
<thead>
<thead>
<tr>
<th data-field="outDate" data-halign="center">出库时间：</th>
<th data-field="outQuantity" data-halign="center">出库数量：</th>
<th data-field="outLeader" data-halign="center">出库人：</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</spring:form>
<div class="modal fade" id="myModal" 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><br>
</div>
<div class="modal-body">
<spring:form id="outMaterialForm" action="" class="form-horizontal" modelAttribute="outMaterialDto">
<spring:hidden path="mId"/>
<div class="form-group">
<label class="col-sm-2 control-label">出库时间：</label>
<div class="col-sm-4">
<spring:input class="form-control" path="outDate" readonly="true" placeholder="请选择时间"
data-bv-notempty="true" data-bv-notempty-message="不能为空"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">出库数量：</label>
<div class="col-sm-4">
<div id="1" class="input-group input-group-option quantity-wrapper">
<span class="input-group-addon input-group-addon-remove quantity-remove btn">
<span class="glyphicon glyphicon-minus"></span>
</span>
<spring:input id="1inp" value="6" path="outQuantity" name="option[]" class="form-control quantity-count" placeholder="1" />
<span class="input-group-addon input-group-addon-remove quantity-add btn">
<span class="glyphicon glyphicon-plus"></span>
</span>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">出库人：</label>
<div class="col-sm-4">
<spring:input class="form-control" path="outLeader"/>
</div>
</div>
</spring:form>
</div>
<div class="modal-footer" style="text-align: center;">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary" id="saveOutMaterialBtn">保存</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="loadingModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
</div>
<div class="modal-body">
<a href="#" class="thumbnail">
正在保存，请稍后…
</a>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
<div class="modal fade" id="alertModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
</div>
<div class="modal-body">
<a href="#" class="thumbnail">
保存成功。
</a>
</div>
<div class="modal-footer"www.9ask.cn/xiamen/>
</div>
</div>
</div>
</div>
</body>
</html> |
|
