表单组件、<#form:list >、<#form:input >、<#form:button>、引用字典


1.引入布局和js脚本


1.1. 引入common.html默认布局， 也就是会将common.html页面头部和尾部内容引入进来，实现每个html页面无需再重复写html的头部和尾部！这样不但减少代码量，而且还提高开发效率，更使得页面简洁美观~

														

															
														

															
  <% layout("/common.html"){ %>
  	<!--这里是页面内容-->
  <% } %>

举一个例子：用户列表页面

（页面最上方引用：<% layout("/common.html"){ %> ，最下方引用：<% } %>)

														

															
														

															
	<% layout("/common.html"){ %>
		<div class=" page-content clearfix">
			<div id="fold-expand" class="fold-expand">
			    <div class="h_products_list clearfix" id="products_list">
			    <!--机构管理树展示-开始-->
					<div id="scrollsidebar" class="left_Treeview">
				        <div class="show_btn" id="rightArrow"><span></span></div>
				        <div class="widget-box side_content" >
					         <div class="side_title"><a title="隐藏" class="close_btn"><span></span></a></div>
					        <div class="side_list"> <div class="widget-header header-color-green2"><h4 class="lighter smaller">组织机构</h4></div>
						         <div class="widget-body">
						          <div class="widget-main padding-8"> <div id="deptTree" class="ztree"></div></div>
						         </div>
					       	 </div>
				      	</div>  
					</div>
			    <!--机构管理树展示-结束-->
				  <!-- 用户列表管理-开始 -->
				  <div>
				     	 <div style="padding:3px 0px 8px;"></div>
					     <div class="row table-body" id="testIframe">
					     	<!-- 查询条件框-开始 -->
					     	<div class="table-search">
					     	 	<div class="form-group search-condition">
									<label class="control-label search-label">账号：</label>
									<div class="control-inline search-inline">
										<#form:list id="userCode"/>
									</div>
								</div>
								<div class="form-group search-condition">
									<label class="control-label search-label">姓名：</label>
									<div class="control-inline search-inline">
										<#form:list id="userName"/>
									</div>
								</div>
								<div class="form-group search-condition">
									<label class="control-label search-label">邮箱：</label>
									<div class="control-inline search-inline">
										<#form:list id="email"   iconClass="btn-list-button" icon="fa-envelope"/>
									</div>
								</div>
								<div class="form-group search-condition">
									<label class="control-label search-label">性别：</label>
									<div class="control-inline search-inline">
										<select class="input-dict-sm" id="sex" name="sex" dictType="user_sex" defaultValue="0"></select>
									</div>
								</div>
								<div class="form-group search-condition">
									<label class="control-label search-label">电话：</label>
									<div class="control-inline search-inline">
										<#form:list id="phone" iconClass="btn-list-button" icon="fa-phone"/>
									</div>
								</div>
								
								<div class="form-group search-button">
									<#form:button class="btn btn-default btn-sm" onclick="obj.search()" name="查询"/>
									<% if(shiro.hasPermission("user:add")){ %>
										<#form:button class="btn btn-add btn-sm button-item" icon="fa-plus" iconLocation="icon-before" onclick="addPage('/user/form','新增用户')" name="新增"/>
									<% } %>
									<#form:button class="btn btn-add btn-sm button-item refreshButton" icon="fa-refresh" iconLocation="icon-before" onclick="refreshPage()" name="刷新" />
								</div>
							</div>
							<!-- 查询条件框-结束 -->
							<!-- 表格table-开始-->
					     	<div id="table-list" style="margin-left:9px;">
					     		<table id="tableList" style = "table-layout:fixed;width:100%;"></table>
					     	</div>
					     	<!-- 表格table-结束-->
					     </div>
				     </div>
				    <!-- 用户列表管理-结束 -->
				</div>
			</div>
		</div>
		<script type="text/javascript" src="${ctxPath}/js/system/user/user.js"></script>
	<% } %>

效果如下：

(图：用户列表页面)

1.2 引入js， 也就是引入页面对应的javascript脚本，如用户管理新增form.html，需要引入对应的user.js

														

															
														

															
  <script type="text/javascript" src="${ctxPath}/js/system/user/user.js"></script>

★温馨提示：引入的js脚本，需要放入<% layout("/common.html"){    %> <% } %>里面; 同时，最好放于下方的位置，这样比较美观~

2.各种标签使用方法


2.1 <#form:list />标签


使用<#form:list />标签的搜索框，有以下两种用法，比如： 

													

														
													

														
  1、通用（普通）样式的搜索框： ①指定id属性值为'userCode'，自动为表单内的name绑定属性值为'userCode'；
  <#form:list id="userCode"/>
  
  2、带图标样式的搜索框： ①指定id属性值为'email'，自动为表单内的name绑定属性值为'email'； ②指定iconClass固定值为"btn-list-button"; ③指定icon值，值来源于 "FontAwesome官网图标库"
  <#form:list id="email"   iconClass="btn-list-button" icon="fa-envelope"/>

"通用（普通）样式的搜索框" 效果图：         "带图标样式的搜索框" 效果图：

2.2 <#form:input />标签

使用<#form:input />标签的输入框，有以下两种用法，比如： 

													

														
													

														
  1、通用（普通）样式的输入框： ①指定id属性值为'userCode'，自动为表单内的name绑定属性值为'userCode'；														
  <#form:input id="userCode" />				
  										
  2、必填项样式的输入框： ①指定id属性值为'userCode'，自动为表单内的name绑定属性值为'userCode'； ②指定class样式(可选)为必填项，如不填则为非必填项
  <#form:input id="userCode" class="required"/>
  
  3、带图标样式的输入框： ①指定id属性值为'phone'，自动为表单内的name绑定属性值为'phone'； ②指定iconClass固定值为"btn-input-button"; ③指定icon值，值来源于 "FontAwesome官网图标库"
  <#form:input id="phone" iconClass="btn-input-button" icon="fa-phone"/>
  
  4、数值类型样式的输入框： ①指定id属性值为'amount'，自动为表单内的name绑定属性值为'amount'；  ②指定type类型为'number',number是指数值类型，也就是说当前的输入框只可以输入整数、不可以输入带小数据点的非整数类型，如：100（合法），100.3（不合法）
  <#form:input id="amount" type="number"/>

"通用（普通）样式的输入框" 效果图：
"带图标样式的搜索框" 效果图：     

"数值类型样式的输入框" 合法数值的效果图：    
"数值类型样式的输入框" 非合法数值效果图：   

2.3 <#form:button />标签

														

															
														

															
	1、保存样式的按钮： ①指定id属性值为'ensure'； ②指定name属性值为'提交';  ③指定class样式为'btn btn-info'; ④指定icon值，值来源于 "FontAwesome官网图标库"; ⑤指定点击事件onclick绑定submitPage函数，传参路径为'/user/save';
	<#form:button id="ensure" name="提交" class="btn btn-info" icon="fa-check" onclick="submitPage('/user/save')"/>
	
	2、关闭样式的按钮： ①指定id属性值为'cancel'； ②指定name属性值为'关闭';  ③指定class样式为'btn btn-default'; ④指定icon值，值来源于 "FontAwesome官网图标库"; ⑤指定点击事件onclick绑定closePage函数，无参数;
	<#form:button id="cancel" name="关闭" class="btn btn-default" icon="fa-mail-reply-all" onclick="closePage()"/>
	
	3、新增样式的按钮： ①指定name属性值为'新增';  ②指定class样式为'btn btn-add btn-sm button-item'; ③指定icon值，值来源于 "FontAwesome官网图标库"; ④指定图标位置:图标前置    ⑤指定点击事件onclick绑定addPage函数，传参路径:'/user/form',传参名称:'新增用户'(也就是新打开的页面标题是'新增用户');
	<#form:button name="新增" class="btn btn-add btn-sm button-item" icon="fa-plus" iconLocation="icon-before" onclick="addPage('/user/form','新增用户')"/>
	
	4、刷新样式的按钮： ①指定name属性值为'刷新';  ②指定class样式为'btn btn-add btn-sm button-item refreshButton'; ③指定icon值，值来源于 "FontAwesome官网图标库"; ④指定图标位置:图标前置    ⑤指定点击事件onclick绑定refreshPage函数，无参数;
	<#form:button name="刷新" class="btn btn-add btn-sm button-item refreshButton" icon="fa-refresh" iconLocation="icon-before" onclick="refreshPage()"/>
	
	5、查询样式的按钮： ①指定name属性值为'查询';  ②指定class样式为'btn btn-default btn-sm'; ③指定点击事件onclick绑定obj.search()函数，无参数;
	<#form:button name="查询" class="btn btn-default btn-sm" onclick="obj.search()"/>

"保存样式的按钮" 效果图：     "关闭样式的按钮" 效果图：

"保存样式的按钮" 效果图：       "刷新样式的按钮" 效果图：    "查询样式的按钮" 效果图：

2.4 select标签

1.3.1 使用select标签，实现下拉列表样式的搜索框，比如： 

														

															
														

															
  1、下拉列表样式的搜索框： ①指定id属性值为'sex'；②指定name属性为'sex'； ③指定class样式为"input-dict-sm"; ④指定dictType类型为数据字典类型，值来源平台 [字典管理] 列表的 [字典类型]；⑤指定defaultValue默认值为0，值来源于平台 [字典管理] 列表user_sex对应的[数据字典]
  <select id="sex" name="sex" class="input-dict-sm" dictType="user_sex" defaultValue="0"></select>

"下拉列表样式的搜索框" 效果图：

1.3.2 使用select标签，实现下拉列表样式的输入框，比如： 

														

															
														

															
  1、下拉列表样式的输入框： ①指定id属性值为'sex'；②指定name属性值为'sex'； ③指定class固定样式为"input-sm form-control"; ④指定dictType类型为数据字典类型，值来源平台 [字典管理] 列表的 [字典类型]；⑤指定defaultValue默认值为1，值来源于平台 [字典管理] 列表user_sex对应的[数据字典]
  <select id="sex" name="sex" class="input-sm form-control" dictType="user_sex" defaultValue="1"></select>

"下拉列表样式的输入框" 效果图：

1. 引入布局和js脚本
1.1 引入默认布局
1.2 引入js
2. 各种标签使用方法
2.1 <#form:list/>标签
2.2 <#form:input/>标签
2.3 <#form:button/>标签
2.4 select标签

QQ交流群

QQ交流群
javamis开源技术 Copyright © 2022 www.javamis.com All rights reserved. 客服联系方式QQ：763236277