jQuery可視化表單拖拽編輯實例

基于jQuery和bootstrap框架制作可視化表單，點擊工具欄插入文本框、多行文本、框時間選擇、框單選框、多選框、下拉選擇框、文本下拉框表單元素，支持拖拽或刪除，可編輯表單屬性內(nèi)容，導入或導出json數(shù)據(jù)，表單預覽等功能。

使用介紹：

新增

所有控件定義在數(shù)組中,自由增減,屬性和樣式均定義為方法,自由改變
單選框,多選框,下拉框等增加默認選中
屬性窗口增加主動關閉
所有元素增加控件ID,并展示在設計窗口
增加清空所有元素
增加導出JSON格式數(shù)據(jù)
增加導入JSON格式數(shù)據(jù)
實現(xiàn)表單預覽,以json格式渲染表單的方式
獲取表單數(shù)據(jù)
表單屬性可以設置標簽對齊方式(居左,居右,局上),標簽寬度

修復

拖動元素后,如果未正確拖動到設計區(qū)域,隱藏提示線刪除控件后屬性框不會消失
不可以鼠標拖動選擇輸入的內(nèi)容和標簽文字

優(yōu)化

所有元素設定不同自定義圖標,更加美觀直觀
設計界面增加提示線,方便看到元素占用
美化操作按鈕樣式,功能不變,占用空間更小,方便擴展
調整部分文本提示
校驗錯誤默認隱藏不占據(jù)空間,有錯誤時展示,無錯誤時隱藏
調整為左中右固定布局,兩側250px,中間拉滿拖動新元素或刪除舊元素時隱藏屬性窗口
完善校驗規(guī)則判斷,無校驗要求的視為校驗通過
移除彈窗js,改用bootstrap自帶的模態(tài)框優(yōu)化校驗規(guī)則,校驗通過返回表單數(shù)據(jù) radio類型的屬性如果數(shù)量大于2則每行只展示一個屬性過多滾動條顯示由于白衣蒼狗的jQuery拖拽表單（原創(chuàng)）停滯更新,在他的基礎上完善迭代

使用聲明

1. 本站所有素材（未指定商用），僅限學習交流。
2. 會員在本站下載的原創(chuàng)商用和VIP素材后，只擁有使用權，著作權歸原作者及17素材網(wǎng)所有。
3. 原創(chuàng)商用和VIP素材，未經(jīng)合法授權，請勿用于商業(yè)用途，會員不得以任何形式發(fā)布、傳播、復制、轉售該素材，否則一律封號處理。
4. 本平臺織夢模板僅展示和個人非盈利用途，織夢系統(tǒng)商業(yè)用途請預先授權。

查看演示下載資源

0 5671 15