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();

(资金)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值