项目前端涉及点梳理

1.layui 框架使用
官网：http://www.layui.com/
兼容性：layui 兼容人类正在使用的全部浏览器（IE6/7除外），可作为 PC 端后台系统与前台界面的速成开发方案。
项目中之所以选用这个框架，主要看中其兼容性。这里主要用到了其“”数据表格”模块。

table.render({
                elem: '#test',
                url: 'demo/test',
                cols: [[
                  { type: 'checkbox' }
                  , { field: 'name', width: 200, title: '名称' }
                  , { field: 'BeginTime', width: 200, title: '起始时间' }
                  , { field: 'EndTime', width: 200, title: '结束时间' }
                  , { field: 'rate', width: 200, title: '分数', sort: true }
                ]]
              , where: {
                    key{//可以不用key
                      begintime: begintime,
                      endtime: endtime,
                      timestamp:new Date().getTime()
                    }
              }
              , skin: 'row ' //行边框风格
              , even: true //开启隔行背景
              , page: { theme: '#1E9FFF' }
                //根据设定的合格线重新渲染，更改其背景色
               , done: function (res, curr, count) {
                   //如果是异步请求数据方式，res即为你接口返回的信息。
                   //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
                   var data = res.data;
                   var hege = $('#hege').val();
                   for (var i = 0; i < data.length; i++) {
                         if (data[i].rate < hege) {
                              $("tr[data-index=" + i + "]").css("background-color", "red")

                         }   
                   }
               }
            });

问题：
（1）表格加载时URL中的过滤条件
在where属性中，键值对形式。官网demo用到了key关键字，这里会把参数名封装成“key[参数名]”，若不想参数名被封装，可以将key省略。
（2）ie8加载，需要在URL中添加时间戳。
（3）回调函数done：可以在数据加载完成时，获取当前页数据，然后根据当前页数据进行重新自定义渲染页面。
比如：某一列的函数值满足某种条件时，将该行标为红色。
（4）框架中使用page参数时，想改变其默认属性，直接在其后面设置属性值。
2.其他
（1）页面加载前，设置下拉框内容以及默认选中

//添加周下拉框数据
这里结合layui框架：form = layui.form;
function addWeekOptions(currentweek) {
    var root = document.getElementById("week");
    for (var i = 1; i < 53; i++) {
        var option = document.createElement("option");
        option.setAttribute("value", i);
        option.innerText = i;
        if (i == currentweek) {
            option.setAttribute("selected", true);
        }
        root.appendChild(option);
        form.render('select');
    }
}

（2）日期格式化

//定义
Date.prototype.Format = function (fmt) {
    var o = {
        "M+": this.getMonth() + 1, //月份   
        "d+": this.getDate(), //日   
        "h+": this.getHours(), //小时   
        "m+": this.getMinutes(), //分   
        "s+": this.getSeconds(), //秒   
        "q+": Math.floor((this.getMonth() + 3) / 3), //季度   
        "S": this.getMilliseconds() //毫秒   
    };
    if (/(y+)/.test(fmt))
        fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (var k in o) {
        if (new RegExp("(" + k + ")").test(fmt)) {
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        }
    }
    return fmt;
};

//调用
new Date().getTime().Format("yyyy-MM-dd hh:mm:ss")

（3）已知年份、周数、周几得到该日期

/根据年份，周数返回时间
function getXDate(year, weeks, weekDay) {
    //用指定的年构造一个日期对象，并将日期设置成这个年的1月1日
    var date = new Date(year, "0", "1");
    //取得这个日期对象 date 的长整形时间 time
    var time = date.getTime();
    //将这个长整形时间加上第N周的时间偏移
    //因为第一周就是当前周,所以有:weeks-1,以此类推
    //7*24*3600000 是一星期的时间毫秒数,(JS中的日期精确到毫秒)
    time += (weeks - 1) * 7 * 24 * 3600000;
    //为日期对象 date 重新设置成时间 time
    date.setTime(time);
    if (model == "AAS") {
        return getNextDate(date, weekDay).Format("yyyy/MM/dd hh:mm:ss");
    } else {
        return getNextDate(date, weekDay).Format("yyyy-MM-dd hh:mm:ss");
    }
}

function getNextDate(nowDate, weekDay) {
    //0是星期日,1是星期一,...
    weekDay %= 7;
    var day = nowDate.getDay();
    var time = nowDate.getTime();
    var sub = weekDay - day;
    time += sub * 24 * 3600000;
    nowDate.setTime(time);
    return nowDate;
}

（4）判断当前日期处于一年的第几周

//获取当前周
function getWeek() {
    var today = new Date();
    var firstDay = new Date(today.getFullYear(), 0, 1);
    var dayOfWeek = firstDay.getDay();
    var spendDay = 1;
    if (dayOfWeek != 0) {
        spendDay = 7 - dayOfWeek + 1;
    }
    firstDay = new Date(today.getFullYear(), 0, 1 + spendDay);
    var d = Math.ceil((today.valueOf() - firstDay.valueOf()) / 86400000);
    var result = Math.ceil(d / 7);
    return result + 1;

}