jCT的糾結,前臺模板下Grid基礎版

SVN已經更新.最新下載:jCT最新版本

更多信息請看我博客裏的jCT專題 或者jCT開源主頁示例 裏面有最簡單的例子,另外我更希望感興趣的你能直接提出html代碼和需求,我們討論如何用jCT的方法寫出.

===============================================


前一篇jCT糾結文寫完後,其實我並沒有完整的去完成一個Grid,不實際完成他一些事情不能明細,也無法論證想法

那就實際的做一個完整的吧,現在已經完成了一個基礎版的jCT Grid 請訪問 jCT開源主頁示例感興趣先看一下運行結果了,就是一個最簡單結構的Grid 基礎版本 源代碼 也直接從googlecode查看吧。

稍後繼續解釋以及豐富這個Grid,呵呵,我自己也不知道接下來的開發會遇到什麼問題,,,

I will be back....... .

====ps================================

汗呀!忘記測試IE下的效果了,,,修復了一下IE也正常顯示了

======================================

2009-12-23凌晨

終於解決了一個功能:cell寬度的調整,唉,自己要想寫出一點不同的結構還真不容易,抄人家的結構真的很沒意思呀,硬着頭皮搞了一個不一樣的,不能說有啥好處,反正是自己想出來的,看了2個其他的實現還真和他們的結構不一樣,天亮繼續,先看章小說去,,,
2009-12-23
重新組織了一下代碼結構,並在FireFox,IE6,7(既然IE8可以採用IE7模式,那就不浪費生命了)測試完成,至此jCT Grid基礎版正式完成(採用了jQuery,$.fn.noSelect 來自flexigrid,感謝Paulo P.Marinas)

可是怎麼沒有換頁更新數據的支持?也無法編輯修改,提交數據?
基礎版就是打個基礎,這些都是額外的功能,我想表達的就是以模板形式開發組件改造是很容易的,因爲代碼大大簡化了,基於我的習慣,下面我將用ajax細粒度通訊nameTree 的技術來完成這個
對於這個Grid的結構,在FireBug下查看一下,就很清楚了,唯一需要特殊解釋的就是

<div class="jctgrid-colwidth index-n"><div></div></div>

 這個結構,這是爲了能調節列寬度而準備的,其實Grid的cell中是沒有垂直的邊框線的,這個jctgrid-colwidth同時也扮演着垂直邊框線的作用,因此就有了jctgrid-ghead,jctgrid-gbody在兩個部分都需要放置這個jctgrid-colwidth
對於jctgrid.js裏面的代碼
1.由於模板的特性,模板不知道用戶是要$('body').html(htmlsrc),還是要用
$('body').append(htmlsrc),而模板建立的緊緊是字符串源碼不是DOM對象,所以通過對生成對象賦予唯一的id來確定新對象,因此設置了全局計數器GID,並使用到模板中
2.jCTLib是jCT模板組件操作的容器對象,由於現在還沒有完善的組織目前就簡單組織了個平板式的結構,也許以後
jCT模板組件編譯轉儲後,會設計個新的結構
3.給jCT實例增加了PushView方法,就是直接把參數字符串壓入輸出緩存數組
4.考慮到以後
jCT模板組件編譯轉儲的可讀性,對 模板文本中的空白字符進行了簡單刪除

txt=txt.replace(/[\f\n\r\t\v]+/g,'');

 

模板和代碼都不多,看看你應該很容易明白

 

發佈了23 篇原創文章 · 獲贊 0 · 訪問量 5421
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章