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>

js插件---在线相似excel生成图表插件解决方案

js插件---在线相似excel生成图表插件解决方案

1、总结

一句话总结：google比百度好用多了，多用google

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

找准关键字+多尝试关键字：google js editable table jquery 双向绑定

2、 几个Dynamic editable table

一、Vue JS| Dynamic editable table？

二、js-grid？

三、GIJGO？

四、SpreadJS？

五、mdbootstrap？

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

七、这种动态生成指定行列表格的方式？

八、找了一圈都不合适，只有本身写了？

九、可编辑表格的实现原理是什么？

input 位置 单元格

3、editableTableWidget---比较基础的可编辑表格模型（没有样式）

2、几个Dynamic editable table

input 位置单元格