bsFormBuilder是一个基于JQuery+Bootstrap(v4.x)的表单构建工具。

特点1、基于JQuery+Bootstrap(v4.x)，简单易用2、拖动的html组件，支持通过Json自定义扩展3、组件的属性面板，支持通过Json自定义扩展4、支持导出json，然后自己通过json来构建自己的UI页面5、支持导入json到bsFormBuilder，用来进行二次编辑6、丰富的API，方便二次开发和扩展7、支持“模板”功能，可以选择已有模板进行二次开发8、内置轻量的html渲染引擎，速度极快，极好用~~快速使用<divid="builder"></div><script>$('#builder').bsFormBuilder({...});</script>在使用前，需要导入bootstrap和jquery的相关文件。

<linkhref="path/bootstrap.min.css"rel="stylesheet"><linkhref="path/bootstrap-icons.css"rel="stylesheet"><scriptsrc="path/jquery.min.js"></script><scriptsrc="path/bootstrap.bundle.min.js"></script><!--导入bs-form-builder依赖--><linkhref="path/bs-form-builder.min.css"rel="stylesheet"><scriptsrc="path/bs-form-builder.min.all.js"></script> 开发文档1、初始化通过 $('#builder').bsFormBuilder({options...}); 进行初始化，bsFormBuilder 方法可以传入options配置，options内容如下：

{//模式:"view"预览模式,"builder"构建工具模式mode:"view",//使用哪些组件useComponents:[],//初始化数据datas:[],//操作按钮列表actionButtons:[],//操作按钮模板actionButtonTemplate:'',//组件扩展配置，配置的内容可以覆盖掉系统的配置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)：系统内置的默认渲染方法，当component未定义自己的render方法的时候，使用该方法进行渲染。deepCopy(target,withNewElementIdAndId)：深度拷贝工具类createComponentData(component)：通过component来创建data数据genRandomId()：生成一个随机的idmakeFormItemActive(elementId)：设置选择状态deleteFormItem(elementId)：删除一个formItemcopyFormItem(elementId)：复制一个formItemgetDataByElementId(elementId)：通过一个节点id获取data数据removeDataByElementId(elementId)：通过节点id移除data数据getParentArrayByElementId(elementId)：通过节点id获取其所在的数组refreshDataIndex($parentElement)：刷新data的index属性refreshPropsPanel()：渲染（刷新）属性面板renderPropTemplate(prop,data,template)：渲染属性模板exportToJson()：导出json数据exportToHtml()：导出html数据getDatas()：获取datas数据，并可以对其进行修改addDataToRoot(data)：添加一个data到根节点addDatasToRoot(array)：添加一个data数组到根节点addDataToContainer(data,containerElementId,index)：添加一个data到一个子containeraddDatasToContainer(array,containerElementId,index)：添加一个data数组到一个子containerupdateDataAttr(data,attr,value)：更新一个data的属性，并同步到html显示refreshDataElement(data)：刷新data数据到htmlisViewMode()：是否是视图模式isBuilderMode()：是否是构建模式（构建工具）destroy()：销毁整个组件3、组件扩展在bs-form-builder中，组件是通过一个json内容来定义的，一个完整的组件的json内容如下：

{"name":"输入框","tag":"input","drag":{"title":"输入框","type":"base","index":100,"iconClass":"bibi-terminal"},"template":'<divclass="bs-form-item">'+'<divclass="form-groupclearfix">'+'<divclass="form-label-left">'+'<labelfor="label">{{label}}</label>'+'</div>'+'<divclass="flex-auto">'+'<inputtype="text"class="form-control"id="{{id}}"'+'placeholder="{{placeholder}}value="{{value}}"/>'+'</div>'+'</div>'+'</div>',} 组件属性描述

name：组件名称tag:组件tag，全局唯一，若用户定义的组件tag与系统一样，则会覆盖系统的组件定义。drag：右侧显示的内容props：组件支持的属性配置propsfilter：系统属性过滤配置，若为配置则显示系统存在的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循环：{{~for(letitemofarray)}}-{{item.name}}-{{~end}}if循环：{{~if(x==="string")}}-{{x}}-{{~end}}if-elseif-else循环：{{~if(x==="string")}}-{{~elseif(x==="other")}-{{~else}}-{{~end}}template内置变量：

$bsFormBuilder:bsFormBuilder实例$component：component实例$data：当前component的数据$children：html数组，若当前是一个容器，那么该容器下的html内容。props描述 props是一个组件的属性配置，系统内置了4个属性，我们可以通过这个来定义组件自己的属性。

例如，textarea需要定义行号属性，因此，需要添加如下的配置：

{name:"rows",type:"input",label:"行数",placeholder:"请输入行数...",defaultValue:5,disabled:false,required:true,} textarea定义了名称为rows的属性，template必须通过 {{rows}} 来接收该属性的设置：

<textarearows="{{rows}}">{{value}}</textarea> prop属性描述

name:属性名称type:属性渲染类型，支持有：input/select/number/switch/checkbox/radio，可以扩展其他属性类型，或者复写这些属性的默认行为。label:属性在面板里的labelplaceholder:属性里placeholder内容defaultValue:属性的默认值disabled:属性面板里是否启用required:属性面板里是否必填4、属性扩展理论上，属性面板支持input、select、number、switch、checkbox、radio这6种属性类型，已经够用了，不过bs-form-builder依然支持通过在初始化的时候，通过初始化函数来扩展自己的属性面板设置类型。

属性扩展如下：

varoptions={propTemplates:{otherType:function(){return'<div></div>'}},defaultProps:[{name:"属性名称",type:"otherType",label:"属性label",placeholder:"请输入行数..."}]}$('#builder').bsFormBuilder(options) 或者

varoptions={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) 二次开发1、下载代码

gitclonehttps://gitee.com/fuhai/bs-form-builder.git 2、安装依赖

npminstall PS：在安装依赖的过程中，可能会出现网络错误，请配置好网络环境，或者多安装几次...

3、构建编译

npmrunbuild 交流社区QQ群：117662146