代码拉取完成，页面将自动刷新
一个基于 Bootstrap (v4.x) + JQuery 的、拖拽的表单构建工具。
<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>
通过 $('#builder').bsFormBuilder({options...}); 进行初始化，bsFormBuilder 方法可以传入 options 配置，options 内容如下：
{
//模式: "view" 预览模式, "builder" 构建工具模式，默认值为 builder
mode: "builder",
templateEngine: null, //支持自定义模板渲染引擎，默认使用 fasty
bsFormContainerSelector: ".bsFormContainer", // 设计容器
bsFormContainerFilterSelector: ".bsFormFilter", // 设计容器里，不允许拖动的组件 class
bsFormContainerSortableGroup: "shared", // 配置主容器里的 group 名称
bsFormContainerPlaceHolderSelector: ".bsFormContainer-placeholder", // 设计容器里的提示内容
bsFormPropsSelector: ".bsFormProps", // 面板内容
bsFormPropsTitleSelector: ".bsFormPropsTitle", // 面板标题
bsFormPropsFilter:null, // 属性过滤器，用于对特殊的组件进行属性过滤
bsFormPropsItemAppended:null, //监听 props html 内容被追加，可以通其设置 propsPanel 里的表单内容或者事件
customBuilderStructure: false, // 自定义容器面板
onDataChange:null, //监听数据更新（更新之前）
onDataChanged:null, //监听数据更新（更新之后）
renderEmptyDrags: null,//当左边的拖动按钮分类找不到任何组件时，调用该方法
useComponents:[], //使用哪些组件
unUseComponents:[], //排除哪些组件（不使用哪些组件）
customRender:null, //支持自定义渲染方法，或者服务端渲染
optionsDatasources: null, // 定义数据源
//初始化数据
datas:[],
//操作按钮列表
actionButtons:[],
//操作按钮模板
actionButtonTemplate:'',
//组件扩展配置，配置的内容可以覆盖掉系统的配置
components: {},
//每个组件的默认属性
defaultProps: [],
//属性渲染的 html 模板配置
propTemplates: {},
//初始化回调方法
onInit: function(bsFormBuilder){},
}
1、通过 $('#builder').bsFormBuilder('methodName',arguments...); 方法调用。
2、或者可以通过 $('#builder').bsFormBuilder().data('bsFormBuilder') 来获取 bsFormBuilder 实例，然后直接调用其方法。
bsFormBuilder 支持的方法如下：
在 bsFormBuilder 中，组件是通过一个 json 内容来定义的，一个完整的组件的 json 内容 如下：
{
"name": "输入框",
"tag": "input",
"drag": {
"title": "输入框",
"type": "base",
"index": 100,
"icon": "bi bi-terminal"
},
"template": '<div class="bsFormItem">' +
' <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>',
}
组件属性描述
注意：默认情况下，无需配置 onAdd、onPropChange 方法。除非您已经了解的其作用。
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 语法：
template 内置变量：
props 描述 props 是一个组件的属性配置，系统内置了 4 个属性，我们可以通过这个来定义组件自己的属性。
例如，textarea 需要定义行号属性，因此，需要添加如下的配置：
{
name: "rows",
type: "input",
label: "行数",
placeholder: "请输入行数...",
defaultValue: 5,
disabled: false,
required: true,
}
textarea 定义了名称为 rows 的属性，template 必须通过 {{rows}} 来接收该属性的设置：
<textarea rows="{{rows}}">{{value}}</textarea>
prop 属性描述
理论上，属性面板支持 input、select、number、switch、checkbox、radio 这 6 种属性类型，已经够用了，不过 bsFormBuilder 依然支持通过在初始化的时候，通过初始化函数来扩展自己的属性面板设置类型。
属性扩展如下：
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)
在很多场景下，一些组件（比如复选框、下拉菜单等）的内容不是写死的，也不是自定义的，而是来之某个 API 接口，或者说来源于某个 "数据源"。此时，我们要做 一下配置：
1、在初始化 bsFormBuilder 的时候，定义好数据源列表，例如：
var options = {
optionsDatasources:[
{
text: "数据源1", value: "ds1",
options: [
{text: "aaa1", value: "value"}
]
},
{
text: "数据源2", value: 'ds2',
options: [
{text: "bbb1", value: "value1"},
{text: "bbb2", value: "value2"}
]
},
{
text: "数据源3", value: "ds3",
options: function (){
return ["..."]
}
},
{
text: "数据源4", value: "ds4",
options: "http://www.***.com/***.json"
}
]
}
$('#builder').bsFormBuilder(options);
数据结构说明：
PS:
- 1、optionsDatasources 可以配置为一个 url 地址(要求返回 json，json 内容必须有 datasources 字段来描述数据源数据)。
- 2、数据源里的 options 字段，可以是一个数据集合，也可以是一个 function，或者一个 url 地址 (要求返回 json，json 内容必须有 options 字段来描述数据)。
当配置 optionsDatasources 字段后，属性面板会多出一个 "选项类型" 的下拉菜单，用户让用户选择自定义选项，还是使用数据源。
1、下载代码
git clone https://gitee.com/fuhai/bsFormBuilder.git
2、安装依赖
npm install
PS：在安装依赖的过程中，可能会出现网络错误，请配置好网络环境，或者多安装几次...
3、构建编译生成 dist 文件
npm run build
案例：
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
1. 开源生态
2. 协作、人、软件
3. 评估模型