js插件---在線相似excel生成圖表插件解決方案

時間 2019-11-11

標籤插件在線相似 excel 生成圖表解決方案欄目 JavaScript 简体版

原文原文鏈接

js插件---在線相似excel生成圖表插件解決方案

1、總結

一句話總結：google比百度好用多了，多用google

google比百度好用多了，多用google

找準關鍵字+多嘗試關鍵字：google js editable table jquery 雙向綁定

這種可編輯的表格必定是雙向綁定，那麼能夠vue和angular，php

終於找到了html

多換幾個關鍵詞搜索就行了vue

js editable tablejquery

沒找到ajax

換juqery editable table找到了bootstrap

2、幾個Dynamic editable table

一、Vue JS| Dynamic editable table？

https://codepen.io/Pizzi/pen/GMOQXyapi

二、js-grid？

http://js-grid.com/demos/網絡

三、GIJGO？

開源ide

四、SpreadJS？

High-speed Excel-like JavaScript spreadsheet componentsgoogle

就是網絡版的excel 功能全可是要錢

五、mdbootstrap？

https://mdbootstrap.com/docs/jquery/tables/editable/#!

六、Dynamic Editable Table Plugin With jQuery - TableEdit.js？

優點是行列均可以添加，刪除也很方便

缺點是用戶少，bug卻很多

https://www.jqueryscript.net/tags.php?/editable%20table/

https://www.jqueryscript.net/table/Editable-Table-Plugin-jQuery-TableEdit.html

七、這種動態生成指定行列表格的方式？

https://divtable.com/generator/

八、找了一圈都不合適，只有本身寫了？

https://www.jqueryscript.net/demo/Stylish-Editable-Table-Plugin-with-jQuery-Bootstrap-2-3-Editable-Table/

找了一圈都不合適，只能本身找個基礎的，本身改本身加

https://www.jqueryscript.net/demo/Stylish-Editable-Table-Plugin-with-jQuery-Bootstrap-2-3-Editable-Table/

最後選了這個

九、可編輯表格的實現原理是什麼？

input 位置單元格

能夠編輯的是input標籤，點哪裏，就把input放到點擊那裏，input失去焦點的時候把input的值傳遞給那個那個表格的單元格就好，

或者：

td裏面放一個span一個input，不編輯的時候顯示span，編輯的時候顯示input，其實也都很是好實現，

相比於上一種方法，input多了幾個，不過徹底不影響的

3、editableTableWidget---比較基礎的可編輯表格模型（沒有樣式）

其實實現原理很是簡單：能夠編輯的是input標籤，點哪裏，就把input放到點擊那裏，input失去焦點的時候把input的值傳遞給那個那個表格的單元格就好，

核心的就是一個mindmup-editabletable.js

使用起來也簡單

 1 <!DOCTYPE html>
 2 <html lang="en">
 3   <head>
 4     <meta charset="utf-8">
 5 
 6     <title>Tiny editable jQuery Bootstrap spreadsheet from MindMup</title>
 7     
 8     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 9     <meta name="keywords" content="opensource jquery bootstrap editable table spreadsheet" />
10     <meta name="description" content="This tiny jQuery bootstrap plugin turns any table into an editable spreadsheet" />
11 
12 
13 
14 
15     <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
16     <script src="mindmup-editabletable.js"></script>
17   </head>
18   <body>
19 <div>
20 
21   <div class="pull-right">
22   </div>
23     <h1>editableTableWidget<br/> <small>tiny editable jQuery Bootstrap spreadsheet</small></h1>
24     <hr/>
25         <div class="alert alert-error hide">
26             That would cost too much
27         </div>
28           <table id="mainTable" class="table table-striped">
29             <thead><tr><th>Name</th><th>rewr</th><th>Profit</th><th>Fun</th></tr></thead>
30             <tbody>
31               <tr><td>Car2121</td><td>Car</td><td>200</td><td>0</td></tr>
32               <tr><td>Bike</td><td>330</td><td>240</td><td>1</td></tr>
33               <tr><td>Plane</td><td>430</td><td>540</td><td>3</td></tr>
34               <tr><td>Yacht</td><td>100</td><td>200</td><td>0</td></tr>
35               <tr><td>Segway</td><td>330</td><td>240</td><td>1</td></tr>
36             </tbody>
37           </table>
38           <h2><small>just start typing to edit, or move around with arrow keys or mouse clicks!</small></h2>
39 
40 </div>
41 
42 <script>
43   $('#mainTable').editableTableWidget().find('td:first').focus();
44   $('#textAreaEditor').editableTableWidget({editor: $('<textarea>')});
45 
46 </script>
47 
48   </body>
49 </html>