LayUI制作日歷工作記錄簿

標題不知道該如何取，大概就是用Lay UI的Table，制作一個日歷，在日歷上可以添加每天的工作簡記錄。記錄下LayUI Table的一些用法，一些值得探索的地方在於日歷生成后，給周末加背景色，當天加背景色。先上一個效果圖：

下面直接上代碼，代碼中有注釋，也會做一些簡單解釋。

 function QueryWorkLog(year, month) {
            table.render({
                elem: '#WorkLogTable'
                , url: '/Home/QueryMyWorkLog'
                , where: { year: year, month: month}
                , page: false
                , cols: [[
                    { type:'radio', width:'5%' }    
                    , { field: 'recorddate', width: '10%', title: '日期', align: 'center' }
                    , { field: 'workcontent', width: '60%', title: '工作內容', align: 'center' }
                    , { field: 'workmarks', title: '備注', width: '25%', align: 'center' }
                ]]
                , done: function (res, curr, count) {
                    var that = this.elem.next();
                    res.data.forEach(function (item, index) {
                        if (IsWeekend(item.recorddate)) {
                          var tr = that.find(".layui-table-box tbody tr[data-index='" + index + "']");
                          tr.css("background-color", "yellow");
                        } 
                        if (IsToday(item.recorddate)) {
                            var tr = that.find(".layui-table-box tbody tr[data-index='" + index + "']");
                            tr.css("background-color", "lightgreen");
                        }
                    });
                }
            });
        }

這里是去后端查詢一下指定年月的工作記錄，如果沒有記錄，則生成一個空的記錄在這里。這樣整個表格就像一個日歷一樣，至於如何去制作這個工作記錄項，可以自由發揮。我重點在研究LayUI這個Table的渲染上，所以控制器和Repository的代碼就不上了。接下來兩個函數來判斷是否為周末以及判斷當天日期，根據這個來給表格的行添加背景色。

        //判斷當前日期，設置當日背景綠色
        function IsToday(curdate) {
            var date = curdate.replace('年', '-').replace('月', '-').replace('日', '');
            if ((new Date(date)).toDateString() == (new Date()).toDateString()) {
                return true;
            }
            return false;
        }

        //判斷是否為周末，設置周末背景色
        function IsWeekend(currentdate) {
            var date = currentdate.replace('年', '-').replace('月', '-').replace('日', '');
            var day = new Date(date).getDay();
            if (day == 0 || day == 6) {
                return true;
            }
            return false;
        }