bsFormBuilder表單構建工具
bsFormBuilder 是一個基于 JQuery + Bootstrap (v4.x) 的表單構建工具。
特點
- 1、基于 JQuery + Bootstrap (v4.x)，簡單易用
- 2、拖動的 html 組件，支持通過 Json 自定義擴展
- 3、組件的屬性面板，支持通過 Json 自定義擴展
- 4、支持導出 json，然后自己通過 json 來構建自己的 UI 頁面
- 5、支持導入 json 到 bsFormBuilder，用來進行二次編輯
- 6、豐富的 API，方便二次開發(fā)和擴展
- 7、支持 “模板” 功能，可以選擇已有模板進行二次開發(fā)
- 8、內置輕量的 html 渲染引擎，速度極快，極好用~~
快速使用
<div id="builder"></div> <script> $('#builder').bsFormBuilder({...}); </script>
在使用前，需要導入 bootstrap 和 jquery 的相關文件。
<link href="path/bootstrap.min.css" rel="stylesheet"> <link href="path/bootstrap-icons.css" rel="stylesheet"> <script src="path/jquery.min.js"></script> <script src="path/bootstrap.bundle.min.js"></script> <!-- 導入 bs-form-builder 依賴--> <link href="path/bs-form-builder.min.css" rel="stylesheet"> <script src="path/bs-form-builder.min.all.js"></script>
開發(fā)文檔
1、初始化
通過 $('#builder').bsFormBuilder({options...}); 進行初始化，bsFormBuilder 方法可以傳入 options 配置，options 內容如下：
{ //模式: "view" 預覽模式, "builder" 構建工具模式 mode: "view", //使用哪些組件 useComponents:[], //初始化數據 datas:[], //操作按鈕列表 actionButtons:[], //操作按鈕模板 actionButtonTemplate:'', //組件擴展配置，配置的內容可以覆蓋掉系統(tǒng)的配置 components: {}, //每個組件的默認屬性 defaultProps: [], //屬性渲染的 html 模板配置 propTemplates: {}, //初始化回調方法 onInit: function(bsFormBuilder){}, }
2、方法調用
-
1、通過
$('#builder').bsFormBuilder('methodName',arguments...);方法調用。 -
2、或者可以通過
$('#builder').bsFormBuilder().data('bsFormBuilder')來獲取bsFormBuilder實例，然后直接調用其方法。
Bs-Form-Builder 支持的方法如下：
- init： 初始化，bsFormBuilder 自動調用
- render(data, withActive)：通過 data 數據，來渲染出一個 html 內容
- renderDefault(data)： 系統(tǒng)內置的默認渲染方法，當 component 未定義自己的 render 方法的時候，使用該方法進行渲染。
- deepCopy(target, withNewElementIdAndId)：深度拷貝工具類
- createComponentData(component)：通過 component 來創(chuàng)建 data 數據
- genRandomId()：生成一個隨機的 id
- makeFormItemActive(elementId)：設置選擇狀態(tài)
- deleteFormItem(elementId)：刪除一個 formItem
- copyFormItem(elementId)：復制一個 formItem
- getDataByElementId(elementId)：通過一個節(jié)點 id 獲取 data 數據
- removeDataByElementId(elementId)：通過節(jié)點 id 移除 data 數據
- getParentArrayByElementId(elementId)：通過節(jié)點 id 獲取其所在的 數組
- refreshDataIndex($parentElement)：刷新 data 的 index 屬性
- refreshPropsPanel()：渲染（刷新）屬性面板
- renderPropTemplate(prop, data, template)：渲染屬性模板
- exportToJson()：導出 json 數據
- exportToHtml()：導出 html 數據
- getDatas()：獲取 datas 數據，并可以對其進行修改
- addDataToRoot(data)：添加一個 data 到根節(jié)點
- addDatasToRoot(array)：添加一個 data 數組到根節(jié)點
- addDataToContainer(data, containerElementId, index)：添加一個 data 到一個子container
- addDatasToContainer(array, containerElementId, index)：添加一個 data 數組到一個子container
- updateDataAttr(data, attr, value)：更新一個 data 的屬性，并同步到 html 顯示
- refreshDataElement(data)：刷新 data 數據到 html
- isViewMode()：是否是視圖模式
- isBuilderMode()：是否是構建模式（構建工具）
- destroy()：銷毀整個組件
3、組件擴展
在 bs-form-builder 中，組件是通過一個 json 內容來定義的，一個完整的組件的 json 內容 如下：
{ "name": "輸入框", "tag": "input", "drag": { "title": "輸入框", "type": "base", "index": 100, "iconClass": "bi bi-terminal" }, "template": '<div class="bs-form-item">' + ' <div class="form-group clearfix">' + ' <div class="form-label-left">' + ' <label for="label">{{label}}</label>' + ' </div>' + ' <div class="flex-auto">' + ' <input type="text" class="form-control" id="{{id}}"' + ' placeholder="{{placeholder}} value="{{value}}" />' + ' </div>' + ' </div>' + '</div>', }
組件屬性描述
- name：組件名稱
- tag: 組件 tag，全局唯一，若用戶定義的組件 tag 與系統(tǒng)一樣，則會覆蓋系統(tǒng)的組件定義。
- drag：右側顯示的內容
- props：組件支持的屬性配置
- propsfilter：系統(tǒng)屬性過濾配置，若為配置則顯示系統(tǒng)存在的 props 定義
- withOptions：該屬性是否帶有 options 配置
- defaultOptions：options 的默認配置值
- template：模板，可以是一個 string 字符串，也可以是一個返回一個 string 的 function(component, data)。
- onAdd：當組件被添加到 html 的時候回調，或者被拖動的時候，注意：當組件從一個子容器被拖動到另一個子容器，也會調用此方法。
- onPropChange：當屬性被修改的時候，回調。
- render：組件自定義的模板渲染方法，默認情況下無需定義。
注意：默認情況下，無需配置 onAdd、onPropChange、render 方法。除非您已經了解的其作用。
props 屬性描述
bsFormBuilder 已經內置了 4 個屬性：tag、id、name、label，任何組件都包含有這 4 個屬性（除非定義了 propsfilter），然而，一個復雜的組件除了這 4 個屬性以外，還應該有其他的屬性，比如 textarea 應該有行數 rows。
所以，textarea 組件的定義如下：
{ "name": "多行輸入框", "tag": "textarea", "props": [ { name: "rows", type: "number", label: "行數", placeholder: "請輸入行數...", defaultValue: 3, disabled: false, required: true, } ], "template":"...." }
template 語法：
- 輸出：{{attr}}
- for循環(huán)：{{~ for(let item of array)}} -{{item.name}}- {{~end}}
- if循環(huán)：{{~ if( x === "string")}} -{{x}}- {{~end}}
- if-elseif-else循環(huán)：{{~ if( x === "string")}} - {{~elseif(x === "other")} - {{~else}} - {{~end}}
template 內置變量：
- $bsFormBuilder : bsFormBuilder 實例
- $component：component 實例
- $data：當前 component 的數據
- $children：html 數組，若當前是一個容器，那么該容器下的 html 內容。
props 描述 props 是一個組件的屬性配置，系統(tǒng)內置了 4 個屬性，我們可以通過這個來定義組件自己的屬性。
例如，textarea 需要定義行號屬性，因此，需要添加如下的配置：
{ name: "rows", type: "input", label: "行數", placeholder: "請輸入行數...", defaultValue: 5, disabled: false, required: true, }
textarea 定義了名稱為 rows 的屬性，template 必須通過 {{rows}} 來接收該屬性的設置：
<textarea rows="{{rows}}">{{value}}</textarea>
prop 屬性描述
- name: 屬性名稱
- type: 屬性渲染類型，支持有：input/select/number/switch/checkbox/radio，可以擴展其他屬性類型，或者復寫這些屬性的默認行為。
- label: 屬性在面板里的label
- placeholder: 屬性里 placeholder 內容
- defaultValue: 屬性的默認值
- disabled: 屬性面板里是否啟用
- required: 屬性面板里是否必填
4、屬性擴展
理論上，屬性面板支持 input、select、number、switch、checkbox、radio 這 6 種屬性類型，已經夠用了，不過 bs-form-builder 依然支持通過在初始化的時候，通過初始化函數來擴展自己的屬性面板設置類型。
屬性擴展如下：
var options = { propTemplates: { otherType:function (){ return '<div> </div>' } }, defaultProps:[ { name: "屬性名稱", type: "otherType", label: "屬性label", placeholder: "請輸入行數..." } ] } $('#builder').bsFormBuilder(options)
或者
var options = { propTemplates: { otherType:function (){ return '<div> </div>' } }, components:{ component1 :{ "name": "自定義組件1", "tag": "component1", "props": [ { name: "屬性名稱1", type: "otherType", label: "屬性名稱1", } ], "template":"...." }, component2 :{ "name": "自定義組件2", "tag": "component2", "props": [ { name: "屬性名稱2", type: "otherType", label: "屬性名稱2", } ], "template":"...." } } } $('#builder').bsFormBuilder(options)
二次開發(fā)
1、下載代碼
git clone https://gitee.com/fuhai/bs-form-builder.git
2、安裝依賴
npm install
PS：在安裝依賴的過程中，可能會出現網絡錯誤，請配置好網絡環(huán)境，或者多安裝幾次...
3、構建編譯
npm run build
交流社區(qū)
QQ群：117662146
評論
圖片
表情