地址:wanshanshan.com中的”日程“功能
流程介紹 ここはじまる!

前端采用javascriptMVC框架;控制器C,模型M,視圖V ,控制器控制着視圖和模型之間的聯系和數據的交互,這里的視圖有多種不同的顯示方式,
包括 日周月年還有后面即將上來的列表,這些視圖都存在一個模版中,不同的控制器調用不同的模版(這樣的效率比較搞,頁面加載速度較快!),
模版中的像這樣的代碼:
<div class="arrow-left" style="top:25px;"> <div class="arrow_dk"></div> <div class="arrow_lt"></div> </div> <form class="form-horizontal" action="#" style="width:400px;"> <div class="modal-header" style="padding: 5px 10px 0px 10px;"> <a class="close" data-dismiss="modal">×</a> <strong>查看事件</strong> </div> <fieldset> <div class="control-group" style="overflow: hidden;"> <span class="text-input hot" id="content" style="display: block; max-height: 60px; width: 100%;"></span> </div> <div class="control-group"> <label class="control-label" >時間:</label> <span class="text-input" id="time"></span> </div> <div class="control-group"> <label class="control-label" >創建時間:</label> <span class="text-input" id="createtime"></span> </div> </fieldset> <div class="form-actions"> <a href="javascript:void(0)" id="btnEditSche" class="btn pull-left">編輯</a> <a href="javascript:void(0)" id="btnDel" class="btn btn-primary pull-right">刪除</a> </div> </form> <div class="arrow-right" style="top: 25px;display:none"> <div class="arrow_dk"></div> <div class="arrow_lt"></div> </div>
這樣代碼中沒有head和body標簽,ead和body之類的標簽在頁面加載中有過,直接使用他們的JS和css即可! 復用性比較高。
頁面使用Jquery和Ajax和后台進行交互! 使用Jquery的Ajax方式,大家都應該知道吧 就不說它了、
但是有一點后台把對象轉化為json字符串時候建議使用Newtonsoft.Json.dll 效率比較高!
底層數據返回來了,使用視圖中的自動綁定數據模版即可正常顯示數據、像這樣:
1 <tr id="tr<%= sguid %>"> 2 <td id="dtbegin<%= sguid %>" width="20%"> 3 <%if (isallday == "1") {%> 全天<%} else {%><%= noalldaytimeparts %><% }%> 4 </td> 5 <td id="td<%= sguid %>" width="80%"> 6 <%= title %> 7 </td> 8 </tr> 9
這樣的好處在於如是后面頁面樣式變更了那你就不用修改其他地方,就在這里修改了就好了額,很爽吧 用起來很方便的哦!
FullCalendarの四大視圖(日,周,月,年)ここはじまる!
month - see example 月視圖
basicWeek - see example 周視圖(一周內事件和日期的集合)
basicDay - see example (一日內事件和日期的集合)
agendaWeek - see example (周日程表)
agendaDay - see example (日日程表)
日視圖:

周視圖:

月視圖:

年視圖:

上面就是四大視圖的圖片
重要的Function ここはじまる!
這是一個控制器例子:
定義一個控制器:cAddEvent,然后進行加載與之對應的模版 ejs結尾的模板 高效率加載!
$.Controller("cAddEvent", {
defaults: {
ejsPath: {
main: "templates/addEvent_main.ejs",
addEvent: "templates/menuBar_addEvent.ejs"
}
}
}
這是get json字符串的方法:
events: function (start, end, callback) { var events = []; var model = new mEventsQry(); model.attributes.param.TDATE_B = start; model.attributes.param.TDATE_E = end; Common.postRequest(model).then(function (data) { $("#maskBox2").modal('hide'); if (data == null) return; events = loadinMonth(data); callback(events); model = null; }); }
我想說的最重要的一點就是:所有的程序在本地測試都很正常,部署在IIS里面運行起來也正常,但是發布到外網服務器上面就會有問題:
問題是這樣的"ajax數據請求回來的數據是正確的,但是視圖V就是不能顯示出來,不管你是不是用的MVC框架都會有這個問題,到這里肯定會納悶呢,
就這樣前功盡棄了????"
我的解決辦法是這樣的: replace('-', "/") 哈哈 厲害吧!!!!!!!!!!!!!!
我用火狐跟蹤發現外網服務器返回來的數據格式是“2014-01-01” 然而本地的格式是“2014/01/01”
所以簡單的辦法極速hi替換得了。
---------------------------------------丑陋的分割線--------------------------------------------------------
屬性
| id |
可選,事件唯一標識,重復的事件具有相同的 |
| title |
必須,事件在日歷上顯示的title |
| allDay |
可選,是否是整日事件 |
| start |
必須,事件的開始時間 |
| end |
可選,結束時間 |
| url |
可選,當指定后,事件被點擊將打開對應url |
| className |
指定事件的樣式 |
| editable |
是否可拖拽 |
| source |
指向次event的eventsource對象 |
| color |
背景和邊框顏色 |
| backgroundColor |
背景顏色 |
| borderColor |
邊框顏色 |
| textColor |
文本顏色 |
----------------------又一個丑陋的分割線------------------
我 也想要這美麗的生活、所以我去尋找、不停的飛着,飛着、飛着 飛着就看不清了、這時候一定會有人強調夢想的重要意義、堅持,我堅持過。第一年,我靠夢想堅持着;第二年,我靠欲望堅持着;第三年,我靠體格堅持着,第四 年,我靠本能堅持着。可是,五年,六年過去了。。。。。!
看 似生活光鮮的背后,其中的酸甜苦辣又有多少人知道。曾經懷揣夢想,滿懷希望只身一人來到北京,一心想干出大事業,可幾年之后,夢想變成妄想,辛苦奮斗的北 漂們又得到了什么?看着遠在家鄉的朋友們有的已經安家立業,過上了美滿的生活,身處異鄉的北漂族又何時能有屬於自己的家?
我 覺得夢想是一塊餅干,在現實里扛不下去的時候就掰碎了吃一小塊。吃完最后一塊時,你就已經知道自己是誰,也知道下一塊餅干在哪里了。我的那一塊早就吃光 了、要不然我現在為什么總是怎么餓呢、回頭想想我的那些夢想呢、可能丟在了出租屋里、丟在了地鐵或公交車上、丟在了各種言不由衷 迷茫 無助里
讓 我們堅持下去的到底是洗碗還是夢想? 還只是麻木的慣性、生活的目的究竟是應該指着的追求那些你可能永遠都得不到的還是堅守你已經擁有的幸福、每個人的答案可能都不一樣。選擇不同的答案就意味 着有不同的人生軌跡、我們所有的奔波都只是因為希望、無論它是在遙遠的地方還是在出發的地方、哪里有希望哪里就是我們的方向、
行了 到這兒吧
獻給所有在漂泊中淡忘夢想與初衷的同行者!
以上!
謝謝
