2014年2月13日 星期四

[Project]課表轉換(with Javascript(jQuery)) [中止]

Standard
更新2016/11/14 因為學校併校課表系統改採用另一套,故中止
更新2013/02/13 v1
更新2013/02/04-21:30 v0.2
初次編寫2013/02/04-03:30

計畫構想是把學校課程列表的表格直接轉換成課表



便構想以 javascript 來處理
源自去年參加Firefox的社群活動聽到的 X-Ray Goggles
小牢騷:
剛開始不知道 X-Ray Goggles是用甚麼技術
查了許久也不懂
嘗試修改 X-Ray Goggles的內容也沒反應(還不太會javascript...Orz)
後來心灰意冷之下查了有相近功能的 Firefox附加元件 - Greasemonkey
查了wiki竟意外查到了bookmarklets
他是以Bookmarklet來在網頁上外掛javascript
wiki http://zh.wikipedia.org/wiki/Bookmarklets

在聽從前輩的建議下使用 jQuery下
找到了在Bookmarklet載入 jQuery的方法
 http://andy0130tw.blogspot.tw/2012/03/jsbookmarklet-ff11.html

在這之後就一直邊學邊嘗試可能用到的功能(看似無關的功能都沒試xD)
因為插入是最簡單也是很重要的測試功能
所以先學會插入東西測試程式碼有執行



接下來我就開始找如何擷取表格裡的內容
剛開始我只找到用.get()來剪下...
from http://webdesign.kerthis.com/jquery/jquery_selectors
var con1 = $("td")[0].get();
$('body').append(con1);
執行的結果是第一個td內容被移到底部......

查了許久找不到我要的功能
在不抱希望亂翻書結果瞄到了.text()和.html()
這兩個都能擷取元素的內容
但是.text()最後是一串字串而不是陣列
跟理想的功能差距很大
便又重新Google "jQuery 讀取表格"
讓我查到了這個網站
http://ezcshi.pixnet.net/blog/post/27406659-jquery-%E5%AD%B8%E7%BF%92%E7%AD%86%E8%A8%98-2
只不過嘗試複製之下還是不懂(初學者Orz)
於是又再查網路翻書

結果在書上又瞄到jQuery選擇器可以選擇第幾個 td
再結合剛剛查到的
 $('#data tr:gt('+ns+')').each(function(i) {
取id為data內的tr標籤,gt就是取第幾筆(ns)以後的所有資料。
知道可以在選擇器上用變數
靈機一動開始用for迴圈把表格內容一個一個對應到陣列中


既然可以取得資訊
我打算再轉換成二維陣列後
再完成 判斷轉換功能 就成功了^^

======(2013-0204-03:30)================

轉換成二維陣列後[科目數][22]
再創立一個課表的二維陣列[9][6] (節、星期)
接下來用迴圈
先是星期一(x=1)的第一節(y=1)
從第一個科目開始找哪些科目是在星期一第一節
用 indexOf(節數)來判斷
因為是用for迴圈
跑完全部科目就停了
才再找星期一(x=1)的第二節(y=2)
最後用text1放含有html字串輸出成表格

而因為其中周圍要有說明欄
於是只好手動key進去一串

最後在輸出的部分
為了避免一些空堂造成subject[x][y]顯示undefined(無設定)
所以用三元判斷式
如果是false就輸出空白(undefined會造成false)

算是有基本的功能(僅限無衝堂和日間部......)




另外在學生修課那邊有真正學生自己有修的課
這個使用的範本網站只是列出有開的課(有學程會衝堂) Orz
我打算分成兩種來維護

會先改用學生實際修課表來製作
並增加幾點進階功能

  1. 我對外觀不滿意...(CSS3!!!)
  2. 假如有一天都是空堂可自動刪去表格,
    或是每天的某一節都是空堂也刪去
  3. 支援進修部的課程
此版本的進階功能
  1. 同上三點
  2. 衝堂的課都能顯示
  3. 讓使用者勾選是否要加上教師名字和教室名稱
  4. 在一旁做出課程勾選,讓沒勾選的課程從表格消失
大致上規劃就先這樣xD

=====(2013-0204-21:30)==================

基於之前的v0.2做更新
放在學校的說明網頁
Github-NPTU(NPIC) School TimeTable System Plug-in
目前有v1.0.1和v1.1.1並行
v1.0.1是完整列出週一到週日,從早八到進修部放學的時間
v1.1.1基於v1.0.1新增判斷刪去多餘的空白時間

目前版本資訊
此外掛僅支援轉換單一班級
現在除了有兩班的財金系和產學專班以外都可顯示

Update list
2014/08/26修正上課時間發布v1.0.1和v1.1.1
2014/08/25上傳說明網頁並發布
2014/08/24完成v1.0和v1.1


v1.1.1只多了v1.0.1這一段程式碼做表格的 hide()
在這之前已動態產生帶有id的tr和帶有class的td表格

for(x=1;x<15;x++){
            if(jump[x]==""){
                $("#time_"+section[x]).hide();
            }
        }
        if(jump[0]==""){
            $(".day_6").hide();
        }
        if(jump[15]==""){
            $(".day_7").hide();
        }
第一部分 for迴圈是判斷早八時段到進修部放學時間一列一列的隱藏
第二部分 if是判斷週六要不要隱藏
第三部分 if是判斷週日的

因為判斷只做到這
所以週一到週五必定顯示
只有週末上課的部分轉換時就不是很好看啦~

=====(2013-0213)==================

0 意見:

張貼留言