FreeMarker常用标签示例

FreeMarker介绍：http://www.oschina.net/p/freemarker/

 

1、[#include /]

[#include 'admin/common/bjui/page-form.html' /]

 

2、列表页面，循环列表，时间展示

<div class="bjui-pageHeader">
	<a
		href="xxx-add.html?id=${paramMap.id}" class="btn btn-default" data-toggle="dialog" data-width="800" data-height="600" data-id="dialog-mask" data-mask="true">新增示例</a> 
	<br>
		
    <form id="pagerForm" data-toggle="ajaxsearch" action="xxx-list.html" method="post">
        [#include 'admin/common/bjui/page-form.html' /]
        <input type="hidden" name="id" id="id" value="${paramMap.id}">
        <div class="bjui-searchBar">
        
            <label>示例名称：</label>
            <input type="text" id="fieldName" name="fieldName" value="${paramMap.fieldName!''}" class="form-control" size="25">&nbsp;
            
            <button type="button" class="showMoreSearch" data-toggle="moresearch" data-name="custom"><i class="fa fa-angle-double-down"></i></button>
            
            <button type="submit" class="btn-default" data-icon="search">查询</button>&nbsp;
            <a class="btn btn-orange" href="javascript:;" data-toggle="reloadsearch" data-clear-query="true" data-icon="undo">清空查询</a>
        </div>
        <div class="bjui-moreSearch">
            <label>日期：&nbsp;从&nbsp;</label>
            <input type="text" id="beginDate" name="beginDate" value="${paramMap.beginDate!''}" data-toggle="datepicker" data-rule="date" class="form-control" size="15">
            	&nbsp;到&nbsp;
            <input type="text" id="endDate" name="endDate" value="${paramMap.endDate!''}" data-toggle="datepicker" data-rule="date" class="form-control" size="15">
        </div>
    </form>
</div>
<div class="bjui-pageContent tableContent">
    <table class="table table-bordered table-hover table-striped table-top" data-selected-multi="true">
        <thead>
            <tr>
                <th width="50">序号</th>
                <th width="200">示例名称</th>
                <th width="150">创建时间</th>
                <th width="180">操作</th>
            </tr>
        </thead>
        <tbody>
            [#assign index=1/]
	    	[#list pageBean.recordList as bean]
		        <tr data-id="${bean.id}">
		          <td>${index}[#assign index=index+1/]</td>
		          <td>${bean.fieldName!''}</td>
		          <td>${bean.createTime?string["yyyy-MM-dd HH:mm"]}</td>
		          <td>
		          	<a href="xxx-view.html?id=${bean.id}" class="btn btn-green" data-toggle="navtab" data-id="form" data-reload-warn="本页已有打开的内容，确定将刷新本页内容，是否继续？" data-title="查看示例">查看</a>
		          	<a href="xxx-edit.html?id=${bean.id}" class="btn btn-blue" data-toggle="navtab" data-id="form" data-reload-warn="本页已有打开的内容，确定将刷新本页内容，是否继续？" data-title="修改示例">修改</a>
	          		<a href="xxx-delete.html?id=${bean.id}" class="btn btn-red" data-toggle="doajax" data-confirm-msg="确定要删除[${bean.fieldName!''}]吗？">删除</a>
		          </td>
		        </tr>
			[/#list]
        </tbody>
    </table>
</div>
[#include 'admin/common/bjui/page-bar.html' /]


<script type="text/javascript">
	
	function clickSearch(){
		$('#pagerForm').submit();
	}
	
</script>

 

3、###三级类别、if标签使用、if else if else标签使用

<tr>
	<td>
	 <label for="level1Id" class="control-label x100">三级类别：</label>
	 [#if xxx.level == 3]
	 	${(xxx.parent.parent.fieldName)!''}&nbsp;&gt;&gt;&nbsp;${(xxx.parent.fieldName)!''}&nbsp;&gt;&gt;&nbsp;${(xxx.fieldName)!''}
	 [#elseif xxx.level == 2]
	 	${(xxx.parent.fieldName)!''}&nbsp;&gt;&gt;&nbsp;${(xxx.fieldName)!''}
	 [#elseif xxx.level == 1]
	 	${(xxx.fieldName)!''}
	 [#else]
	 [/#if]
	</td>
</tr>

 4、修改界面 radio

<tr>
    <td>
        <label for="status" class="control-label x85"><r style="color:red;">*</r>状态：</label>
        <input type="radio" name="status" id="status1" data-toggle="icheck" value="1" [#if xxx.status==1] checked='checked' [/#if] data-label="启用&nbsp;&nbsp;">
        <input type="radio" name="status" id="status2" data-toggle="icheck" value="0" [#if xxx.status==0] checked='checked' [/#if] data-label="停用">
    </td>
</tr>

 5、上传图 fileupload file upload

/**图：图片上传成功后的回调方法**/
function pic_upload_success(file, data) {
    var json = $.parseJSON(data)
    
    $(this).bjuiajax('ajaxDone', json)
    if (json[BJUI.keys.statusCode] == BJUI.statusCode.ok) {
        $('#pictrue').val(json.filename).trigger('validate')
        $('#pictrue_show').html('<img src="' + json.fileurl + json.filename +'" width="200" />')
    }
}
function do_OK(json, $form) {
    console.log(json)
    console.log($form)
}

/** 文件上传 **/

 

<!-- plugins -->
<!-- swfupload for uploadify && kindeditor -->
<script src="statics/BJUI/BJUI/plugins/swfupload/swfupload.js"></script>
<!-- other plugins -->
<link href="statics/BJUI/BJUI/plugins/uploadify/css/uploadify.css" rel="stylesheet">
<script src="statics/BJUI/BJUI/plugins/uploadify/scripts/jquery.uploadify.min.js"></script>
<script src="statics/BJUI/BJUI/plugins/download/jquery.fileDownload.js"></script>

<tr>
<td>
<label for="pictrue" class="control-label x85">图：</label>
<div style="display: inline-block; vertical-align: middle;">
	<div id="j_custom_pic_up" data-toggle="upload" data-uploader="file/uploadImage.html" 
		data-file-size-limit="1024000000"
		data-file-type-exts="*.jpg;*.png;*.gif;*.mpg"
		data-multi="false"
		data-on-upload-success="pic_upload_success"
		data-icon="cloud-upload"></div>
	<input type="hidden" name="pictrue" value="${xxx.pictrue}" id="pictrue">
	<span id="pictrue_show">
		[#if  (xxx.pictrue)??]<img src="${fileurl}${xxx.pictrue}" width="200" />[/#if]
	</span>
</div>
</td>
</tr>

 6、freemarker dialog

<div class="bjui-pageHeader">
    <form id="pagerForm" data-toggle="ajaxsearch" action="xxx-list.html" method="post">
        <div class="bjui-searchBar">
        	<button type="button" class="btn-green" data-url="xxx-add.html" data-toggle="dialog" data-width="600" data-height="400" data-id="xxx-add" data-icon="plus" title="添加">添加</button>
        	<a href="xxx-list.html?id=0" class="btn btn-blue" data-toggle="navtab" data-id="xxx-list" data-title="管理">管理</a>
        </div>
    </form>
</div>

 7、时间显示标签

<td>${bean.createTime?string["yyyy-MM-dd HH:mm"]}</td>
<td>[#if bean.beginTime?if_exists] ${bean.beginTime?string("yyyy-MM-dd HH:mm:ss")} [/#if]</td>