JavaScript 为 Form.io 提供动力的表格和 SDK
这个库是一个平版JavaScript格式渲染器和Form.io的SDK. 这使得您可以制作由Form.io所制作的JSON schema格式,并使用平版JavaScript来渲染您的应用程序中的这些格式,同时提供接口SDK来与Form.io API进行通信. 这个图书馆的好处包括:.
- Plain JavaScript 使用 ES6 和 Modern 实践执行(无 jQuery, Angular, React 或任何其他框架依赖)
- 将 JSON 设计成网络形式,并将该形式连接到 Form.io API 上
- 完整的窗体构建器,它创建了用于制作窗体的 JSON 方案.
- 被嵌入的组件、布局、日期/时间、选择、输入面罩以及更多包含的特性
- Full JavaScript API SDK 库在 Form.io 上方
正式文件
最新文件、发布资料和指南一律参考本文中提供的官方表格:
实例和示范
要了解更多关于这个图书馆的信息, 并看到一个演示 https://formio.github.io/formio.js 互联网档案馆的存檔,存档日期2014-12-21
安装
要将此 SDK 安装到您的项目中, 您可以在您的终端中使用以下命令 .
npm install --save @formio/js
窗体大楼
这个库有一个非常强大的JSON形式构建器,可以像下面这样被使用.
<html>
<head>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css"
/>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css"
/>
<link rel="stylesheet" href="https://cdn.form.io/js/formio.full.min.css" />
<script src="https://cdn.form.io/js/formio.full.min.js"></script>
</head>
<body>
<div id="builder"></div>
<script type="text/javascript">
Formio.builder(document.getElementById('builder'), {}, {});
</script>
</body>
</html>
这将创建一个强大的形式构建器 嵌入在您的应用程序中 。 见 我们的Demo页面 举个例子.
窗体构建文档
转到 窗体构建文档 关于开源格式构建器如何工作的完整文档.
窗体渲染
以下是如何在您的 HTML 应用程序中制作表格的简单实例.
<html>
<head>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css"
/>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css"
/>
<script src="https://cdn.form.io/js/formio.embed.js"></script>
</head>
<body>
<div id="formio"></div>
<script type="text/javascript">
Formio.createForm(document.getElementById('formio'), 'https://examples.form.io/example');
</script>
</body>
</html>
申请表如下:.
您也可以直接创建 JSON , 而不是从 Form.io 中引用嵌入的 URL .
Formio.createForm(document.getElementById('formio'), {
components: [
{
type: 'textfield',
key: 'firstName',
label: 'First Name',
placeholder: 'Enter your first name.',
input: true,
},
{
type: 'textfield',
key: 'lastName',
label: 'Last Name',
placeholder: 'Enter your last name',
input: true,
},
{
type: 'button',
action: 'submit',
label: 'Submit',
theme: 'primary',
},
],
});
这将使JSON在您的申请中成为表单.
JSFidle 实例
使用JSFiddle作为很好的沙盒环境, 这是一个例子,你可以自己叉出叉子!
http://jsfidle.net/travistidwell/z63jvwkp/ (中文(中国大陆) )
窗体渲染器文档
要更完整地记录如何在您的应用程序中使用此图书馆,请访问 窗体渲染器 文档.
向导渲染
此库还可以使用渲染出表单的相同方法在您的应用程序中渲染出表单向导.
对它是否应该成为巫师的威慑是基于 显示 窗体图案的属性
设定为 wizard。 。 。 .
<html>
<head>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css"
/>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css"
/>
<script src="https://cdn.form.io/js/formio.embed.js"></script>
</head>
<body>
<div id="formio"></div>
<script type="text/javascript">
Formio.createForm(document.getElementById('formio'), 'https://examples.form.io/wizard');
</script>
</body>
</html>
嵌入窗体
也可以使用这个库作为JavaScript用一行代码嵌入形式. 例如,嵌入 https://examples.form.io/example 页面存档备份,存于互联网档案馆 在应用程序中,您只需使用以下嵌入式代码即可.
<script src="https://cdn.form.io/js/formio.embed.min.js?src=https://examples.form.io/example&libs=true"></script>
举个例子说明这看起来和效果,请检查以下 Form.io 内嵌
嵌入文档的窗体
关于如何嵌入表格的更完整的文件,请访问 嵌入文档的窗体。 。 。 .
Java 脚本 SDK
除了此应用程序中有一个表格渲染器外,您还可以在应用程序中使用此库作为JavaScript SDK. 例如,要装入窗体,然后提交该窗体,您可以在您的 JavaScript 中完成以下操作 .
<html>
<head>
<script src="https://cdn.form.io/js/formio.min.js"></script>
<script type="text/javascript">
var formio = new Formio('https://examples.form.io/example');
formio.loadForm().then(function (form) {
// Log the form schema.
console.log(form);
formio
.saveSubmission({
data: {
firstName: 'Joe',
lastName: 'Smith',
email: '[email protected]',
},
})
.then(function (submission) {
// Log the full submission object.
console.log(submission);
});
});
</script>
</head>
</html>
您也可以在 ES6 应用程序内使用此功能如下 .
import { Formio } from '@formio/js/sdk';
let formio = new Formio('https://examples.form.io/example');
formio.loadForm((form) => {
console.log(form);
formio
.saveSubmission({
data: {
firstName: 'Joe',
lastName: 'Smith',
email: '[email protected]',
},
})
.then((submission) => {
console.log(submission);
});
});
JavaScript SDK文档.
关于JavaScript SDK的更完整的文档,请查看 JavaScript SDK 文档。 。 。 .
全开发者 API 文档
要查看完整的 SDK 文件,请 开发者 SDK 文档