前言:在企業數據處理過程中,經常需要通過定制表單來輸入業務數據。由於涉及的數據比較離散,並不同於ERP系統的緊密關聯數據。假如由開發人員每個增加頁面,工作量會比較大,后期后期的維護很升級也耗費時間和精力。所以表單設計器是一個實現動態表單的解決辦法,用戶無需重復編寫表單代碼就可以管理表單和存儲表單數據。
1. 表單設計器
表單設計器是一款基於Bootstrap3風格的WEB應用,操作過程描述主要是將左側面板控件拖動到表單編輯區域進行排版,每個控件可以編輯對應的數據庫字段屬性,常見屬性有:字段類型,輸入格式,控件名稱等。等所有界面字段編輯保存后,生成表單模板的HTML文本。從而可以預覽正式的表單加載頁面。這樣在表單集成業務應用系統中,生成正式的運行頁面。在運行階段,頁面控件的輸入數值可以被保存在后端對應的數據庫表中。
1.1 控件類型
常見的控件類型主要有:輸入文本框,下拉框,單選按鈕,復選按鈕,多選列表,命令按鈕和數據表格等。其中如文本等類型的控件對應數據庫的輸入字段,而如按鈕類型的控件只是在界面上顯示而已,並不對應於數據庫的字段。
1.2 HTML內容
表單定義內容被存儲成HTML內容,便於表單后期解析加載。其中HTML的Bootstrap框架樣式和腳本文件只需要記錄路徑就可以。通過表的設計器上的預覽功能界面上,就可以看到完整的HTML輸出內容和頁面布局。
1.3 高級控件功能實現
a) 文件上傳組件
表單附件是依附於表單的文檔數據,比如WORD、EXCEL、PDF和JPEG文件等。在表單設計器控件中,文件上傳組件采用了第三方組件FineUpload完成這一控件功能。表單定義的HTML內容中包含了上傳組件類型,在表單解析器中將會加載FineUpload控件的樣式和腳本,並通過上傳頁面完整實現文件上傳到后端服務器的過程。
文件上傳到服務器端后,可以對接用戶自有的文件系統,也可以比如阿里雲或其它雲端存儲系統。
b) 數據表格組件
在一個表單中為了展現關聯數據,可以設置數據表格控件來讀取數據庫其它表單實體數據。數據表格采用ag-grid控件,主要是考慮復雜數據格式的處理和編輯。
1.4 表單解析器
表單解析器是把表單定義的HTML內容重新加載到頁面DIV控件中,對於簡單控件類型,直接加載預留的控件格式定義就可以,但是對於高級控件,如文件上傳和數據表格控件,則需要額外讀取這些控件的樣式或者腳本,或者其它標准定義好的頁面,從而完成這些控件的所實現的表單高級功能。
2. 表單數據存儲
常見的表單數據存儲有XML格式,或者預留的多列數據庫結構定義以及EAV模型存儲。在SlickMaster表單設計器項目中,優先采用了EVA模型,主要考慮的是系統的數據存儲和后期讀取效率的平衡。EAV模型也被知名電商公司Magento應用於產品數據定義,確實很好地解決了表單定義、表單數據存儲和表單數據查詢等關鍵問題。
2.1 EAV模型解釋
EAV是Entity-Attribute-Value的縮寫,用於存儲表單實體、屬性定義和屬性數值。跟傳統關系型數據庫不同的是:實際表數據庫存儲時是key-value格式的行記錄存儲,而關系型數據庫是多列數據存儲。
2.2 表單數據行列轉置
數據讀取雖然可以通過行記錄方法讀取出來,其中一行讀取一條屬性名稱和屬性數值。但是通常的行記錄是希望包含多列數據同時拼湊出一條。所以數據庫記錄需要行列轉置(Pivot)來實現表單數據實體的讀取。雖然屬性不是固定對象字段類型,但是仍然可以通過.NET的dynamic類型來操作處理。再有,這些動態類型的實體數據,在前端展現也可以通過每次動態生成的列標題來加載展現,最終實現了數據的用戶友好體驗展現。
3. 表單和工作流引擎的集成
表單可以跟引擎組件集成在一起完成文檔的審批流轉。其中表單數據的保存、接收、流轉、撤銷、退回、廢棄和結束等通用按鈕都是可以被標准化定義出來。而表單解析器則是通過把表單設計器定義好的表單HTML內容加載在動態表單的展現區域。
4. 總結:
表單設計器用於解決常見的比如調查問卷填寫,或企業管理數據的錄入和維護,其主要功能是渲染生成HTML表單,存儲結構化數據。在高級應用功能是集成工作流引擎組件,完成表單審批流轉。
5. DEMO
演示地址:http://demo.slickflow.com/smd/
6. 社區版源代碼
SlickMaster項目開源地址:
http://github.com/besley/slickmaster
7. 企業版授權說明
1) Demo僅作為功能演示使用,如需獲取產品完整源代碼和開發文檔,請申請企業版商業授權。
2) QQ群:233248778
3) EMail: sales@ruochisoft.com