.net web 開發平台- 表單設計器 一(web版)


         如今為了適應需求的不斷變化,動態表單設計器應運而生。它主要是為了滿足界面的不斷變化和提高開發速度。比如:一些頁面客戶可能也無法確定頁面的終於布局,控件的位置,在哪種情況下顯示或不顯示等可能須要隨時改動。為了應對這些需求而不去多次改動源碼進行公布,就能夠在項目中使用動態表單設計器。如今分享一下我做的動態表單設計器的設計思路,共同學習。
     想做一個表單設計器,首先要確定是做c/s的還是b/s。我考慮到以后的發展方向是c/s向b/s轉化,所以就選擇了b/s的方向,並且做b/s比做c/s要簡單非常多。在做表單設計器之前,須要先實現各種控件,設計好各控件的各種屬性。於是我選擇對Ext中的各種控件進行封裝,做成滿足自己須要的控件。

首先說一下功能:

1.包括一些經經常使用到的控件:文本,超鏈接,button,文件上傳,圖片,文本輸入框,多行文本輸入框,日期,時間,列表框(listBox),下拉列表框(分為:可分頁和不可分頁兩種),復選框,單選列表,復選列表,gridlist表格。當然設計器應該便於擴展,當以后須要其他的控件的時候能夠非常方便的加入進去。

2.能夠非常方便地對各控件進行操作(剪切,粘貼,復制,刪除,位置大小的調整)。

3.能夠非常方便的對控件的各屬性進行設定。這樣須要對控件作改動的時候,盡量做到不須要改動代碼,在設計當中做一下改動就能夠達到目的。

4.由於一些控件可能須要實現一些特殊的功能,所以須要提供編寫js代碼的界面。

 

(1)文本:文本控件非常easy,主要是對文本控件的樣式和是否隱藏進行設定。

保存后,訪問的效果:

2.超鏈接:超鏈接須要可以設定打開連接的地址,和打開的方式(本頁面打開,新窗體打開,模式窗體打開)

保存后,訪問的效果:

3.button:主要是可以設定點擊button運行的方法

在腳本界面,能夠編寫js代碼。保存后,訪問的效果例如以下:

4.文件上傳:能夠設定上傳文件的類型,是否可上傳多個文件等

 

保存后訪問的效果:

5.復選框

效果:

6.圖片:

效果:

7.輸入框:須要能指定可輸入數據的類型,並能自己主動驗證

效果

8.多行文本框

效果:

9.日期輸入框:須要可以設定日期的格式

效果

10.時間輸入框:須要可設定日期的格式

效果:

 上面的這些控件都是一些簡單的基本控件。

 

接下來的是和數據進行交互的控件.這些控件有以下的要求:

1.能設定靜態數

2.能通過設定的參數動態的從數據庫中讀取數據。

3.能設定查詢的參數。

4.能設定顯示的字段和顯示的方式並能實現聯動

1.列表控件(listBox)

設定靜態數據

設定動態數據:

效果:

 

2.下拉列表框

 

3.可動態讀去數據可分頁的下拉列表框

效果:

 

4.單選列表

靜態數據

動態數據

效果:

 

5.復選列表

 

效果:

6.grildList列表(可設定查詢的ajax地址,參數,顯示的列)

效果

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM