如今為了適應需求的不斷變化,動態表單設計器應運而生。它主要是為了滿足界面的不斷變化和提高開發速度。比如:一些頁面客戶可能也無法確定頁面的終於布局,控件的位置,在哪種情況下顯示或不顯示等可能須要隨時改動。為了應對這些需求而不去多次改動源碼進行公布,就能夠在項目中使用動態表單設計器。如今分享一下我做的動態表單設計器的設計思路,共同學習。
想做一個表單設計器,首先要確定是做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地址,參數,顯示的列)
效果