html+freemarker+js知识小总结

html+freemarker+js
时间取用的是name值
html：
<td class='bg'>

      <div><span class="must">*</span> 时间 </div>
</td>
<td>
     <input type="text" class="start-time long _vali_not_blank" id="time" name="time"  readonly value="${vo.time!''}" _target_name="时间">
</td>
js：
//初始化日期
function InitDate () {
    this.init();
};
InitDate.prototype.init = function () {
//展示年月日可选年月日
    $("#payTime").datepicker({
        altField: '#payTime',
        changeMonth: true,
        changeYear: true,
        showButtonPanel :true,
        onSelect:function(dateText,inst){
            $("#payTime").val(dateText)
        }
    }).click(function (){
        $('.ui-datepicker-calendar').css("display","table");
        $('#ui-datepicker-div').unbind("click").click(function () {
            $('.ui-datepicker-calendar').css("display","table");
        })
    });
    //展示年月可选年月
    $("#time").datepicker({
        altField: '#time',
        currentText:'本月',
        closeText: "关闭",
        changeMonth: true,
        changeYear: true,
        dateFormat: 'yymm',
        showButtonPanel: true,
        maxDate:new Date(),
        constrainInput :true,
        onChangeMonthYear:function (year,month,inst){
            $('.ui-datepicker-calendar').css("display","none")
        },
        onClose: function(stateDate, inst) {

            var month = $("#ui-datepicker-div .ui-datepicker-month option:selected").val();//得到选中的月份值
            var year = $("#ui-datepicker-div .ui-datepicker-year option:selected").val();//得到选中的年份值

            if(parseInt(month) + 1 < 10 ){
                var temp = '0'+ (parseInt(month) + 1);
            }else{
                var temp = parseInt(month) + 1;
            }
            $('#yearAndMon').val(year+'-'+temp);//给input赋值，其中要对月值加1才是实际的月份
            $('#year').val(year);//给input赋值，其中要对月值加1才是实际的月份
            $('#month').val(temp);//给input赋值，其中要对月值加1才是实际的月份

        }
    }).click(function (){
        $('.ui-datepicker-calendar').css("display","none");
        $('#ui-datepicker-div').unbind("click").click(function () {
            $('.ui-datepicker-calendar').css("display","none");
        })
    });

};
new InitDate();

2、默认取值的时候写一个隐藏input
<input id="id" value="${id}" type="hidden" >
延申
后台返回值时用return ModelViewBuilder.getInstance(request, "matter/matterDetail")
                    .add("id",id).build();
页面取后台返回值用${} ，取值的时候有时候需要判断非空${id!''}
页面看上去整齐可以用<table><tr><td></td></tr></table> 给table一个class（<table class="ser_tab">）   给table外层的div一个class（<div class="main">）
查询要在class中加main_pager_search（已经封装了）
_target_name属性是提交的时候判断非空的提示语用的（封装了的） 一般用在新增编辑保存时判断值不符合要求时提示的

3、下拉框选择
<select name="area" class="long main_pager_search">
    <option value="">请选择</option>
    <#if areas??>
        <#list areas as area>
            <option value="${area.eleKey}">${area.name}</option>
        </#list>
     </#if>
</select>
value的值可以用于选中，${area.name}是展示的值   这里是个下拉框的所有值

4、页面上的按钮
新增直接跳转页面不带值可以用<a>标签<a href="../matter/goToAdd"  id="create">新增</a> （带值能不能用我倒是没用过）
常规带参数跳转不带参数跳转或者还有逻辑需要写的都可以用这种方法写一个onclick    <span class="bianji " οnclick="matterItem.edit('{id}')">编辑</span>
js中：
var matterItem = {
    edit :function(id){
        window.location.href = BaseUtil.getCxtPath() + "/matter/goToEdit?id=" + id;
    },
}

5、<!-- 分页器 -->（封装了的）
            <div class="page">
                <div id="main_myPage" class="clearfix">
                    ${_page_base_pager}${_page_number_changer}
                </div>
            </div>

6、必填项的红色星号
<span class="must">*</span>

7、onclick运用

οnclick="SearchExport();这种在js中直接用function SearchExport(){}
οnclick="matterItem.excelExportAll()"这种在js中用
var matterItem = {
    excelExportAll:function(){}
}

8、用main_pager_search搜索筛选条件一定要给name属性（封装了）

9、跳转页面的时候用这个拼接链接地址：window.location.href=

10、select选择框
选中的值的text：var jQueryPlaza = $('#plazaShortName option:selected').text();

（资金）