Query表单向导是一个jQuery插件，与某种表格流协助表单创建（不用刷新页面）。举个例子，如果你有一个巨大的表格来输入用户数据，你可以使用表单向导来将其分成一系列相关步骤。这一优点使用户不会被超长表单吓到，并且当用户输入信息时为其提供一些进度指示。

在这篇文章中，我们列出了开发者最喜欢的六大jQuery表单向导，考量了它们的不同功能以及如何创立你自己的向导。这不会是一个冗长的列表，如果你正在寻找一个jQuery表单向导，这一定会为你指明正确的方向。

此列表在2017年8月30日更新，从列表中删除了损坏和弃用的插件，并加入了新的插件来提供开发者要求的功能。

1. jQuery Steps

jQuery Steps是一个智能UI元素，使开发者可以很方便地创建向导界面。这个插件将内容分成区块来形成更有结构和顺序 的页面外观。它有多种功能，例如、状态保持（这会保存你每一步的输入）以及每个区块的过渡效果。它可以通过NuGet或者bower安装，拥有内容和功能丰富的API。

2. jQuery Smart Wizard

Smart Wizard是一个灵活且高度客户化的jQuery步骤向导插件，有Bootstrap支持。它很容易执行，并且可以为你的表单、检出屏幕、注册步骤创建一个整洁而时髦的界面。它的功能包括主题支持（包括了多个主题）、URL导航、步骤选择和动态隐藏或关闭步骤。它可以通过npm、bower和composer安装，拥有内容和功能丰富的API。

3. formToWizard

这个小型插件可以用jQuery将任何网络表格转换成多步骤的向导，每个表格<fieldset>可以转换成具有前进和后退按键的单独步骤。虽然它没有像前两个插件那么多的功能，但它和jQuer确认插件整合，来提供确认功能。它是一个单独的文件（所以你可以从GitHub上将其提取下来），如果JavaScript不可用，它会慢慢的退化。

4. jQuery Stepy

jQuery Stepy是一个生成可客户化表格的向导。它假定表格有特定的结构，其中有特定的类。然后你只需要初始化插件，然后就拥有了表单向导。

此插件没有任何预先设定的风格。但是，它提供了丰富的选择，例如可以在步骤之间导航，提供前进、后退和完成按钮与过渡效果，与任何你选用的确认插件整合。它提供了合理的API，例如允许你触发步骤间的召回，或者当前步骤的确认后的召回。

5. Twitter Bootstrap Wizard

这个Twitter Bootstrap插件利用形式可转换结构建造向导。它允许用户利用按钮来建造一个向导功能，来遍访不同的向导步骤和实践，并分别接入每一步。此插件关键的优势在于它和Bootstrap紧密整合。它有一些基本功能，例如确认、进度条和创建或移除步骤的能力。另外，为了简单地从GitHub中复制插件，它还可以通过Bower（虽然并不推荐）来安装。它有不错的内容且提供了基础的API。

6. jQuery.wizard

最后要介绍的是jQuery.wizard。这是一个不同的表单向导，支持分支——在评论中被要求的功能之一。

基本结构包括步骤和分支，后者是选择性的。一个简单的线性表格可能只要求一个包含所有步骤的分支，但复杂的表格可能要求用到多个分支，甚至是极为复杂的分支。开发者需要处理表单中步骤和分支的数量。向导采用了不同的有限步骤决定怎样自身导航。

这一插件的内容前所未有的丰富，提供了扩展API。它可以通过npm或者Bower来安装，与Internet Explorer 6之后的所有版本兼容。它可以和多种其他插件整合，包括最受欢迎的jQuery Validation。你可以通过复制回复并在浏览器中查看examples/index.html来查看不同的例子。

彩蛋

开源软件的世界很精彩，在为新项目选用插件时可以坐享极丰富的选择。但是，这并不意味着我们应该躲避为有真正作用的软件付费。以下是两种需要付费的表单向导插件。我推荐你们去看一看它们，说不定会对你有用：

• Form Wizard – Multi Step Form Validation（下载链接：https://codecanyon.net/item/form-wizard-multi-step-form-validation/19613591）

• Timon – Step Form Wizard + jQuery Step Form Builder（下载链接：https://codecanyon.net/item/timon-step-form-wizard/15830006）

最后，如果你是那种喜欢弄懂所有事情的原理，不喜欢使用插件，那么你可能会想要看一看以下这些教程，告诉你如何通过探索来创建一个表单向导。

• Turn any webform into a powerful wizard with jQuery（地址：http://www.jankoatwarpspeed.com/turn-any-webform-into-a-powerful-wizard-with-jquery-formtowizard-plugin/）

• Multistep Form With Progress Bar Using jQuery And CSS（地址：http://talkerscode.com/webtricks/multistep-form-with-progress-bar-using-jquery-and-css.php）

结论

你已经拥有6个jQuery表单向导插件的详尽概览，每一个插件都有不同的功能和特点。根据项目要求来选用它们，希望你可以从这篇文章中找到对你有所帮助的内容。如果有什么遗漏请告知我们，或者通过下方评论告诉我们你最喜欢的插件是哪一个。

绍

jExcel是一个轻量级的原生javascript插件，用于创建与Excel或任何其他电子表格软件兼容的基于Web的交互式表格和电子表格。可以从JS数组，JSON，CSV或XSLX文件创建在线电子表格表。可以从excel复制并直接粘贴到jExcel电子表格，反之亦然。集成任何第三方javascript插件非常容易，可以创建自己的自定义列，自定义编辑器，并在应用程序中自定义任何功能。jExcel通过其原生列类型提供了大量不同的输入选项，以涵盖最常见的基于Web的应用程序需求。它是Web数据管理的完整解决方案。使用jExcel javascript电子表格创建出色的应用程序。

开源地址

https://github.com/paulhodel/jexcel

主要优点

• 制作丰富且用户友好的Web界面和应用程序
• 可以使用用户的方式轻松处理复杂的数据输入。
• 改善用户软件体验
• 创建丰富的CRUDS和漂亮的UI
• 与excel的兼容性：用户可以使用常见的复制和粘贴快捷方式移动数据
• 通过简单的第三方插件集成轻松进行自定义
• 精益，快速且易于使用
• 成千上万的成功用户案例
• 加快处理基于Web的软件中的复杂数据输入的工作

安装使用

npm install jexcel

• 简单示例

将javascript电子表格集成到站中，创建您的第一个在线电子表格的基本示例：

1、首先引入相关js和css文件

<script src="./jexcel/v3/jexcel.js"></script>
<script src="./jsuites/v2/jsuites.js"></script>
<link rel="stylesheet" href="./jsuites/v2/jsuites.css" type="text/css" />
<link rel="stylesheet" href="./jexcel/v3/jexcel.css" type="text/css" />

2、定义一个基于div的容器并编写js

<div id="mytable"></div>
<script>
 data = [
 ["苹果", 0, 1],
 ["草莓", 1, 2],
 ["西瓜", 2, 3]
 ];
 jexcel(document.getElementById("mytable"), {
 data: data,
 colWidths: [300, 80, 100]
 });
</script>

3、打开浏览器查看效果

就这么几句简单的代码就像打开了一个无限简化的Excel一般

查看DEMO

Github上提供了相关Demo，我们一起来看一看都有哪些

• 搜索和分页

jexcel(document.getElementById('spreadsheet'), {
 csv:'https://bossanova.uk/jexcel/v3/demo.csv',
 csvHeaders:true,
 search:true,
 pagination:10,
 columns: [
 { type:'text', width:300 },
 { type:'text', width:200 },
 { type:'text', width:100 },
 { type:'text', width:100 },
 { type:'text', width:100 },
 ]
});

• 列类型支持

1. text
2. numeric
3. hidden
4. dropdown
5. autocomplete
6. checkbox
7. radio
8. calendar
9. image
10. color

var data = [
 ['Jazz', 'Honda', '2019-02-12', '', true, '$ 2.000,00', '#777700'],
 ['Civic', 'Honda', '2018-07-11', '', true, '$ 4.000,01', '#007777'],
];
jexcel(document.getElementById('spreadsheet'), {
 data:data,
 columns: [
 { type: 'text', title:'Car', width:120 },
 { type: 'dropdown', title:'Make', width:200, source:[ "Alfa Romeo", "Audi", "Bmw" ] },
 { type: 'calendar', title:'Available', width:200 },
 { type: 'image', title:'Photo', width:120 },
 { type: 'checkbox', title:'Stock', width:80 },
 { type: 'numeric', title:'Price', width:100, mask:'$ #.##,00', decimal:',' },
 { type: 'color', width:100, render:'square', }
 ]
});

• 下拉框

var data = [
 ['US', 'Wholemeal', 'Yes', '2019-02-12'],
 ['CA;US;UK', 'Breakfast Cereals', 'Yes', '2019-03-01'],
 ['CA;BR', 'Grains', 'No', '2018-11-10'],
 ['BR', 'Pasta', 'Yes', '2019-01-12'],
];
jexcel(document.getElementById('spreadsheet'), {
 data:data,
 columns: [
 { type:'dropdown', width:'300', title:'Product Origin', url:'/jexcel/countries', autocomplete:true, multiple:true },
 { type:'text', width:'200', title:'Description' },
 { type:'dropdown', width:'100', title:'Stock', source:['No','Yes'] },
 { type:'calendar', width:'100', title:'Best before' },
 ]
});

• 日期时间选择框

var data = [
 ['Flag Fen', 'South East', '2019-01-01'],
 ['Bristol Aero Collection (BAC)','South West','2019-04-03'],
 ['Experience Barnsley', 'North','2018-12-03'],
 ['Cinema Museum', 'London',''],
 ['University of Hertfordshire Art Collection', 'South East',''],
 ['LUX London', 'London','2016-11-03'],
];
jexcel(document.getElementById('spreadsheet'), {
 data:data,
 columns: [
 {
 type:'text',
 title:'Museum',
 width:'300',
 },
 {
 type:'dropdown',
 title:'Region',
 source:['South East','South West','North','London'],
 width:'200',
 },
 {
 type:'calendar',
 title:'Last visit',
 options: { format:'DD/MM/YYYY' },
 width:'100',
 },
 ]
});

• 上传图片到表格

jexcel(document.getElementById('spreadsheet'), {
 data:data,
 columns: [
 { type:'text', width:300, title:'Title' },
 { type:'image', width:120, title:'Cover' },
 ]
});

• 表格操作

插入，移除和移动列和行，这块就是表格的相关操作了，都可以通过相关API实现

• 表头

jExcel电子表格使用指令nestedHeadrs本机实现嵌套头文件，如下面的示例所示。

• 导出

导出非常简单，就调用一个方法

mySpreadsheet = jexcel(document.getElementById('spreadsheet1'), {
 csv:'https://bossanova.uk/jexcel/v3/demo.csv',
 csvHeaders:true,
 columns: [
 { type:'text', width:70 },
 { type:'text', width:200 },
 { type:'text', width:300 },
 ]
});
document.getElementById('download').onclick = function () {
 mySpreadsheet.download();
}

由于相关示例比较丰富，包括合并单元格、懒加载等丰富的功能等再此就不在展示，已经对它感兴趣的小伙伴不妨直接去体验下，就能感受到它的强悍了！并且还提供了包括React、Vue、jQuery等在内的相关实现，这样你就可以更好的集成到你的相关项目中去了，非常的人性化！

总结

jExcel是一个非常简单而且功能丰富的Web端JavaScript电子表格，就和名字一样，就如同是Web端的Excel，相当于是Excel的表格模块，无论是处理数据还是用户操作比普通的HTML表格强上无数倍，相信已经有小伙伴想去尝试一番了，赶紧试试吧！希望对你有所帮助！