用于在线拖放表单生成器的 jQuery 插件

用于在线拖放表单生成器的 jQuery 插件

版本:

浏览量:179

最后更新:2021-09-06

应用标签:Jquery插件MAC 软件

推荐指数:

详细信息

Form Builder 是一个 jQuery 插件,可将 atextarea变成在线表单构建器,让您的用户通过拖放快速构建自己的 Web 表单。

还提供了一个 formRender 组件,它允许您从您指定的表单模板渲染表单。

目录:

  • 安装

  • 表单生成器

  • 表单渲染

安装:

# Yarn
yarn add formBuilder
 
# NPM
$ npm install formBuilder
 
# Bower
$ bower install formBuilder

如何使用它:

1. 在您的项目中加载 jQuery 库和 jQuery 表单构建器的样式表和 JavaScript。

<!-- jQuery -->
<script src="/path/to/cdn/jquery.min.js"></script>
<!-- Core -->
<script src="/path/to/dist/form-builder.min.js"></script>
<!-- Render form templates created with formBuilder -->
<script src="/path/to/dist/form-render.min.js"></script>

2. 加载必要的jQuery UI以创建可拖放的表单组件。

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

3.textarea为表单生成器创建标准 Html

<textarea name="formBuilder" id="formBuilder"></textarea>

4. 调用插件textarea来创建一个基本的表单构建器。

$('textarea').formBuilder();

5. 创建您自己的表单构建器的可用选项。

$('textarea').formBuilder({
 
  // additional form action buttons- save, data, clear
  actionButtons: [],
 
  // enables/disables stage sorting
  allowStageSort: true,
 
  // append/prepend non-editable content to the form.
  append: false,
  prepend: false,
 
  // control order
  controlOrder: [
    'autocomplete',
    'button',
    'checkbox-group',
    'checkbox',
    '<a href="https://www.jqueryscript.net/time-clock/">date</a>',
    'file',
    'header',
    'hidden',
    'number',
    'paragraph',
    'radio-group',
    'select',
    'text',
    'textarea',
  ],
 
  // or left
  controlPosition: 'right',
 
  // or 'xml'
  dataType: 'json',
 
  // default fields
  defaultFields: [],
 
  // save, data, clear
  disabledActionButtons: [],
 
  // disabled attributes
  disabledAttrs: [],
 
  // disabled buttons
  disabledFieldButtons: {},
 
  // disabled subtypes
  disabledSubtypes: {},
 
  // disabled fields
  disableFields: [],
 
  // disables html in field labels
  disableHTMLLabels: false,
 
  // removes the injected style
  disableInjectedStyle: false,
 
  // opens the edit panel on added field
  editOnAdd: false,
 
  // adds custom control configs
  fields: [],
 
  // warns user if before the remove a field from the stage
  fieldRemoveWarn: false,
 
  // DOM node or selector
  fieldEditContainer: null,
 
  // add groups of fields at a time
  inputSets: [],
 
  // custom notifications
  notify: {
    error: console.error,
    success: console.log,
    warning: console.warn,
  },
 
  // prevent clearAll from remove default fields
  persistDefaultFields: false,
 
  // callbakcs
  onAddField: (fieldData, fieldId) => fieldData,
  onAddOption: () => null,
  onClearAll: () => null,
  onCloseFieldEdit: () => null,
  onOpenFieldEdit: () => null,
  onSave: (evt, formData) => null,
   
  // replaces an existing field by id.
  replaceFields: [],
 
  // user roles
  roles: {
    1: 'Administrator',
  },
 
  // smoothly scrolls to a field when its added to the stage
  scrollToFieldOnAdd: true,
 
  // shows action buttons
  showActionButtons: true,
 
  // sortable controls
  sortableControls: false,
 
  // sticky controls
  stickyControls: {
    enable: true,
    offset: {
      top: 5,
      bottom: 'auto',
      right: 'auto',
    },
  },
 
  // defines new types to be used with field base types such as button and input
  subtypes: {},
 
  // defines a custom output for new or existing fields.
  templates: {},
 
  // defines custom attributes for field types
  typeUserAttrs: {},
 
  // disabled attributes for specific field types
  typeUserDisabledAttrs: {},
 
  // adds functionality to existing and custom attributes using onclone and onadd events. Events return JavaScript DOM elements.
  typeUserEvents: {},
 
});

6. 表单生成器的 API 方法。

// add a new field
var field = {
    type: 'text',
    class: 'form-control',
    label: 'label'
};
formBuilder.actions.addField(field, index);
 
// clear fields
formBuilder.actions.clearFields();
 
// close all field editing panels
formBuilder.actions.closeAllFieldEdit();
 
// remove a specific field by id or leave blank to remove the last field.
formBuilder.actions.removeField(id);
 
// save the data
formBuilder.actions.save();
 
// get data as JS
formBuilder.actions.getData();
 
// get data as XML
formBuilder.actions.getData('xml');
 
// get data as formatted JSON
formBuilder.actions.getData('json', true);
 
// set additional data
var formData = '[{"type":"text","label":"Full Name","subtype":"text","className":"form-control","name":"text-1476748004559"},{"type":"select","label":"Occupation","className":"form-control","name":"select-1476748006618","values":[{"label":"Street Sweeper","value":"option-1","selected":true},{"label":"Moth Man","value":"option-2"},{"label":"Chemist","value":"option-3"}]},{"type":"textarea","label":"Short Bio","rows":"5","className":"form-control","name":"textarea-1476748007461"}]';
formBuilder.actions.setData(formData);
 
// change the editor language without reloading
formBuilder.actions.setLang(lang);
 
// show data
formBuilder.actions.showData();
 
// toggle all panels
formBuilder.actions.toggleAllFieldEdit();
 
//  toggle the edit mode for fields
formBuilder.actions.toggleFieldEdit(currentFieldId);

7. 使用formRender方法从表单模板呈现表单

<div class="fb-render">
  <textarea id="fb-template"><form-template> <fields> <field name="select-1454177070204" label="Select" style="multiple" description="" required="false" className="form-control" type="select" > <option value="option-1">Option 1</option> <option value="option-2">Option 2</option> </field> <field name="rich-text-1454177067296" label="Text Area" description="" className="form-control" required="false" type="textarea" /> </fields> </form-template></textarea>
</div>
var fbTemplate = document.getElementById('fb-template');
$('.fb-render').formRender({
  dataType: 'xml',
  formData: fbTemplate.value
});
// or
$('.fb-render').formRender({
  dataType: 'xml',
  formData: '<form-template><fields><field name="text-input-1454163102327" class="form-control" label="Text Field" description="" required="false" type="text" /><field name="date-input-1454163105133" class="form-control" label="Date Field" description="" required="false" type="date" /><field name="checkbox-group-1454163056695" label="Checkbox Group" style="multiple" description="" required="false" type="checkbox-group"><option value="option-1">Option 1</option><option value="option-2">Option 2</option></field></fields></form-template>' };
});

8.formRender方法的可用选项

$('.fb-render').formRender({
 
  // container for our rendered form
  container: false,
 
  // form template
  formData: false,
 
  // 'xml' | 'json'
  dataType: 'json',
 
  // custom labels
  label: {
    formRendered: 'Form Rendered',
    noFormData: 'No form data.',
    other: 'Other',
    selectColor: 'Select Color'
  },
 
  // setting render to false prevents formRender from making any changes to the DOM
  render: true,
 
  // feedbacks
  notify: {
    error: function(message) {
      return console.error(message);
    },
    success: function(message) {
      return console.log(message);
    },
    warning: function(message) {
      return console.warn(message);
    }
  }
 
});

9. 方法的可用方法formRender

const formRenderInstance = $('#render-container').formRender(formRenderOptions);
 
// clear all data
formRenderInstance('clear');
 
// capture user data
formRenderInstance.userData
 
// grab the rendered form's HTML
$('#render-container').formRender('html');
 
// render form data
const wrap = $('.render-wrap');
const formRender = wrap.formRender();
wrap.formRender('render', formData);
 
// set data
const wrap = $('.render-wrap');
const formRender = wrap.formRender();
wrap.formRender('setData', formData);

变更日志:

v3.7.2 (2021-07-14)

  • bugfix

v3.7.2 (2021-06-08)

  • fixed: save not returning js formData

v3.7.1 (2021-06-05)

  • setData working intermittently

v3.7.0 (2021-05-29)

  • persistDefaultFields option

v3.6.2 (2020-12-08)

  • Bugfix: radio group option remove button visible on second option

v3.6.1 (2020-08-24)

  • Supports custom option attributes

  • Bugfix

v3.5.2 (2020-08-24)

  • Bugfix: icon name conflict

v3.5.1 (2020-08-23)

  • Bug Fixes

v3.5.0 (2020-08-23)

  • added onAddOption event

v3.4.2 (2020-03-05)

  • clone id bug

v3.4.1 (2020-03-03)

  • Bugfix: multiple attribute added to select

v3.4.0 (2020-02-02)

  • Bugfix

v3.3.4 (2020-02-01)

  • Bugfix

v3.3.1 (2020-01-29)

  • Fixed: Field removed from stage but not formData

v3.3.0 (2020-01-26)

  • Bugfixed for demo

  • Fixed: typeUserAttrs, doesn't render checkbox checked property correctly

v3.2.6 (2020-01-01)

  • Bugfixed for Adblocker

v3.2.5 (2019-06-27)

  • Bug Fixes

v3.2.4 (2019-05-27)

  • Fixed numeric value preservation

v3.2.3 (2019-05-03)

  • Bugfix

v3.2.2 (2019-04-23)

  • Updated jQuery dependency.

v3.2.1 (2019-03-30)

  • Fixed btn: button style classes not correctly applied

v3.1.4 (2019-03-29)

  • i18n: add support for translatable typeUserAttrs

v3.1.3 (2018-12-13)

  • Bugfixes

v3.1.2 (2018-11-21)

  • Fixed xml: fields are nesting

v3.1.1 (2018-11-20)

  • fix(formRender): error when destrtcuring null

v3.1.0 (2018-11-15)

  • Add bootstrap grid/column support

v3.0.2 (2018-11-13)

  • Bugfixes

v3.0.1 (2018-11-08)

  • Bugfixes

v3.0.0 (2018-11-07)

  • Bugfixes

v2.10.9 (2018-11-07)

  • Bugfixes

v2.10.7 (2018-11-06)

  • Bugfixes

v2.10.3 (2018-11-06)

  • Bugfix fbControlsLoaded

v2.10.0 (2018-11-03)

  • Bugfixed

  • Added more options

  • Code improvement

v2.9.8 (2017-10-06)

  • hotfix(inputSets): control icon

v2.9.7 (2017-10-04)

  • hotfix

v2.9.6 (2017-09-04)

  • Removed unused style, add get-data class to data button

  • Improvements(options) disabledFieldButtons option

  • Pull primary input outside of label for "other" option

  • Fix Edge "Help Text"

  • Do not default select radio

  • Move bootstrap stuff inside .formbuilder selector

v2.9 (2017-08-30)

  • feature(option) replaceFields

v2.8 (2017-08-27)

  • improvement(checkbox)

  • add support for disabling form action buttons (copy, edit, remove)

v2.5.3 (2017-06-07)

  • Hotfix: paragraph label overflow

  • fixed autocomplete control behaviour

  • Fineuploader error handling & reporting

v2.5.1 (2017-05-31)

  • copy in control config rather than reference it so any alterations arent global. support fineuploader handler having querystring args. fix bug in applying fineuploader config to defaults

v2.5.0 (2017-05-31)

  • upgraded fineuploader plugin to use cdnjs by default so it no longer

v2.4.1 (2017-05-30)

  • Hotfix: disableFields option

v2.4.0 (2017-05-29)

  • New control plugin to replace the default file upload type

v2.3.5 (2017-05-28)

  • Hotfix: Constraint API

v2.3.4 (2017-05-26)

  • Hotfix: preload values to exisitng field types, fix fieldOrder

  • Hotfix: actionButtons are submitting forms

  • Hotfix: btn-undefined

  • Hotfix: opts.messages, sourcemaps

  • General cleanup, actionButtons option

  • Bug/extend fields

v2.2.7 (2017-05-25)

  • Make checkbox valid when at least one checkbox is checked

v2.2.6 (2017-05-23)

  • Fix Other input behavior

v2.2.3 (2017-05-23)

  • Return unformatted JSON by default

v2.2.2 (2017-05-17)

  • Hotfix: getData

v2.2.1 (2017-05-17)

  • Update gulp tag

  • Update documentation

v2.1.2 (2017-05-11)

  • Update npm scripts

v2.1.1 (2017-04-21)

  • Required checkbox fix, form-horizontal css alignment fix

v2.1.0 (2017-04-20)

  • Critical fixes

v2.0.0 (2017-04-19)

  • Custom Controls, Automatic i18n, WYSIWYG Editor, HTML Labels

v1.24.7 (2017-04-11)

  • Fix textarea value not saving when preview changed

v1.24.6 (2017-02-22)

  • Bugfix: XMLParser children in ie and date form-control class

v1.24.5 (2017-02-16)

  • Code cleanup, alignment issues, check select required fix

  • Bug fixes: bower.json, formRender children undefined

  • Hotfix: typeUserEvents, attribute array converted to comma separated list

v1.24.2 (2016-10-25)

  • Hotfix: typeUserEvents, attribute array converted to comma separated list

v1.24.1 (2016-10-19)

  • Bugfix: defaultFields names are overwritten

  • Hotfix and Feature bonanza 

v1.23.1 (2016-10-17)

  • Feature: inputSets

  • Hotfix: deleteId undefined

v1.22.1 (2016-10-13)

  • Bugfix: updateJSON does not set correct version

  • Feature: Rows Attribute for TextArea

v1.21.3 (2016-10-12)

  • Feature: addField and removeField actions

  • Add Build and commit to gulp tag task

  • Chore: Add gulp tag task

  • Hotfix: addField index 0 without field

v1.20.3 (2016-10-08)

  • Bugfix: multi option name attribute

v1.20.2 (2016-10-02)

  • Bugfix: gulp font-edit

v1.20.1 (2016-09-29)

  • Bugfix: XML other option

v1.19.4 (2016-09-22)

  • Feature: tel subtype

  • Hotfix: Correctly escape attributes

  • Hotfix: typeUserAttrs duplicate attributes 

  • Feature: Copy button 

  • Bugfix: typeUserAttrs repeated value from formData

v1.18.0 (2016-09-17)

  • Feature: typeUserAttrs

v1.17.2 (2016-09-15)

  • Bugfix: Classes not saving in XML mode and option pre-select issues

v1.17.1 (2016-09-12)

  • Feature: showActionButtons option and showData action

  • Bugfix: clearFields action will error if no fields on stage

v1.16.0 (2016-09-04)

  • Feature: JSON support

v1.15.5 (2016-08-22)

  • Bugfix: Remove fields from disableFields option.

v1.15.5 (2016-08-20)

  • Feature: save action

v1.15.4 (2016-08-18)

  • Bugfix: formRender textarea value undefined

v1.15.3 (2016-08-15)

  • Bugfix: Cannot run formRender on multiple elements

v1.15.2 (2016-08-10)

  • Feature/Bugfix: Actions, formRender textarea value bugfix

v1.15.0 (2016-07-22)

  • Feature/Bugfix: Allow multiple files, bigfixes

v1.14.6 (2016-07-22)

  • Hotfix: set Sortable scroll to false

v1.14.4 (2016-07-19)

  • Feature: Fast edit options. Click to add field, sticky controls, auto edit toggle

  • Bugfix: Option defaults not rendering

  • Feature: Value attribute, improved mobile styling

  • Bugfix: Form not saving when fields added by click

v1.11.0 (2016-07-13)

  • Feature: Number input

v1.10.4 (2016-06-23)

  • Bugfix: IE compatibility issues

  • Bugfix: Radio group and checkbox group not rendered correctly in IE

  • Bugfix: Arrows functions don't work with arguments.

  • Bugfix: IE Element.remove() polyfill

  • Bugfix: Enter toggles XML field

  • Bugfix: remove CustomEvent, no IE support 

  • Bugfix: formRender not rendering with containers

  • Bugfix: formRender reinit, take regular js object

  • Bugfix: formRender hidden field issue

  • Bugfix: Add defaultFields to formData

  • Bugfix: button classes, special character encoding, renamed functions for Selenium

  • Bugfix: Object.assign

  • Bugfix: defaultFields multiple select not applied

  • Feature: disableFields option, formRender jQuery fallback, formSaved Event

  • Bugfix: Add defaultFields to formData

  • Bugfix: editing class attribute is wonky

  • Bugfix: Add pull left and right to _bs.scss

  • Bugfix: Update internal field id to better handle multiple editors

  • Bugfix: Standardizes how field variables are processed from xml, defaultfields and new field sources

  • Bugfix: saved subtypes not rendering 

  • Bugfix: Header subtypes

  • Bugfix: Remove polyfills causing problems in some apps

  • Bugfix: Block elements missing classNames

  • Bugfix: Firefox loses reference to textarea

  • Bugfix: Change validators to run on blur instead of keyup

  • Bugfix: field close tab callback fired twice on mobile

  • Bugfix: Removing an option causes error

  • Bugfix: Remove role limit

  • Bugfix: defaultFields multiple select not applied

  • Feature: Style and data updates, Class attribute

  • Feature: Header and Paragraph tags

  • Feature: controlOrder option.

  • Feature: Add "Other" option to checkbox and radio group fields

  • Chore: added/updated comments

v1.8.2 (2016-03-09)

  • Bugfix: Radio group preview

v1.8.1 (2016-03-07)

  • Feature: File upload element

  • Feature: Button element

v1.7.10 (2016-03-05)

  • Feature: Button element

v1.7.10 (2016-02-28)

  • fix issue with stringify and null values

  • Add options to formRender: render and notiy

  • Set form field data to template element to be used by other modules.

v1.7.8 (2016-02-24)

  • Add fontello fonts with config and Makefile for editing icons.

v1.7.7 (2016-02-24)

  • Bugfix: Close button doesn't close

  • Bugfix: max-length attribute should be maxlength

  • Chore: Add gulp plumber to build process to catch errors instead of fail build.

v1.7.6 (2016-02-22)

  • Bugfix: radio and checkbox group options without values cause formRender error.

  • Bugfix: Multiple selection bug for checkbox group and radio group fields.

  • Chore: Refactor build process, Add linter and code style settings, formRender santized attributes. 

v1.7.0 (2016-02-21)

  • Feature: Multiple selection. 

  • Feature: Mobile support for touch based drag and drop.

  • Bugfix/Feature: Added placeholder attribute for text and textarea fields.

  • Bugfix/Feature: Added reinitialization to formBuilder. 

v1.6.9 (2016-02-20)

  • Feature: Added sub-types to the text input for password, color, and email html5 inputs.

v1.6.8 (2016-02-09)

  • Render Help text and required *

v1.6.7 (2016-02-08)

  • Bugfix: fields are not sortable

v1.6.6 (2016-02-07)

  • Bugfix: change should be triggered when hidden textarea updated

v1.6.5 (2016-01-30)

  • Feature: Make rendered fields targetable

v1.6.4 (2016-01-28)

  • Bugfix: User options should be deep copied with $.extend

v1.6.3 (2016-01-27)

  • Bugfix: Remove max-length attribute for hidden fields, Update preview and label for textarea

v1.6.2 (2016-01-26)

  • Bugfix: Option text not rendered in IE

v1.6.1 (2016-01-24)

  • Bugfix: required attribute should not be rendered when false.

v1.6.0 (2016-01-08)

  • Feature: Hidden input field type added

v1.5.4 (2015-12-21)

  • update gulp to autopush tags

v1.5.3 (2015-11-24)

  • Bugfix: multiple formBuilder on one page.

v1.5.2 (2015-11-20)

  • Bugfix: formRender radio-group invalid name property

v1.5.1 (2015-11-19)

  • Feature: checkbox inputs can now be made into toggle switch.

  • Add minimal Bootstrap for rendered form styling

v1.4.0 (2015-11-06)

  • Feature: formRender is a companion plugin to render saved formData into a usable form. 

v1.3.5 (2015-10-29)

  • Fix XML parse and save.

v1.3.4 (2015-10-21)

  • Fix bug where radio-group has self-closing xml

v1.3.3 (2015-10-16)

  • Fix Preview/Edit toggle

2015-09-15

  • Refactor and add Dev Mode, bump version

  • Minor bug and style fixes

发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。