基于Bootstrap框架的動態表單設計與實現

談華宇++吳昶成++邱小平

摘 要：通過分析動態表單的實現原理，采用Bootstrap前端框架設計并實現了在線表單設計器。動態表單設計器是將用戶待填寫表單中的各種數據項組成特定格式的字符串，再將字符串存儲到數據庫相應的字段中以實現表單結構信息保存的功能。從數據庫中讀取字段，再拼接成指定格式的字符串，并對其讀取解析還原成表單的樣式，即簡單的置換型模板引擎。

關鍵詞：Bootstrap；動態表單；模板引擎

隨著互聯網的日益發展，基于瀏覽器/服務器（B/S）的開發模式已成為如今的應用系統開發的主流，表單作為業務的樞紐和信息的承載體也越來越重要，然而傳統的表單操作存在著操作不靈活，實現復雜，功能簡單等缺點。隨著用戶對于表單需求的發展變化，固定格式的表單結構和單一的表單元素已經無法滿足用戶的需求，用戶對動態表單生成的功能需求迫在眉睫[1]。因此，文章提出了利用Bootstrap前端框架實現設計動態表單，用戶填寫表單內容等功能的技術實現。

1 Bootstrap框架

Bootstrap是Twitter推出的一個開源的用于前端開發的工具包。它由Twitter的設計師Mark Otto和Jacob Thornton合作開發，是一個CSS/HTML框架。Bootstrap提供了優雅的HTML和CSS規范，它即是由動態CSS語言Less寫成。Bootstrap一經推出后頗受歡迎，一直是GitHub上的熱門開源項目，包括NASA的MSNBC（微軟全國廣播公司）的Breaking News都使用了該項目。

Bootstrap中包含了豐富的Web組件，根據這些組件，可以快速的搭建一個漂亮、功能完備的網站。并且可以對Bootstrap中所有的CSS變量進行修改，依據自己的需求定制代碼。

2 動態表單設計思路

由于表單中元素的不確定性，動態表單設計器必須能根據用戶的需要，自由的添加或刪除表單中的元素，并能通過發布給用戶填寫的表單來收集所需要的信息[2]。想要實現表單設計器，可以像可視化編程環境中的控件拖放一樣將已設計好的表單組件從組件庫中取出放在系統界面的合適位置上，最后保存生成動態表單，表單保存成功后會在關系數據庫中自動新建對應的數據表，表名為該表單的拼音，用于存儲用戶填寫表單信息。動態表單實現原理如圖1所示。

系統所涉及的關系數表包括表單表（Form），表單組件表（Element），組件值表（ElementValue）。表單表中的字段有Id，FormName，Description，OwnerId，CreateDate。FormName表示創建表單的中文名稱，Description字段對欲創建的表單進行描述說明，OwnerId表示創建表單的用戶Id，CreateDate表示創建表單的當前時間。表單組件表中的字段包括Id，FormId和TypeId。其中FormId表示該組件所屬的表單Id，TypeId表示表單中當前組件的類型Id，如：Text，Radio或Checkbox。組件值表中包括的字段有Id，ElementId，ElementName，ElementValue。其中ElementId表示組件Id，記錄值為表單組件表（Element）中的主鍵Id值，ElementName表示表單中組件的name屬性值，ElementValue表示表單中組件的value屬性值。用戶在表單的設計過程中將填寫的動態表單中元素添加到表單組件表中，使系統能識別什么元素存儲于什么表中。Types表是存儲常用的不同組件的類型，類型可以是：“text”，“radio”，“label”，“checkbox”，“select”等類型。ElementValue則用來存儲這些元素組件相應的value值。

3 具體功能實現

利用Bootstrap框架設計出用戶界面，前臺利用特定格式的字符串傳給后臺，后臺再將字符串中需要的部分存入關系數據庫的四個表中。即用簡單的置換型模板引擎實現將指定模板內容（字符串）中的特定標記（子字符串）替換，便生成了最終需要的動態表單。特殊格式的字符串如下：

字符串第一項為當前的表單名稱

Label標簽：label，value屬性，name屬性

Text標簽：text，name屬性

Checkbox標簽：Checkbox，標簽名，幾個選項，選項一，選項二

Radio標簽：Radio，標簽名，幾個選項，選項一，選項二

Select標簽：Select，標簽名，幾個選項，選項一，選項二，選項三

然后分別存入Form表，Element元素表，ElementValue元素值表中。

默認傳輸數據為：Checbox，復選框，3，選項一，選項二，Select，下拉菜單，3，選項一，選項二，Radio，單選框，2，選項一，選項二，label，文本框，input1，text，input1.

3.1 設計表單

管理員可以設計表單，由于表單元素的不確定性，由用戶來添加或者刪除表單中的元素。目前只可以有文本框，下拉框，單選框和多選框拖入（或點擊）表單，在表單區域，單擊相應的字段會彈出屬性設置對話框，用戶填寫相關的信息后點擊“確定”按鈕即可保存設置；若不需要一些表單字段，可以鼠標左鍵將相應的字段拖到控件區域便可移除。設計好后保存，保存成功會在右下角出現消息提示。前臺根據特定格式的字符串，傳給后臺，然后進行向四個表中填寫數據。

3.2 發布表單

管理員可以將設計好的表單發布給指定用戶填寫，可以選擇表單以及何人可以填寫表單等，發布后，存入Task表中，其他用戶即可在待填表單中進行填寫提交。

3.3 導出表單

管理員可以將用戶填寫的表單導出成Excel，利用SQL語句關聯表單將信息導出。

4 結語

文章主要闡述了動態表單設計器的設計思路和實現，基本的用戶設計表單和用戶填寫數據功能已經實現。該系統能夠滿足用戶對信息管理系統中表單形式不斷變化的要求，并且通過動態表單系統收集用戶填寫的信息。下一步的研究方向為用戶多次填寫表單后，表單的數據遺留問題。

[參考文獻]

[1]洪英漢，劉竹松，龍桂和.基于SSH框架的動態表單設計與實現[J].現代計算機：下半月版，2009（9）：186-188.

[2]王智廣，陳濤，陳明，等.軟件開發中動態表單的解決方案[J].內蒙古師范大學學報：自然科學版，2010，39（5）：467-472.