关键词搜索

源码搜索 ×
×

前端笔记-利用thymeleaf隐藏显示input及label

发布2020-03-12浏览13489次

详情内容

先来看看效果：

这里有一个add.html，添加，修改都使用这个文件，当点击添加后：

add.html被构造成这样（点击添加后）：

当点击编辑后：

对应的前端源码如下：

  1. <!DOCTYPE html>
  2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
  3. <head>
  4. 	<link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-uihttps://cdn.jxasp.com:9143/image/2.2.4/semantic.min.css" />
  5. 	<link rel="stylesheet" type="text/css" href="#" th:href="@{/bg/my.css}" />
  6. 	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  7. 	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  8. 	<meta name="description" content="" />
  9. 	<meta name="author" content="" />
  10.  
  11. 	<title>考勤管理系统</title>
  12. 	<!-- Bootstrap core CSS -->
  13. 	<link href="asserts/css/bootstrap.min.css" th:href="@{/webjars/bootstrap/4.0.0/css/bootstrap.css}" rel="stylesheet" />
  14. `
  15. 	<!-- Custom styles for this template -->
  16. 	<link href="asserts/css/dashboard.css" th:href="@{/asserts/css/dashboard.css}" rel="stylesheet" />
  17. 	<style type="text/css">
  18. 		/* Chart.js */
  19.  
  20. 		@-webkit-keyframes chartjs-render-animation {
  21. 			from {
  22. 				opacity: 0.99
  23. 			}
  24. 			to {
  25. 				opacity: 1
  26. 			}
  27. 		}
  28.  
  29. 		@keyframes chartjs-render-animation {
  30. 			from {
  31. 				opacity: 0.99
  32. 			}
  33. 			to {
  34. 				opacity: 1
  35. 			}
  36. 		}
  37.  
  38. 		.chartjs-render-monitor {
  39. 			-webkit-animation: chartjs-render-animation 0.001s;
  40. 			animation: chartjs-render-animation 0.001s;
  41. 		}
  42. 	</style>
  43. </head>
  44.  
  45. <body>
  46.  
  47. <div class="container-fluid">
  48. 	<div class="row">
  49. 		<!-- 引入sidebar -->
  50. 		<div th:replace="commons/bar::#sidebar(activeUri='super')"></div>
  51.  
  52. 		<main class="main ui container">
  53.  
  54. 			<div class="ui grid">
  55. 				<div class="one wide column"></div>
  56. 				<div class="fifteen wide column">
  57. 					<form th:action="@{/admin/add}" method="post">
  58. 						<input type="hidden" name="_method" value="put" th:if="${people!=null}"/>
  59. 						<input type="hidden" name="id" th:if="${people!=null}" th:value="${people.id}"/>
  60. 						<div class="form-group">
  61. 							<label>用户名</label>
  62. 							<input name="account" type="text" class="form-control" placeholder="root"
  63. 								   th:value="${people!=null}?${people.id}" th:readonly="${people!=null} ? 'true':'false'" />
  64. 						</div>
  65. 						<div class="form-group">
  66. 							<label>密码</label>
  67. 							<input name="password" type="password" class="form-control" placeholder="123456"
  68. 								   th:value="${people!=null}?${people.pwd}" />
  69. 						</div>
  70. 						<div class="form-group">
  71. 							<label>是否激活</label><br/>
  72. 							<div class="form-check form-check-inline">
  73. 								<input class="form-check-input" type="radio" name="active" value="1"
  74. 									   th:checked="${people!=null}?${people.active==1}" />
  75. 								<label class="form-check-label">是</label>
  76. 							</div>
  77. 							<div class="form-check form-check-inline">
  78. 								<input class="form-check-input" type="radio" name="active" value="0"
  79. 									   th:checked="${people!=null}?${people.active==0}" />
  80. 								<label class="form-check-label">否</label>
  81. 							</div>
  82. 						</div>
  83. 						<div class="form-group">
  84. 							<label th:style="${people==null} ? 'display: none' : ''">修改时间</label>
  85. 							<input th:type="${people!=null} ? 'text' : 'hidden'" class="form-control" placeholder="https://cdn.jxasp.com:9143/image/2020/3/12 "
  86. 								   th:value="${people!=null}?${#dates.format(people.modifyTime, 'yyyy-MM-dd hh:mm:ss')}" readonly="readonly" />
  87. 						</div>
  88. 						<div class="form-group">
  89. 							<label th:style="${people==null} ? 'display: none' : ''">创建时间</label>
  90. 							<input th:type="${people!=null} ? 'text' : 'hidden'"  class="form-control" placeholder="https://cdn.jxasp.com:9143/image/2020/3/12"
  91. 								   th:value="${people!=null}?${#dates.format(people.createTime, 'yyyy-MM-dd hh:mm:ss')}" readonly="readonly" />
  92. 						</div>
  93. 						<button type="submit" class="btn btn-primary" th:text="${people!=null}?'修改':'添加'">添加</button>
  94. 						<p style="color: red" th:text="${msg}" th:if="${not #strings.isEmpty(msg)}"></p>
  95. 					</form>
  96. 				</div>
  97. 			</div>
  98.  
  99. 		</main>
  100.  
  101. 	</div>
  102. </div>
  103.  
  104. <script type="text/javascript" src="asserts/js/jquery-3.2.1.slim.min.js" th:src="@{/webjars/jquery/3.3.1/jquery.js}"></script>
  105. <script type="text/javascript" src="asserts/js/popper.min.js" th:src="@{/webjars/popper.js/1.11.1/dist/popper.js}"></script>
  106. <script type="text/javascript" src="asserts/js/bootstrap.min.js" th:src="@{/webjars/bootstrap/4.0.0/js/bootstrap.js}"></script>
  107.  
  108. <script type="text/javascript" src="#" th:src="@{/webjars/jquery/3.3.1/jquery.js}"></script>
  109.  
  110.  
  111. </body>
  112.  
  113. </html>

首先要知道个知识点：

input隐藏使用type="hidden"

label隐藏使用display: none

这里可以通过后端是否发来了model，如果有model说明是编辑界面，如果没有model说明是添加！

然后进行对应的显示，隐藏即可：

 

相关技术文章

最新源码

下载排行榜
点击QQ咨询
开通会员
返回顶部
×
微信扫码支付 元
微信扫码支付
确定支付下载
请使用微信描二维码支付
×

提示信息

×

选择支付方式

  • 微信支付
  • 支付宝付款
确定支付下载