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

最新推荐文章于 2024-06-13 12:45:00 发布

weixin_33713503

最新推荐文章于 2024-06-13 12:45:00 发布

阅读量1k

点赞数

文章标签：前端 javascript php ViewUI

原文链接：http://www.cnblogs.com/Renyi-Fan/p/10146470.html

版权

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

一、总结

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

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

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

这种可编辑的表格一定是双向绑定，那么可以vue和angular，

终于找到了

多换几个关键词搜索就好了

js editable table

没找到

换juqery editable table找到了

二、几个Dynamic editable table

1、Vue JS| Dynamic editable table？

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

2、js-grid？

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

3、GIJGO？

开源

4、SpreadJS？

High-speed Excel-like JavaScript spreadsheet components

就是网络版的excel 功能全但是要钱

5、mdbootstrap？

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

6、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

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

https://divtable.com/generator/

8、找了一圈都不合适，只有自己写了？

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/

最后选了这个

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

input 位置单元格

可以编辑的是input标签，点哪里，就把input放到点击那里，input失去焦点的时候把input的值传递给那个那个表格的单元格就好，

或者：

td里面放一个span一个input，不编辑的时候显示span，编辑的时候显示input，其实也都非常好实现，

相比于上一种方法，input多了几个，不过完全不影响的

三、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>

转载于:https://www.cnblogs.com/Renyi-Fan/p/10146470.html

weixin_33713503

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
js插件---在线类似excel生成图表插件解决方案

js插件---在线类似excel生成图表插件解决方案一、总结一句话总结：google比百度好用多了，多用googlegoogle比百度好用多了，多用google找准关键字+多尝试关键字：google js editable table jquery 双向绑定这种可编辑的表格一定是双向绑定，那么可以vue和angular，终于找到了多换几个关键词搜索就好了js edi...
复制链接

扫一扫