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表格強上無數倍，相信已經有小伙伴想去嘗試一番了，趕緊試試吧！希望對你有所幫助！