自定义一个 freemarker的select标签

该标签可以最终生成类似<select><option></option></select>的html代码。

使用此标签可以简化页面的<select>控件的维护,而且可以兼容多种数据组织方式。可以轻松的控制的<select>的选中。

select.ftl

<#macro select list=[] defaultOptions={} optionName="name" optionValue="id" value="" extra...>
<select<#include ‘extra.ftl‘>>
<#list defaultOptions?keys as key>
<#if key==value>
<option value="${key}" selected="selected">${defaultOptions[key]}</option>
<#else>
<option value="${key}">${defaultOptions[key]}</option>
</#if>
</#list>

<#if list?is_enumerable>
	<#list list as item>
		<#if item?is_hash>
		<#local option_Value = item[optionValue]!item/> <#--页面的1,2,3 没有经过包装,所以${3["a"]怎么写都会报错}-->
		<#local option_Name = item[optionName]!item/>
		<#else>
		<#local option_Value = item/>
		<#local option_Name = item/>
		</#if>

		<#if (option_Value?string)==value>
		<option value="${option_Value}" selected="selected">${option_Name}</option>
		<#else>
		<option value="${option_Value}">${option_Name}</option>
		</#if>
	</#list>
<#elseif list?is_hash_ex>
	<#list list?values as item>
		<#local option_Name = item/>
		<#local option_Value = list?keys[item_index]/>
		<#if (option_Value?string)==value>
		<option value="${option_Value}" selected="selected">${option_Name}</option>
		<#else>
		<option value="${option_Value}">${option_Name}</option>
		</#if>
	</#list>
</#if>
<#nested>
</select>
</#macro>

extra.ftl

<#if extra?size!=0> <#assign x = extra.extra!extra><#list x?keys as a>${a}="${x[a]?html}"<#if a_has_next> </#if></#list></#if>

参数说明:

list 是要组织成select的基本数据:例如可以是一个map,可以是一个list<User> ,也可以是 [1,2,3]序列,也可以是[2014..2020]freemarker的数据结构等等

defaultOptions:默认要显示的选项,例如{"1","--请选择--"} 会在select上生成一个option 或者多个

optionName:当我们list 是一个类似于list<User> 的数据时,该参数有效,比如option的value 我们可以取得user.optionName

optionValue:同上面的optionName一样。

value:就是当前的选中值,很简便,再也不用脚本判断,或者在页面使用if判断了。

使用方式:

a.<@select name="year" list=2014..(.now?string(‘yyyy‘)?number) value="2015" style="border:none;"/>

则会生成

<select name="year" style="border:none;"><option value="2014">2014</option><option value="2015"  selected="selected">2015</option></select>

b.

public static Map<Integer, String> map= new LinkedHashMap<Integer, String>();
    noticeTypes.put(1, "通知公告");
    noticeTypes.put(2, "培训动态");
    noticeTypes.put(3, "培训简报");
    noticeTypes.put(4, "政策文件");

<@select name="kind" list=map value="2" defaultOptions= {"":"--请选择类型--"}/>

c.

List<User> list= new ArrayList<User>();

list.add(user1);

list.add(user2);

<@select name="kind" list=map value="${user.id}" optionName="userName" optionValue="userID"/>

时间: 2024-10-03 19:07:11

自定义一个 freemarker的select标签的相关文章

JSTL,自定义一个标签的功能案例

1.自定义一个带有两个属性的标签<max>,用于计算并输出两个数的最大值: 2.自定义一个带有一个属性的标签<lxn:readFile  src=“”>,用于输出指定文件的内容: ------------------------------------------------------------------------------------ 首先在src目录下建立一个类:MaxTag,其继承于父类:SimpleTagSupport,里边可实现两个数比较的方法 package

mybatis 中 sql 映射文件 select 标签以及 入 resultMap 标签的应用

1.自定义某个 javabean 的封装规则: 注:可以看到,select 标签中引用了 定义好的 resultMap 的值.resultMap 标签中的 type 为javabean 类型,id 为唯一标识.id 子标签定义主键(这样定义底层会有优化.)column 属性为字段名,property 属性为字段值. 注:可以看到测试结果没有出现问题,说明代码没有错误. 2.自定义某个 javabean 的级联属性封装: a.准备工作:mysql 数据库中,在之前 tbl_employees 表的

select标签的默认样式修改

在项目中,用到select标签,需要对select标签自定义样式. 在chrome浏览器中会对select有一个默认的border-radius,并且无法去掉. 可以通过下面的方法来解决: 1.需要通过下面的css才能修改select的border-radius .select { -webkit-appearance: none; -webkit-border-radius: 0px; } 但是这个方法会让select自带的三角箭头消失. 可以通过background来设置一个背景三角箭头来解

thymeleaf-extras-db 0.0.1发布,select标签加载数据的新姿势

在写thymeleaf页面的时候,我为了偷懒,不想为每个select下拉列表框都写一个接口,于是这个懒人jar诞生了.该jar的核心功能是直接通过thymeleaf页面的自定义标签的属性,直接运行sql并初始化select数据. 项目地址: github gitee 简介 thymeleaf-extras-db是针对thymeleaf的扩展,主要是简化前端select标签数据的获取,让select标签直接从数据库加载数据,而不需要单独写接口,支持缓存. 导入 <dependency> <

HTML中的&lt;select&gt;标签如何设置默认选中的选项

方法有两种. 第一种通过<select>的属性来设置选中项,此方法可以在动态语言如php在后台根据需要控制输出结果. 1 2 3 4 5 < select  id =  "sel" > < option  value = "1" >1</ option > < option  value = "2"  selected = "selected" >2</ opt

Ember.js 入门指南——自定义包裹组件的HTML标签

按照惯例,先做好准备工作,使用Ember CLI命令生成演示所需的文件: ember g route customizing-component-element ember g component customizing-component-element ember g route home ember g route about 默认情况下,组件会被包裹在div标签内.比如,组件渲染之后得到下面的代码: <div id="ember180">   <h1>M

selenium处理select标签的下拉框

有时候我们会碰到<select></select>标签的下拉框.直接点击下拉框中的选项不一定可行.Selenium专门提供了Select类来处理下拉框. <select id="status" class="form-control valid" onchange="" name="status"> <option value=""></option&g

Html 中select标签的边框与右侧倒三角的去除

首先是边框的去除:可以设置属性border:none;或border:0px; 不过这还是有一个bug,不同浏览器会在选中select标签时,加上一个边框: 之后是右侧倒三角的去除:设置属性 appearance:none; 以下所有属性兼容当前主流浏览器:appearance:none; -moz-appearance:none; -ms-appearance:none; -o-appearance:none; -webkit-appearance:none; (不过对与IE浏览器这个属性好像

select标签multiple属性的使用方法

前些日子公司让做一个功能模块,对于里面一个小功能费了些周折,现将其总结一下: 一.实现效果: 一.实现代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&qu